React Enzyme encontra o segundo (ou enésimo) nó


128

Estou testando um componente React com renderização superficial Jasmine Enzyme.

Simplificado aqui para os fins desta pergunta ...

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

MyOuterComponenttem 2 instâncias MyInnerComponente eu gostaria de testar os adereços em cada uma.

O primeiro que eu sei testar. Eu uso findcom first...

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

No entanto, estou lutando para testar a segunda instância do MyInnerComponent.

Eu estava esperando que algo assim funcionasse ...

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

ou até isso ...

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

Mas é claro que nenhum dos trabalhos acima.

Sinto que estou perdendo o óbvio.

Mas quando olho os documentos , não vejo um exemplo análogo.

Qualquer um?

Respostas:


225

O que você deseja é o .at(index)método: .at (index) .

Então, para o seu exemplo:

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


1
para mim, at()trabalhou com findAll(), provavelmente relacionado à versão do projeto.
Jonatas CD

11

Se você deseja testar certas coisas em cada uma delas, considere também a iteração no conjunto correspondente:

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');
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.