Reagieren Enzym finden zweiten (oder n-ten) Knoten

128

Ich teste eine React-Komponente mit flachem Jasmine Enzyme-Rendering.

Hier für die Zwecke dieser Frage vereinfacht ...

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

MyOuterComponenthat 2 Instanzen von MyInnerComponentund ich möchte die Requisiten auf jeder testen.

Der erste, den ich testen kann. Ich benutze findmit first...

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

Ich habe jedoch Probleme, die zweite Instanz von zu testen MyInnerComponent.

Ich hatte gehofft, dass so etwas funktionieren würde ...

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

oder sogar das ...

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

Aber natürlich funktioniert keine der oben genannten Arbeiten.

Ich habe das Gefühl, das Offensichtliche zu vermissen.

Aber wenn ich mir die Dokumente ansehe, sehe ich kein analoges Beispiel.

Jemand?

sfletche
quelle

Antworten:

225

Was Sie wollen, ist die .at(index)Methode: .at (Index) .

Also, für Ihr Beispiel:

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

Tom
quelle
1
Für mich hat es mit at()funktioniert findAll(), wahrscheinlich im Zusammenhang mit der Version des Projekts.
Jonatas CD
11

Wenn Sie bestimmte Dinge an jedem einzelnen testen möchten, sollten Sie auch die übereinstimmende Menge durchlaufen:

component.find('MyInnerComponent').forEach( (node) => {
    expect(node.prop('title')).toEqual('Good-bye')
})
Frank Nocke
quelle
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
quelle