リアクタルータv4リダイレクトユニットテスト

Question

リアクタルータv4のコンポーネントをユニットテストするにはどうすればよいですか？ jestと酵素を使用して、リダイレクトを使って単体テストを単体テストしようとして失敗しています。

マイコンポーネント：

const AppContainer = ({ location }) => 
    (isUserAuthenticated() 
    ? <AppWithData /> 
    : <Redirect 
     to={{ 
      pathname: "/login", 
      state: { from: location } 
     }} 
     />); 

それをテストするために私の試み：

function setup() { 
    const enzymeWrapper = mount(
    <MemoryRouter initialEntries={["/"]}> 
     <AppContainer /> 
    </MemoryRouter> 
); 

    return { 
    enzymeWrapper 
    }; 
} 

jest.mock("lib/authAPI",() => ({ 
    isUserAuthenticated: jest.fn(() => false) 
})); 

describe("AppContainer component",() => { 
    it("renders redirect",() => { 
    const { enzymeWrapper } = setup(); 

    expect(enzymeWrapper.find("<Redirect></Redirect>")).toBe(true); 
    }); 
}); 

Answer 1

自分の質問に答えます。 基本的に私は自分のコンポーネントを浅くレンダリングし、認証されていればリダイレクトコンポーネントをレンダリングしているかどうかを確認します。ここで コード：

RedirectApp.js：

import React from "react"; 
import { Route, Switch, Redirect } from "react-router-dom"; 

const RedirectApp = props => { 
    return (
    <Switch> 
     <Redirect from="/all-courses" to="/courses" /> 
    </Switch> 
); 
}; 

export default RedirectApp; 

RedirectApp.test.js

function setup() { 
    const enzymeWrapper = shallow(<AuthenticatedApp />); 

    return { 
    enzymeWrapper 
    }; 
} 

describe("AuthenticatedApp component",() => { 
    it("renders Redirect when user NOT autheticated",() => { 
    authApi.isUserAuthenticated = jest.fn(() => false); 
    const { enzymeWrapper } = setup(); 

    expect(enzymeWrapper.find(Redirect)).toHaveLength(1); 
    }); 

    it("renders AppWithData when user autheticated",() => { 
    authApi.isUserAuthenticated = jest.fn(() => true); 
    const { enzymeWrapper } = setup(); 

    expect(enzymeWrapper.find(AppWithData)).toHaveLength(1); 
    }); 
}); 

Answer 2

は、ここで実際のURLの代わりにRedirectコンポーネントがページ上に存在するだけのことで変化していること、テストの私の最小限の例です：

import React from "react"; 
import { MemoryRouter, Route } from "react-router-dom"; 
import { mount } from "enzyme"; 
import RedirectApp from "./RedirectApp"; 

it("redirects /all-courses to /courses",() => { 
    const wrapper = mount(
    <MemoryRouter initialEntries={[`/all-courses`]}> 
     <Route component={RedirectApp} /> 
    </MemoryRouter> 
); 

    expect(wrapper.find(RedirectApp).props().location.pathname).toBe("/courses"); 
}); 

はRouteでRedirectAppを包むことにより、MemoryRouterはRedirectAppにreact-router小道具（match、location、及びhistory）を注入します。

enzymeあなたはこれらのprops()をつかむことができます、とlocation小道具は、リダイレクト後pathnameが含まれるため、リダイレクト先を一致させることができます。

この方法は少しハックですが、リダイレクトがRedirectが存在するだけであること正しい場所に行くとされていないことをテストするという利点があります。

また、export default withRouter(RedirectApp)をRedirectApp.jsにすると、自動的にreact-router小道具を注入できます。