Quand faut-il utiliser le rendu et les tests peu profonds dans les tests Enzyme / React?

Avant de poster cette question, j’ai essayé de chercher dans sqa stackexchange, mais je n’ai trouvé aucun article à propos de superficiel et j’y pense, alors j’espère que quelqu’un pourra m’aider ici.

Quand dois-je utiliser des composants peu profonds et rendre les tests? Sur la base des documents airbnb, j’ai exprimé quelques opinions sur la différence des deux:

  1. Étant donné que le test peu profond consiste à tester des composants en tant qu’unité , il convient de l’utiliser pour les composants «parents». (ex. Tableaux, Enveloppes, etc.)

  2. Render est pour les composants enfants.

La raison pour laquelle j’ai posé cette question est que j’ai de la difficulté à déterminer celle que je devrais utiliser (bien que les médecins disent qu’ils sont très similaires)

Alors, comment savoir lequel utiliser dans un scénario spécifique?

Selon les documents de l’enzyme:

mount() pour le rendu DOM complet est idéal pour les cas d’utilisation de composants pouvant interagir avec DOM apis ou nécessiter le cycle de vie complet pour tester complètement le composant (composantDidMount, etc.)

contre.

shallow() pour le rendu Shallow est utile pour vous contraindre à tester un composant en tant qu’unité et pour vous assurer que vos tests n’affirment pas indirectement le comportement des composants enfants.

contre.

render qui est utilisé pour rendre les composants de réaction au code HTML statique et parsingr la structure HTML résultante.

Vous pouvez toujours voir les “nœuds” sous-jacents dans un rendu superficiel, par exemple, vous pouvez faire quelque chose comme cet exemple (légèrement artificiel) en utilisant AVA comme exécuteur de spécifications:

 let wrapper = shallow(); const props = { toggleValue: sinon.spy() }; test('it should render two top level nodes', t => { t.is(wrapper.children().length, 2); }); test('it should safely set all props and still render two nodes', t => { wrapper.setProps({...props}); t.is(wrapper.children().length, 2); }); test('it should call toggleValue when an x class is clicked', t => { wrapper.setProps({...props}); wrapper.find('.x').last().simulate('click'); t.true(props.toggleValue.calledWith(3)); }); 

Notez que le rendu , le paramétrage des accessoires et la recherche de sélecteurs et même les événements synthétiques sont tous pris en charge par un rendu superficiel.

Mais, vous ne pourrez pas obtenir le cycle de vie complet du composant, donc si vous vous attendez à ce que cela se produise dans componentDidMount, vous devez utiliser mount() ;

Ce test utilise Sinon pour espionner le composantDidMount du componentDidMount

 test.only('mount calls componentDidMount', t => { class Test extends Component { constructor (props) { super(props); } componentDidMount() { console.log('componentDidMount!'); } render () { return ( 
); } }; const componentDidMount = sinon.spy(Test.prototype, 'componentDidMount'); const wrapper = mount(); t.true(componentDidMount.calledOnce); componentDidMount.restore(); });

Ce qui précède ne passera pas avec un rendu superficiel ou un rendu

render vous fournira uniquement le HTML, donc vous pouvez toujours faire des choses comme ceci:

 test.only('render works', t => { // insert Test component here... const rendered = render(); const len = rendered.find('div').length; t.is(len, 1); }); 

J’espère que cela t’aides!