我的目标是测试我的阵营路由器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
调用,将每个调入一个哈希表并使用它来确定正确的组件是否在表中它应该是,但这是行不通的。
我已经浏览了很多文档,Q & A和博客文章试图找到“正确的方式”来测试我的路线,但我不觉得我在任何地方。我在我的方法基础?
阵营:15.4.2
阵营路由器:3.0.2
酶:2.7.1
节点:6.11.0