React Enzyme find second (or nth) node

Question

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?

score 277 · Accepted Answer · edited Aug 17 '19 at 12:13

277

What you want is the .at(index) method: .at(index) .

So, for your example:

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

edited Aug 17 '19 at 12:13

Edgar

6,022
8
33
66

answered Oct 10 '16 at 20:35

tom

18,953
4
35
35

2

for me it the `at()` worked using with `findAll()`, probably related to the version of the project. – Jonatas CD Nov 25 '19 at 13:47
.at(index) worked for me! Remember that all indexes start with 0. – Evan Erickson Jan 04 '23 at 22:30

Frank N · Answer 2 · 2019-12-18T10:21:02.577

16

If you are to test certain things on each one also consider iterating through the matched set:

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

edited Dec 18 '19 at 10:21

answered May 24 '18 at 18:01

Frank N

9,625
4
80
110

score 3 · Answer 3 · answered Mar 15 '18 at 10:39

3

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

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

answered Mar 15 '18 at 10:39

D V Yogesh

3,337
1
28
39

score 1 · Answer 4 · answered May 26 '21 at 12:22

1

TL;DR;

use findAll along with .at(1)

const innerComponent = component.findAll('MyInnerComponent').at(1);
expect(innerComponent).toHaveProp('title', 'Good-bye');

answered May 26 '21 at 12:22

Taimoor Changaiz

10,250
4
49
53

React Enzyme find second (or nth) node

4 Answers4

Linked