Check if child component rendered - Jest, Enzyme

Question

In my unit test, I want to test whether the parent component is successfully rendering its child component. Here is the code:

describe('Parent Component', () => {
  it('renders Child component', () => {
    const wrapper = shallow(<Parent store={store} />);
    expect(wrapper.find(Child).length).toEqual(1);
  });
});

Parent:

const Parent = observer(({ store }) => {
  const bookList = toJS(store.planets);
  return (
    <div>
      <div className={style.planet_container}>
        {bookList.map(book => {
          return <Child key={book.name} name={book.name} />;
        })}
      </div>
    </div>
  );
});

Above code is taken from here, but it's not working. I am getting the following error:

Expected 1, Received 0'

Where am I going wrong? I am using Enzyme 3.3 with Jest 23.1.0.

Answer 1

You can check whether a parent component has rendered its child component using containsMatchingElement().

Based on Enzyme docs:

Returns whether or not a patternNode react element matches any element in the render tree.

Your test should look like this:

describe('Parent Component', () => {
  it('renders Child component', () => {
    const wrapper = shallow(<Parent store={store} />);
    expect(wrapper.containsMatchingElement(<Child />)).toEqual(true);
  });
});

Answer 2

Enzyme allows finding by a component's displayName:

From Enzyme API documentation:

const wrapper = shallow(<MyComponent />);
expect(wrapper.find('Foo')).to.have.lengthOf(1);

So, in order to test sure the Child component has been rendered you can simply reference it by its displayName.

You can print the wrapper's HTML string: console.log( wrapper.debug() )

---

In case your component is dynamic you can set its displayName to a fixed one, so the test would be more bulletproof:

const MyComponent = props.dynamicChildComponent;
MyComponent.displayName = 'Foo';

Answer 3

Child is not rendering because you are not mocking the props (in this case the prop "store") correctly.

Try this:

it('renders Child component', () => {
  const wrapper = shallow( < Parent / > );
  wrapper.setProps({
    store: {
      planets: [{
          name: "name 1"
        }
      ]
    }
  });
  expect(wrapper.find(Child)).toHaveLength(1);
});

Answer 4

Try this:

describe('Parent Component', () => {
  it('renders Child component', () => {
    const wrapper = shallow(<Parent />);
    expect(wrapper.find(Child)).toHaveLength(1);
  });
});

Answer 5

If you want to check child component elements

 let wrapper1 = mount(<PersonalInfo {...personalInfodata} />);
    expect(wrapper1.find('ChildComponent').children(0).find('.description').text().length).toBeGreaterThan(0);

you can do something like this