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

我想我明白问题可能是我使用的是酶shallow方法。我从this SO question获得了这个解决方案。我相信我理解它正在尝试解析wrapper以寻找Route调用，将每个调用放入哈希表并使用它来确定表中的正确组件是否应该是，但这不起作用。

我查看过很多文档，问答和博客文章，试图找到正确的方式＆＃34;测试我的路线，但我感觉不到任何地方。我的方法是否偏离基础？

反应：15.4.2

React Router：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路由器

1 个答案: