React Enzyme находит второй (или n-й) узел


128

Я тестирую компонент React с мелким рендерингом Jasmine Enzyme.

Упрощено здесь для целей этого вопроса ...

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

MyOuterComponentимеет 2 экземпляра, MyInnerComponentи я хотел бы протестировать реквизит на каждом из них.

Первый, который я умею тестировать. Использую findс first...

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

Однако я изо всех сил пытаюсь протестировать второй экземпляр MyInnerComponent.

Я надеялся, что что-то подобное сработает ...

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

или даже это ...

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

Но, конечно, ни одно из вышеперечисленных не работает.

Я чувствую, что упускаю очевидное.

Но когда я просматриваю документы, я не вижу аналогичного примера.

Кто угодно?

Ответы:


225

Вам нужен .at(index)метод: .at (index) .

Итак, для вашего примера:

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


1
для меня он at()работал с findAll(), вероятно, связан с версией проекта.
Jonatas CD

11

Если вы хотите протестировать определенные вещи на каждом из них, также рассмотрите возможность итерации по согласованному набору:

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');
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.