web-dev-qa-db-fra.com

Démonter/détruire le composant dans le test jsdom

Existe-t-il un moyen de démonter et de ramasser à la poubelle un composant React monté à l'aide de TestUtils.renderIntoDocument dans un test jsdom?

J'essaie de tester quelque chose qui se passe sur componentWillUnmount et TestUtils.renderIntoDocument ne renvoie aucun noeud DOM d'appeler React. unmountComponentAtNode sur.

javascriptreactjsjsdom
20
treznik

Non, mais vous pouvez simplement utiliser ReactDOM.render manuellement:

var container = document.createElement('div');
ReactDOM.render(<Component />, container);
// ...
ReactDOM.unmountComponentAtNode(container);

C'est exactement ce que ReactTestUtils fait de toute façon , il n'y a donc aucune raison de ne pas le faire de cette façon si vous avez besoin d'une référence au conteneur.

27
Sophie Alpert

Appeler directement componentWillUnmount ne fonctionnera pas pour les enfants qui ont besoin de nettoyer les choses lors du démontage. Et vous n'avez pas non plus vraiment besoin de répliquer la méthode renderIntoDocument, car vous pouvez simplement utiliser parentNode:

React.unmountComponentAtNode(React.findDOMNode(component).parentNode);

Mise à jour: à partir de React 15, vous devez utiliser ReactDOM pour obtenir le même résultat:

import ReactDOM from 'react-dom';
// ...
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode);
21
Chris

Juste pour mettre à jour la réponse de @BenAlpert. React.renderComponent sera bientôt obsolète, vous devriez donc utiliser les méthodes ReactDOM à la place:

var container = document.createElement('div');
ReactDOM.render(<Component />, container);
// ...
ReactDOM.unmountComponentAtNode(container);
8
carlesba

Je suis juste tombé par hasard sur cette question. Je proposerais un moyen de la résoudre directement à l'aide de l'API renderIntoDocument décrite. Cette solution fonctionne dans le contexte de PhantomJS.

Pour monter sur le noeud du document:

theComponent = TestUtils.renderIntoDocument(<MyComponent/>);

Pour démonter le noeud du document:

React.unmountComponentAtNode(document);
0
MST

Après votre test, vous pouvez appeler composantWillUnmount () sur le composant manuellement.

beforeEach ->
  @myComponent = React.addons.TestUtils.renderIntoDocument <MyComponent/>

afterEach ->
  @myComponent.componentWillUnmount()
0
Jeff