如何用酶测试反应路由器-Java 学习之路

我正在使用酶摩卡柴来测试我的react-redux项目 . 酶提供浅层测试组分行为 . 但我没有找到测试路由器的方法 . 我正在使用react-router如下：

<Router history={browserHistory}>
     ...
        <Route path="nurse/authorization" component{NurseAuthorization}/>
     ...
  </Route>

我想测试这条路线 nurse/authorization 参考 NurseAuthorization 组件 . 如何在reactjs项目中测试它？

EDIT1

我使用 react-router 作为路由器框架 .

2 回答

您可以将路由器包装在组件中以进行测试 .

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.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);
});

回复于 2024-06-02T13:42:10+08:00

我在动态路由器的另一个文件中定义了我的路径，所以我也测试我作为路由呈现的所有路由都在我的paths.js常量中定义：

it('Routes should only have paths declared in src/routing/paths.js', () => {
  const isDeclaredInPaths = (element, index, array) => {
    return pathsDefined.indexOf(array[index]) >= 0;
  }
  expect(routesDefined.every(isDeclaredInPaths)).to.be.true;
});

回复于 2024-06-02T13:42:10+08:00

如何用酶测试反应路由器

2 回答

相关问题