React酶查找第二個（或第n個）節點

Question

我正在測試React組件與茉莉花酶淺呈現。

這裏簡化了這個問題的目的...

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

MyOuterComponent有MyInnerComponent 2個實例，我想測試的每一個道具。

我知道如何測試的第一個。我用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看，我沒有看到一個類似的例子。

有人嗎？

Answer 1

你想要的是.at(index)方法：http://airbnb.io/enzyme/docs/api/ShallowWrapper/at.html。

所以，你的例子：

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