Reaccionar enzima encontrar segundo (o enésimo) nodo

128

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

MyOuterComponenttiene 2 instancias de MyInnerComponenty me gustaría probar los accesorios en cada una.

El primero que sé probar. Yo uso findcon 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 documentos , no veo un ejemplo análogo.

¿Nadie?

sfletche
fuente

Respuestas:

225

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

Entonces, para su ejemplo:

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

tom
fuente
1
para mí at()funcionó usando findAll(), probablemente relacionado con la versión del proyecto.
CD de Jonatas el
11

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')
})
Frank Nocke
fuente
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
fuente