web-dev-qa-db-ja.com

酵素で反応ルータをテストする方法

私はreact-reduxプロジェクトをテストするために酵素+モカ+チャイを使用しています。酵素は、コンポーネントの動作をテストするために浅く提供します。しかし、ルーターをテストする方法が見つかりませんでした。私は次のように反応ルータを使用しています：

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

このルートをテストしたいnurse/authorizationはNurseAuthorizationコンポーネントを参照します。 reactjsプロジェクトでテストする方法は？

EDIT1

使っています react-routerルーターフレームワークとして。

reactjsmochareact-routerchaienzyme
20
Zhao Yi

ルータをコンポーネント内にラップして、テストすることができます。

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);
});
16
Freez

ダイナミックルーターの別のファイルでパスを定義していたので、Routesとしてレンダリングするすべてのルートが、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;
});
0
thevangelist