React Enzyme trouver le deuxième (ou le nième) nœud

Question

Je teste un composant React avec le rendu superficiel Enzyme de Jasmine.

Simplifié ici pour les besoins de cette question...

function MyOuterComponent() {
  return (
    <div>
      ...
      <MyInnerComponent title="Hello" />
      ...
      <MyInnerComponent title="Good-bye" />
      ...
    </div>
  )
}

MyOuterComponent a 2 instances de MyInnerComponent et j'aimerais tester les accessoires sur chacun d'eux.

Le premier que je sais comment tester. J'utilise find con first ...

expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello');

Cependant, j'ai du mal à tester la deuxième instance de MyInnerComponent .

J'espérais que quelque chose comme ça fonctionnerait...

expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye');

ou même ceci...

expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye');

Mais bien sûr, aucune des deux solutions ci-dessus ne fonctionne.

J'ai l'impression de manquer l'évidence.

Mais quand je regarde à travers le docs Je ne vois pas d'exemple analogue.

Quelqu'un ?

Answer 1

Ce que vous voulez, c'est le .at(index) méthode : .at(index) .

Donc, pour votre exemple :

expect(component.find('MyInnerComponent').at(1)).toHaveProp('title', 'Good-bye');

Answer 2

Si vous devez tester certaines choses sur chacun d'eux envisager également d'itérer à travers l'ensemble apparié :

component.find('MyInnerComponent').forEach( (node) => {
    expect(node.prop('title')).toEqual('Good-bye')
})

Answer 3

 const component = wrapper.find('MyInnerComponent').at(1); 
 //at(1) index of element 0 to ~

 expect(component.prop('title')).to.equal('Good-bye');

Answer 4

TL;DR ;

utiliser findAll ainsi que .at(1)

const innerComponent = component.findAll('MyInnerComponent').at(1);
expect(innerComponent).toHaveProp('title', 'Good-bye');