web-dev-qa-db-fra.com

Comment tester react-router avec une enzyme

J'utilise enzyme + moka + chai pour tester mon projet react-redux. Enzyme fournit peu profonde pour tester le comportement des composants. Mais je n'ai pas trouvé de moyen de tester le routeur. J'utilise react-router comme ci-dessous:

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

Je veux tester cette route nurse/authorization se référer à NurseAuthorization composant. Comment le tester dans le projet reactjs?

EDIT1

J'utilise react-router comme infrastructure de routeur. 

reactjsmochareact-routerchaienzyme
17
Zhao Yi

Vous pouvez envelopper votre routeur dans un composant afin de le tester.

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'));

Ensuite, vous devez rendre votre composant Routes peu profond et vous pouvez créer une mappe d’objets pour vérifier la correspondance entre chemin et composant associé.

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

Les chemins d’accès ayant été définis dans un autre fichier pour le routeur dynamique, j’essaie également de vérifier que tous les itinéraires rendus en tant que itinéraires sont définis dans mes constantes 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