我正在使用酶+摩卡+柴来测试我的react-redux项目。酶提供浅浅以测试组件的行为。但是我没有找到测试路由器的方法。我正在使用如下的react- router:
<Router history={browserHistory}> ... <Route path="nurse/authorization" component{NurseAuthorization}/> ... </Route>
我要测试此路由nurse/authorization参考NurseAuthorization组件。如何在reactjs项目中对其进行测试?
nurse/authorization
NurseAuthorization
编辑1
我正在使用react-router作为路由器框架。
react-router
您可以将路由器包装在组件中以对其进行测试。
Routes.jsx
export default props => ( <Router history={browserHistory}> ... <Route path="nurse/authorization" component{NurseAuthorization}/> ... </Route> )
index.js
import Routes from './Routes.jsx'; ... ReactDOM.render(<Routes />, document.getElementById('root'));
然后,您必须对Routes组件进行浅化渲染,然后才能创建对象映射以检查路径与相关组件之间的对应关系。
Routes
Routes.test.js
import { shallow } from 'enzyme'; import { Route } from 'react-router'; import Routes from './Routes.jsx'; import NurseAuthorization from './NurseAuthorization.jsx'; it('renders correct routes', () => { const wrapper = shallow(<Routes />); const pathMap = wrapper.find(Route).reduce((pathMap, route) => { const routeProps = route.props(); pathMap[routeProps.path] = routeProps.component; return pathMap; }, {}); // { 'nurse/authorization' : NurseAuthorization, ... } expect(pathMap['nurse/authorization']).toBe(NurseAuthorization); });
编辑
如果您还需要处理渲染道具的情况:
const pathMap = wrapper.find(Route).reduce((pathMap, route) => { const routeProps = route.props(); if (routeProps.component) { pathMap[routeProps.path] = routeProps.component; } else if (routeProps.render) { pathMap[routeProps.path] = routeProps.render({}).type; } return pathMap; }, {});
仅在直接渲染要测试的组件(无需额外包装器)的情况下,它才有效。
<Route path="nurse/authorization" render{() => <NurseAuthorization />}/>