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?

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


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

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

 expect(component.prop('title')).to.equal('Good-bye');
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.