reactjs - shallow - Reaccionar enzima encontrar segundo(o enésimo) nodo

jest enzyme shallow

Question

Estoy probando un componente React con renderizado superficial de Jasmine Enzyme.

Simplificado aquí para los propósitos de esta pregunta ...

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

MyOuterComponent tiene 2 instancias de MyInnerComponent y me gustaría probar los accesorios en cada una.

El primero que sé probar. Yo uso find con first ...

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

Sin embargo, estoy luchando para probar la segunda instancia de MyInnerComponent .

Esperaba que algo como esto funcionara ...

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

o incluso esto ...

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

Pero, por supuesto, ninguno de los trabajos anteriores.

Siento que me estoy perdiendo lo obvio.

Pero cuando miro a través de los docs , no veo un ejemplo análogo.

¿Nadie?

Answer 1

Lo que quieres es el método .at(index) : .at(index) .

Entonces, para su ejemplo:

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

Answer 2

Si va a probar ciertas cosas en cada uno, también considere iterar a través del conjunto coincidente:

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

Answer 3

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

 expect(component.prop(''title'')).to.equal(''Good-bye'');