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

Je teste un composant React avec un rendu peu profond de Jasmine Enzyme.

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

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

MyOuterComponenta 2 instances de MyInnerComponentet j'aimerais tester les accessoires sur chacun d'eux.

Le premier que je sais tester. J'utilise findavec 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 ça ...

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

Mais bien sûr, aucun des travaux ci-dessus.

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

Mais quand je regarde les documents, je ne vois pas d'exemple analogue.

N'importe qui?

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

Donc, pour votre exemple:

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

Si vous devez tester certaines choses sur chacun d' eux, envisagez également de parcourir l'ensemble correspondant:

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

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

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