Comment tester réagir-routeur avec une enzyme

Je suis à l'aide d'enzyme+moka+chai pour tester ma réaction-redux projet. Enzyme fournit profonde test de comportement du composant. Mais je n'ai pas trouver un moyen de tester le routeur. Je suis à l'aide de réagir-routeur comme ci-dessous:

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

Je veux tester cette route nurse/authorization reportez-vous à NurseAuthorization composant. Comment le tester dans reactjs projet?

EDIT1

Je suis en utilisant react-router que le routeur cadre.

OriginalL'auteur Zhao Yi | 2017-01-08

  1. 11

    Vous pouvez envelopper votre routeur à l'intérieur d'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 avez à peu profondes de rendre votre Routes composant, et vous êtes en mesure de créer un objet de la carte pour vérifier la correspondance entre le chemin et le composant.

    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);
});
    J'ai suivi vos instructions, mais a obtenu d'erreur ci-dessous sur la ligne 'const wrapper = superficiel(<Routes />);' - Objet n'est pas un constructeur (évaluation du Volet(publicProps, publicContext, updateQueue)')
    BTW, je suis à l'aide de 'réagir-routeur
    Les Routes doivent être Réagir un composant (voir les Routes.jsx)
    C'est génial! Il a travaillé dans App.js: importer des Itinéraires à partir de "./Les itinéraires" à l'exportation par défaut de la classe d'Application s'étend de la Composante { render() { return ( <> <Navbar/> <div className="page-corps"> <Fournisseur de store={magasin}> <Routes/> </Fournisseur> </div> </> ); } } index.js: importation de Réagir à partir de "réagir"; import ReactDOM de "réagir-dom"; import Application à partir de "./App"; ReactDOM.render( <App />, document.getElementById('root') );

    OriginalL'auteur Freez

  2. 0

    J'ai eu mes chemins définie dans un autre fichier pour la dynamique du routeur, donc je suis également en train de tester que toutes les routes, je me suis rendu que les Routes sont définies dans mon paths.js constantes:

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

    OriginalL'auteur thevangelist