Comment se moquer de réagir-routeur contexte
J'ai assez simple réagir composant (Lien wrapper qui ajoute "active" de la classe si la route est active):
import React, { PropTypes } from 'react';
import { Link } from 'react-router';
const NavLink = (props, context) => {
const isActive = context.router.isActive(props.to, true);
const activeClass = isActive ? 'active' : '';
return (
<li className={activeClass}>
<Link {...props}>{props.children}</Link>
</li>
);
}
NavLink.contextTypes = {
router: PropTypes.object,
};
NavLink.propTypes = {
children: PropTypes.node,
to: PropTypes.string,
};
export default NavLink;
Comment suis-je censé le tester? Ma seule tentative a été:
import NavLink from '../index';
import expect from 'expect';
import { mount } from 'enzyme';
import React from 'react';
describe('<NavLink />', () => {
it('should add active class', () => {
const renderedComponent = mount(<NavLink to="/home" />, { router: { pathname: '/home' } });
expect(renderedComponent.hasClass('active')).toEqual(true);
});
});
Il ne fonctionne pas et renvoie TypeError: Cannot read property 'isActive' of undefined
. Il a certainement besoin de quelques routeur moqueur, mais je n'ai aucune idée de comment l'écrire.
Vous devez vous connecter pour publier un commentaire.
Merci @Elon Szopos pour votre réponse mais j'ai réussi à écrire quelque chose de beaucoup plus simple (à la suite de https://github.com/airbnb/enzyme/pull/62):
Je dois changer
mount
àshallow
afin de ne pas évaluerLink
qui me donne une erreur connecté avec le réagissent-routeurTypeError: router.createHref is not a function
.Je préférerais avoir de "vrais" réagissent-routeur plus seulement un objet, mais je n'ai aucune idée de comment le créer.
Pour réagir routeur v4 vous pouvez utiliser un
<MemoryRouter>
. Exemple avec AVA et de l'Enzyme:setProps()
ne fonctionne que sur le composant racine, qui est maintenant laMemoryRouter
onSubmit
.L'essai de composants qui s'appuient sur le contexte peut être un peu délicat. Ce que j'ai fait a été d'écrire un wrapper que j'ai utilisé dans mes tests.
Vous pouvez trouver l'emballage ci-dessous:
Ici vous pouvez voir un exemple d'utilisation:
Et il devrait fonctionner comme vous le souhaitez.
Vous pouvez utiliser https://github.com/pshrmn/react-router-test-context pour que le but exact
"Créer un pseudo objet de contexte qui duplique Réagir Routeur du contexte.routeur de la structure. Ceci est utile pour les tests unitaires avec l'Enzyme."
Après l'installation, vous serez en mesure de faire quelque chose comme
Vous devez connaître la différence entre
mount
&shallow
.Le la documentation officielle expliqué le peu profonde Rendre :
Alors, sans complexe, ni les contextes :
au lieu de
Il va fonctionner!