使用浅渲染测试react-router

IT技术 reactjs testing react-router jestjs enzyme
2021-05-16 05:47:36

我有我的react-router组件,例如:

<Switch>
  <Route
    path="/abc"
    render={() => <ComponentTemplateABC component={containerABC} />}
  />
  <Route
    path="/def"
    render={() => <ComponentTemplateDEF component={containerDEF} />}
  />
  ...
  ...
</Switch>

我希望测试路由以确保为每条路由呈现相应的组件。但是,我不想使用mount来测试路由,只想使用浅渲染。

以下是我的测试目前的样子:

  test('abc path should route to containerABC component', () => {
    const wrapper = shallow(
      <Provider store={store}>
        <MemoryRouter initialEntries={['/abc']}>
          <Switch>
            <AppRouter />
          </Switch>
        </MemoryRouter>
      </Provider>,
    );
    jestExpect(wrapper.find(containerABC)).toHaveLength(1);
  });

此测试不适用于浅层,因为浅层不会呈现完整的子层次结构。所以我尝试了另一种方法:

test('abc path should render correct routes and route to containerABC component', () => {
 const wrapper = shallow(<AppRouter />);

 const pathMap = wrapper.find(Route).reduce((pathMap, route) => {
 const routeProps = route.props();
 pathMap[routeProps.path] = routeProps.component;
 return pathMap;
 }, {});

 jestExpect(pathMap['/abc']).toBe(containerABC);
});

这个测试对我不起作用,因为我在我的路由代码中使用渲染而不是直接使用组件,如下所示:

<Route path="..." **render**={() => <Component.. component={container..} />}

因此,我无法测试我的路线。我如何使用浅渲染或如上所述或基本上任何其他不使用 mount 的方法来测试我的路线?

任何帮助将非常感激。先感谢您。

1个回答

到目前为止,我可能会建议您使用不同的方法来测试:

  1. 嘲讽ComponentABC+mount()
import containerABC from '../../containerABC.js';

jest.mock('../../containerABC.js', () => <span id="containerABC" />);
...
  const wrapper = mount(
    <Provider store={store}>
      <MemoryRouter initialEntries={['/abc']}>
        <Switch>
          <AppRouter />
        </Switch>
      </MemoryRouter>
    </Provider>,
  );
  jestExpect(wrapper.find(containerABC)).toHaveLength(1);
  1. shallow()+ dive()+ renderProp()
   const wrapper = shallow(
      <Provider store={store}>
        <MemoryRouter initialEntries={['/abc']}>
          <Switch>
            <AppRouter />
          </Switch>
        </MemoryRouter>
      </Provider>,
    );
    jestExpect(wrapper.find(AppRouter)
      .dive()
      .find(Route)
      .filter({path: '/abc'})
      .renderProp('render', { history: mockedHistory})
      .find(ContainerABC)
    ).toHaveLength(1);