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?

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


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

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

 expect(component.prop('title')).to.equal('Good-bye');
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.