React Enzyme найти второй (или nth) node

Я тестирую компонент 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');

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

Я чувствую, что мне не хватает очевидного.

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

Кто-нибудь?

Ответ 1

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

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

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

Ответ 2

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

component.find('MyInnerComponent').forEach( (node) => {
    expect(node.prop('title')).toEqual('Good-bye')
})

Ответ 3

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

 expect(component.prop('title')).to.equal('Good-bye');