Trouver le deuxième (ou le nième) noeud Enzyme React

Question

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

Simplifié ici dans le cadre de cette question...

function MyOuterComponent() {
  return (

      ...

      ...

      ...

  )
}

MyOuterComponent a 2 instances de MyInnerComponent et je voudrais tester les props de chacune.

Je sais comment tester la première. J'utilise find avec first...

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

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

J'espérais que quelque chose comme cela fonctionnerait...

expect(component.find('MyInnerComponent').at(1)).toHaveProp('title', 'Au revoir');

ou même cela...

expect(component.find('MyInnerComponent').at(1)).toHaveProp('title', 'Au revoir');

Mais bien sûr, ni l'un ni l'autre ne fonctionnent.

J'ai l'impression de passer à côté de quelque chose d'évident.

Mais lorsque je parcours la documentation, je ne trouve pas d'exemple analogue.

Quelqu'un?

Answer 1

Ce que vous voulez est la méthode .at(index) : .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, envisagez également de parcourir l'ensemble correspondant :

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

Answer 3

const composant = wrapper.find('MonComposantInterieur').at(1); 
 //at(1) index de l'élément 0 à ~

 expect(composant.prop('title')).to.equal('Au revoir');

Answer 4

TL;DR;

utilisez findAll avec .at(1)

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