使用浅渲染测试React-Router [英] Testing react-router with Shallow rendering

问题描述

我有我的react-router组件，例如：

I have my react-router component such as :

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

我希望测试路由，以确保为每个路由呈现相应的组件。但是，我不希望使用安装来测试路由，仅希望使用浅渲染。

I wish to test the routing to ensure the respective component is rendered for each route. However, I do not wish to use mount for testing the routing, only wish to use shallow rendering.

下面是我的测试当前的样子：

Below is what my test looks like currently:

  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);
  });

此测试不适用于浅表，因为浅表无法呈现完整的子层次结构。因此，我尝试了另一种方法：

This test does not work with shallow, because shallow won't render the full child hierarchy. So I tried an alternate approach:

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);
});

该测试对我不起作用，因为我在路由代码中使用了render而不是直接在Component中使用如下所示：

This test does not work for me, because I am using render in my routing code instead of Component directly as in below:

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

因此，我无法测试我的路线。如何使用浅层渲染或以上或基本上其他不使用mount的方法测试路线？

Hence, I am unable to test my routes. How do I test my routes using shallow rendering or as above or basically, any other approach that does not use mount?

任何帮助将不胜感激。
预先谢谢您。

Any help would be much appreciated. Thank you in advance.

推荐答案

到目前为止，我可能建议您使用其他方法进行测试：

So far I may suggest you different ways to test that:

1. 模拟 ComponentABC + mount（）

1. Mocking 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（）：

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);

这篇关于使用浅渲染测试React-Router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！