React Enzyme znajdź drugi (lub n-ty) węzeł

128

Testuję komponent React z płytkim renderowaniem Jasmine Enzyme.

Uproszczony tutaj do celów tego pytania ...

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

MyOuterComponentma 2 wystąpienia MyInnerComponenti chciałbym przetestować rekwizyty na każdym z nich.

Pierwsza, którą umiem przetestować. Używam findz first...

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

Jednak staram się przetestować drugie wystąpienie MyInnerComponent.

Miałem nadzieję, że coś takiego zadziała ...

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

a nawet to ...

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

Ale oczywiście żadne z powyższych nie działa.

Czuję, że brakuje mi tego, co oczywiste.

Ale kiedy przeglądam dokumenty , nie widzę analogicznego przykładu.

Ktoś?

sfletche
źródło

Odpowiedzi:

225

To, czego chcesz, to .at(index)metoda: .at (indeks) .

Na przykład:

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

Tomek
źródło
1
u mnie to at()działało z findAll(), prawdopodobnie związane z wersją projektu.
Jonatas CD
11

Jeśli chcesz przetestować pewne rzeczy na każdym z nich, rozważ także iterację przez dopasowany zestaw:

component.find('MyInnerComponent').forEach( (node) => {
    expect(node.prop('title')).toEqual('Good-bye')
})
Frank Nocke
źródło
2
 const component = wrapper.find('MyInnerComponent').at(1); 
 //at(1) index of element 0 to ~

 expect(component.prop('title')).to.equal('Good-bye');
DV Yogesh
źródło