React Router v4重定向单元测试

小编典典

React Router v4重定向单元测试

reactjs

如何对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);
      });
    });

阅读 293

2020-07-22

共1个答案

小编典典

回答我自己的问题。基本上，我正在对组件进行浅表呈现，并验证是否通过身份验证将呈现重定向组件，否则将呈现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);
  });
});

2020-07-22