React Enzyme ikinci (veya n'inci) düğümü bulur


130

Jasmine Enzyme sığ işleme ile bir React bileşenini test ediyorum.

Bu sorunun amaçları doğrultusunda burada basitleştirilmiştir ...

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

MyOuterComponent2 örneği var MyInnerComponentve her birinde sahne donanımını test etmek istiyorum.

Nasıl test edileceğini bildiğim ilk kişi. Kullandığım findile first...

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

Ancak, ikinci örneğini test etmek için mücadele ediyorum MyInnerComponent.

Böyle bir şeyin işe yarayacağını umuyordum ...

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

hatta bu ...

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

Ama elbette yukarıdakilerin hiçbiri işe yaramıyor.

Bariz olanı özlediğimi hissediyorum.

Ancak belgelere baktığımda benzer bir örnek görmüyorum.

Kimse?

Yanıtlar:


226

İstediğiniz .at(index)yöntem şu: .at (dizin) .

Öyleyse, örneğiniz için:

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


1
benim için , muhtemelen projenin versiyonuyla ilgili, at()birlikte çalıştı findAll().
Jonatas CD

11

Her birinde belirli şeyleri test edecekseniz , eşleşen sette de yinelemeyi düşünün:

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');
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.