Enzyme: Enzyme 3.1.0 isEmptyRender on empty child returns false

[Brent-T]

Problem

When calling isEmptyRender on a empty child of a shallow render, isEmptyRender will return false, indicating the render of the child is returning something (i.e. not returning null or false).

Following example illustrates the issue:

it('should fail', () => {
  const parent = shallow(<Parent />)

  const child = parent.find('EmptyChild') // ~ MessageBox
  expect(child.isEmptyRender()).toBe(true) // returns false whilst child render returns null
])

Possible solution

Add a warning indicating mount() should be used when trying to test child render behaviour.

[ljharb]

What does Parent look like here?

[Brent-T]

In my specific case the <Parent /> component is a login form with the following structure:

<div>
  <Form>
    <Segment>...</Segment>
    <MessageBox content={error} />
  </Form>
</div>

The EmptyChild from my first comment (updated) is the MessageBox component. The render of this component returns null.

[ljharb]

When shallow-rendering, everything gets a render method that's return this.props.children - in other words, when shallow-rendering Parent, MessageBox is not an empty render.

If you do shallow(<Parent />).find(MessageBox).shallow().isEmptyRender(), then you'd get true.

In other words, when shallow-rendering, the only things you should be making assertions about is "what the top-level renders", and "what props they have" - the responsibility for testing what MessageBox renders is with MessageBox's tests, not Parent's.

[Brent-T]

Right, got it! Thanks for clarifying 👍