如何对React Router v4中的组件进行单元测试?我尝试使用笑话和酶进行重定向的单元测试一个简单的组件失败。
我的组件:
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); }); });
回答我自己的问题。基本上,我正在对组件进行浅表呈现,并验证是否通过身份验证将呈现重定向组件,否则将呈现App组件。这里的代码:
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); }); });