我有我的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 的方法来测试我的路线?
任何帮助将非常感激。先感谢您。