Jest Enzyme test a React component that returns null in render method

Question

I have a component that returns null in render under certain conditions:

render() {
  if (this.props.isHidden) {
      return null;
  }

  return <div>test</div>;
}

I want to check if the component is null when isHidden is true with jest and enzyme:

describe('myComp', () => {
    it('should not render if isHidden is true', () => {
        const comp = shallow(<myComp isHidden={true} />);
        expect(comp.children().length).toBe(0);
    });
});

This works but is there a more idiomatic way to write this test ? Testing for components that render as null is quite a common scenario.

Answer 1

   expect(comp.type()).toEqual(null)

That's it!

or: expect(comp.get(0)).toBeFalsy()

Answer 2

ShallowWrapper has a isEmptyRender() function:

expect(comp.isEmptyRender()).toBe(true)

Answer 3

According to ShallowWrapper::html implementation it returns null if component instance type is null, as a result of render.

expect(comp.html()).toBeNull();

Answer 4

we use the following with jest-enzyme

expect(comp).toBeEmptyRender()

Answer 5

As mentioned in Benjamin Intal's solution, I tried to use myComponent.isEmptyRender(), but it was unexpectedly returning false, even though myComponent.children().length was returning 0.

The problem turned out to be that myComponent was coming from a call to .find() on another shallow-rendered component. In this situation, an extra call to .shallow() on the found child component is necessary to get isEmptyRender() to work properly:

const parentComponent = shallow(<MyParentComponent isMyChildHidden={true} />);
const childComponent = parentComponent.find('MyChildComponent');

expect(childComponent.shallow().isEmptyRender()).toBe(true);

Reference: https://github.com/enzymejs/enzyme/issues/1278