sfletche sfletche - 1 month ago 13
React JSX Question

React Enzyme find second (or nth) node

I'm testing a React component with Jasmine Enzyme shallow rendering.

Simplified here for the purposes of this question...

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


MyOuterComponent
has 2 instances of
MyInnerComponent
and I'd like to test the props on each one.

The first one I know how to test. I use
find
with
first
...

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


However, I'm struggling to test the second instance of
MyInnerComponent
.

I was hoping something like this would work...

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


or even this...

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


But of course neither of the above work.

I feel like I'm missing the obvious.

But when I look through the docs I don't see an analogous example.

Anyone?

tom tom
Answer

What you want is the .at(index) method: http://airbnb.io/enzyme/docs/api/ShallowWrapper/at.html.

So, for your example:

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

Comments