Enzim React menemukan node kedua (atau n)

128

Saya menguji komponen React dengan rendering dangkal Jasmine Enzyme.

Disederhanakan di sini untuk tujuan pertanyaan ini ...

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

MyOuterComponentmemiliki 2 contoh MyInnerComponentdan saya ingin menguji props pada masing-masing.

Yang pertama saya tahu cara mengujinya. Saya gunakan finddengan first...

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

Namun, saya kesulitan untuk menguji contoh kedua dari MyInnerComponent.

Saya berharap sesuatu seperti ini akan berhasil ...

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

atau bahkan ini ...

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

Tapi tentu saja tidak satu pun dari yang di atas berhasil.

Saya merasa seperti saya kehilangan yang sudah jelas.

Tetapi ketika saya melihat-lihat dokumen, saya tidak melihat contoh analog.

Siapa saja?

sfletche
sumber

Jawaban:

225

Yang Anda inginkan adalah .at(index)metode: .at (index) .

Jadi, untuk contoh Anda:

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

tom
sumber
1
bagi saya itu at()bekerja dengan menggunakan findAll(), mungkin terkait dengan versi proyek.
Jonatas CD
11

Jika Anda akan menguji hal-hal tertentu pada masing-masing juga pertimbangkan untuk mengulang melalui set yang cocok:

component.find('MyInnerComponent').forEach( (node) => {
    expect(node.prop('title')).toEqual('Good-bye')
})
Frank Nocke
sumber
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
sumber