node.js - 使用 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 方法的使用上。我从 this SO question 中获取了这个解决方案.我相信我明白它正在尝试通过 wrapper 进行解析以搜索 Route 调用，将每个调用放入哈希表中并使用它来确定正确的组件是否在表应该在的位置，但这不起作用。

我查阅了大量文档、问答和博客文章，试图找到“正确的方法”来测试我的路线，但我觉得我没有任何进展。我的方法是否偏离了基础？

react :15.4.2

react 路由器:3.0.2

enzyme :2.7.1

Node :6.11.0

Answer 1

你不能直接渲染Routes，而是一个带有Router的组件，里面使用了路由。您所指的答案有完整的解决方案。

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

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

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