Enzyme: Can't not find component if it is passed down as a property in shallow rendering

[neekey]

The user case is like bellow:

I have a simple Toolbar Component, it just provides some style customization for the passed element list by tools

export default function Toolbar(props) {
  return <div>{props.tools}</div>;
}

Toolbar.propTypes = {
  tools: React.PropTypes.array,
};

And I got another component using Toolbar:

import React from 'react';
import Toolbar from './toolbar';
import SelectField from './selectField';

export default class MyList extends React.Component {
  getTools() {
    return [
      (<SelectField key="a" data-ref="a">...</SelectField>),
      (<SelectField key="b" data-ref="b">...</SelectField>),
      (<SelectField key="c" data-ref="c">...</SelectField>),
      (<SelectField key="d" data-ref="d">...</SelectField>),
    ];
  }

  render() {
    return (
      <div>
        <Toolbar tools={this.getTools()} />
        ....
      </div>);
  }
}

And now I want to test <MyList />:

import SelectField from './selectField';

const wrapper = shallow(<MyList />);
const selelctA = wrapper.find({ 'data-ref': 'a' });
const SelectList = wrapper.find(SelectField);
expect(selectA.length).to.equal(1); // will fail, result is 0
expect(SelectList.length).to.equal(4); // will fail anyway, result is 0

[ljharb]

Since you're shallow rendering, wrapper only has a div and a Toolbar in it. You have to .find(Toolbar).shallow() in order to see what's inside Toolbar.

[neekey]

@ljharb it works!!! Thank you so much! This problem has bothered me for months!