Enzyme - Test if a nested component is correctly rendered

Question

I'm trying to test if within my parent component its child component is correctly rendered when the state is updated through a simple boolean value. Below the parent component :

class Parent extends Component {
  ...
  render() {
    const { ..., isReady } = this.state;
    const props = { ... };

    return(
      <div className="container page-content">

        { isReady ?
          <Child {...props} />
          :
          <div id="loader-wrapper">
            <div id="loader"></div>
          </div>
        }

      </div>
    );
  }
}

My test is :

beforeEach(() => {
      wrapper = mount(<Parent isReady={true}/>);
    });

it('Should render Child component', () => {
      expect(wrapper.prop('isReady')).to.equal(true); // Working !!
      expect(wrapper.find(Child).length).to.equal(1); // Not Working -> equal 0
    });

So far I double checked if the state is correctly changed, and it seems to be true when I check the wrapper's state of isReady. I'm pretty sure this part is working fine.

Also I tried wrapper.html() and even if isReady is true, I can see only the div part with my loader. The Child component which should be a <form>..</form> is never rendered. So If I try something like : expect(wrapper.find('form').length).to.equal(1); it's not working neither. I don't get why.

What should be the best practice here to test my parent behaviour and see if my child component inside is correctly rendered ?

update:

1/ I've been through console.log(wrapper), I can see the isReady is definitely true, but the only part rendered is the div with the loader. The nested component Child is never rendered. I have no idea why.. as I'm using mount and the prop/state is correctly set.

2/ From what I can see it's the { isReady ? ... } which is the problem because I'm doing a similar test in another component where I test if a parent component contains a nested component but this time there is no condition and it's working fine.

Answer 1

You should import the component in your test file and pass that instance to the find function rather than a string

import Child from 'path/to/child';
expect(wrapper.find(Child).length).to.equal(1); 

Check this article on how to write the selectors:

Also the result in this condition will still could be false since when you create a mounted instance of your parent you are not setting the isReady state if its already not initialised to true

In order to set the state of the test component use setState

wrapper.setState({ isReady: true });