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.

InformationsquelleAutor jmarceli | 2016-06-30

20

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):
```
import NavLink from '../index';

import expect from 'expect';
import { shallow } from 'enzyme';
import React from 'react';

describe('<NavLink />', () => {
  it('should add active class', () => {
    const context = { router: { isActive: (a, b) => true } };
    const renderedComponent = shallow(<NavLink to="/home" />, { context });
    expect(renderedComponent.hasClass('active')).toEqual(true);
  });
});
```
Je dois changer mount à shallow afin de ne pas évaluer Link qui me donne une erreur connecté avec le réagissent-routeur TypeError: 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.
- Avis les accolades autour du "contexte" d'être passé dans peu profonde j'ai raté ceux qui ont d'abord et il m'a fallu un certain temps à comprendre pourquoi ça ne fonctionnait pas!
InformationsquelleAutor jmarceli

Pour réagir routeur v4 vous pouvez utiliser un <MemoryRouter>. Exemple avec AVA et de l'Enzyme:

import React from 'react';
import PropTypes from 'prop-types';
import test from 'ava';
import { mount } from 'enzyme';
import sinon from 'sinon';
import { MemoryRouter as Router } from 'react-router-dom';

const mountWithRouter = node => mount(<Router>{node}</Router>);

test('submits form directly', t => {
  const onSubmit = sinon.spy();
  const wrapper = mountWithRouter(<LogInForm onSubmit={onSubmit} />);
  const form = wrapper.find('form');
  form.simulate('submit');

  t.true(onSubmit.calledOnce);
});

Cela fonctionne jusqu'à ce que vous avez besoin de mettre à jour les accessoires de la enveloppé d'un composant. L'appel de setProps() ne fonctionne que sur le composant racine, qui est maintenant la MemoryRouter
Je suppose qu'il est impossible de trouver un moyen universel de test des composants. Cependant, dans l'exemple ci-dessus, il est possible de définir des propriétés en ligne. Comme onSubmit.

InformationsquelleAutor asdf

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:

import React, { PropTypes } from 'react'

export default class WithContext extends React.Component {
  static propTypes = {
    children: PropTypes.any,
    context: PropTypes.object
  }

  validateChildren () {
    if (this.props.children === undefined) {
      throw new Error('No child components were passed into WithContext')
    }
    if (this.props.children.length > 1) {
      throw new Error('You can only pass one child component into WithContext')
    }
  }

  render () {
    class WithContext extends React.Component {
      getChildContext () {
        return this.props.context
      }

      render () {
        return this.props.children
      }
    }

    const context = this.props.context

    WithContext.childContextTypes = {}

    for (let propertyName in context) {
      WithContext.childContextTypes[propertyName] = PropTypes.any
    }

    this.validateChildren()

    return (
      <WithContext context={this.props.context}>
        {this.props.children}
      </WithContext>
    )
  }
}

Ici vous pouvez voir un exemple d'utilisation:

  <WithContext context={{ location: {pathname: '/Michael/Jackson/lives' }}}>
    <MoonwalkComponent />
  </WithContext>

  <WithContext context={{ router: { isActive: true }}}>
    <YourTestComponent />
  </WithContext>

Et il devrait fonctionner comme vous le souhaitez.

InformationsquelleAutor Elod Szopos

3

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
```
describe('my test', () => {
  it('renders', () => {
    const context = createRouterContext()
    const wrapper = shallow(<MyComponent />, { context })
  })
})
```
InformationsquelleAutor katzmopolitan
-1

Vous devez connaître la différence entre mount & shallow .
Le la documentation officielle expliqué le peu profonde Rendre :

Lors de l'écriture de tests unitaires pour Réagir, peu profondes, le rendu peut être utile.
Peu profonde rendu vous permet de rendre un composant "d'un niveau de profondeur" et
affirmer des faits à propos de ce que sa méthode de rendu retourne, sans se soucier de
sur le comportement de l'enfant composants, qui ne sont pas instanciés ou
rendue. Cela ne nécessite pas un DOM.

Alors, sans complexe, ni les contextes :
```
   const renderedComponent = shallow(<NavLink to="/home" />);
```
au lieu de
```
   const renderedComponent = mount(<NavLink to="/home" />, { router: { pathname: '/home' } });
```
Il va fonctionner!

InformationsquelleAutor Abdennour TOUMI

Vous devez vous connecter pour publier un commentaire.