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


128

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?

Réponses:


225

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');


1
pour moi, il a at()travaillé avec findAll(), probablement lié à la version du projet.
Jonatas CD

11

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')
})

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

 expect(component.prop('title')).to.equal('Good-bye');
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.