使用 Jest 和 Enzyme 测试 React Router

Question

我的目标是在我的应用程序中测试我的 React Router Route 导出并测试它是否正在加载正确的组件、页面等。

我有一个 routes.js 文件，如下所示：

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import { App, Home, Create } from 'pages';

export default (
  <Route path="/" component="isAuthenticated(App)">
    <IndexRoute component={Home} />
    <Route path="create" component={Create} />
    {/* ... */}
  </Route>
);

注：isAuthenticated(App)在别处定义，省略。

根据我所阅读和理解的内容，我可以这样测试它：

import React from 'react';
import { shallow } from 'enzyme';
import { Route } from 'react-router';
import { App, Home } from 'pages';
import Routes from './routes';

describe('Routes', () => {
  it('resolves the index route correctly', () => {
    const wrapper = shallow(Routes);
    const pathMap = wrapper.find(Route).reduce((pathMapp, route) => {
      const routeProps = route.props();
      pathMapp[routeProps.path] = routeProps.component;
      return pathMapp;
    }, {});
    expect(pathMap['/']).toBe(Home);
  });
});

但是，运行该测试的结果是：

Invariant Violation: <Route> elements are for router configuration only and should not be rendered

我想我明白问题可能出在我对 Enzyme 的 shallow 方法的使用上。我从中获取了这个解决方案。我相信我明白它正在尝试通过 wrapper 进行解析以搜索 Route 调用，将每个调用放入散列 table 并使用它来确定正确的组件是否在table 它应该在的地方，但这不起作用。

我查看了很多文档、问答和博客文章，试图找到 "the right way" 来测试我的路线，但我觉得我没有任何进展。我的方法是否偏离了基础？

反应：15.4.2

反应路由器：3.0.2

酶：2.7.1

节点：6.11.0

Answer 1

不能直接渲染Routes，而是Router内部使用路由的组件。您所指的答案有完整的解决方案。

您可能还需要更改测试环境下的 browserHistory 以使用可在节点上运行的不同 history。旧的 v3 文档： https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md

作为旁注，测试 Route 的意义何在？我认为它已经在库本身中进行了测试？也许您的测试应该关注您的路由组件：它们是否根据路由参数呈现它们应该呈现的内容？您可以在测试中轻松模拟的那些参数，因为它们只是道具。

我告诉你这些是因为根据我的经验，理解测试什么与学习如何测试一样重要。希望对您有所帮助:)

使用 Jest 和 Enzyme 测试 React Router

Testing React Router with Jest and Enzyme

node.js

reactjs

jestjs

react-router

enzyme