web-dev-qa-db-fra.com

Test du composant réactif enfermé dans le routeur (de préférence en utilisant une plaisanterie / une enzyme)

J'ai un composant React qui est inclus dans le composant d'ordre supérieur avec routeur comme ci-dessous:

module.exports = withRouter(ManageProfilePage);

Mes itinéraires sont les suivants:

<Route path="/" component={AdrApp}>
    <IndexRoute component={Login}/>
    <Route component={CheckLoginStatus}>
        <Route path="manage-profiles/:profileId" component=
        {ManageProfilesPage}/>
     </Route>
    <Route path="*" component={notFoundPage}/>
</Route>

J'ai besoin d'utiliser une fois les méthodes de cycle de vie du routeur, c'est pourquoi j'ai besoin de withRouter:

class ManageProfilePage extends React.Component {
    componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.route, () => {
      ...
    })
    render(){
    ... 
    }
}

J'ai besoin de tester ce composant en utilisant Jest/Enzyme et j'ai écrit le cas de test comme ci-dessous:

describe('manage profile page test suite', () => {


    it('snapshot test', () => {

        const setRouteLeaveHook =jest.fn();

        let wrapper = shallow(
            <ManageProfilePage params={{id : 25, router: 
        setRouteLeaveHook}}/>
        );
      expect(wrapper).toMatchSnapshot();
    })
   })

Le problème est qu'il ne rend pas un niveau plus profond. Je colle l'instantané ci-dessous:

exports[`manage drug term page test suites snapshot test 1`] = `
<ManageProfilePage
  params={
    Object {
      "id": 25,
      "router": [Function],
    }
  }
/>
`;

Existe-t-il une autre manière d'écrire mon scénario de test pour que je puisse restituer ManageProfilePage au moins 1 niveau en profondeur? Il ne peut pas être rendu car il est inclus dans WithRouter? Comment testons-nous ce type de composants?

reactjsunit-testingreact-routerjestjsenzyme
20
Amol Aggarwal

Normalement, si nous essayons de tester de tels composants, nous ne serons pas en mesure de les rendre tels qu'ils sont enveloppés dans WithRouter (WithRouter est un wrapper sur un composant qui fournit des accessoires de routeur tels que la correspondance, la route et l'historique à utiliser directement dans le composant). module.exports = withRouter (ManageProfilePage);

Pour rendre de tels composants, nous devons explicitement lui dire de rendre le composant encapsulé à l'aide du mot clé WrappedComponent. Par exemple. nous utiliserons le code ci-dessous pour le test d'instantané:

describe('manage profile page test suite', () => {


    it('snapshot test', () => {

        const setRouteLeaveHook =jest.fn();

        let wrapper = shallow(
            <ManageProfilePage.WrappedComponent params={{id : 25, router: 
        setRouteLeaveHook}}/>
        );
      expect(wrapper).toMatchSnapshot();
    })
   })

Cela indiquera à l'enzyme de faire un rendu superficiel (le rendu superficiel rend uniquement ce composant particulier et ignore les composants enfants) pour ManageProfilePage qui est un composant encapsulé dans WithRouter.

34
Amol Aggarwal

Le rendu peu profond ne rendra qu'un niveau, cela fait partie des spécifications.

vous pouvez utiliser Mount qui rendra l'arbre entier, mais je ne pense pas que vous puissiez limiter le nombre de niveaux de profondeur qu'il rendra.

Dans tous les cas, lorsque j'utilise des composants de haut niveau, j'exporte généralement aussi le composant de base (avant de l'envelopper), de cette façon, je peux faire tous mes tests sans le wrapper et simplement passer des simulations pour les fournisseurs requis.

même chose avec un composant Connect avec redux, vous exportez votre composant régulier et testez les différents accessoires sur celui-ci, au lieu du connecté.

notez également que certains with... les wrappers n'exposent pas l'instance interne (certains le font, mais d'autres pas), donc les tests sur votre propre composant au lieu du wrapper y sont également utiles.

2
Patrick