用Jest和酶测试React Router

Question

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

我有一个route.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

我想我知道问题可能出在我对酶法的使用上shallow。我从这个SO问题中得到了这个解决方案。我相信我了解，它正在尝试通过wrapper搜索来解析Route呼叫，将每个事件放入哈希表，然后使用该哈希表来确定表中正确的组件是否应该存在，但这是行不通的。

我浏览了许多文档，问答和博客，试图找到“正确的方法”来测试我的路线，但我觉得自己无处可寻。我的方法会偏离基础吗？

反应：15.4.2

反应路由器：3.0.2

酶2.7.1

节点：6.11.0

Answer 1

您不能直接 render Routes，但可以使用内部路由的组件Router。您指出的答案有完整的解决方案。

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

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

我告诉你这一点是因为根据我的经验，了解测试什么与学习如何测试同样重要。希望能帮助到你 ：）