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

javascript reactjs jestjs enzyme
klugjo picture klugjo · Nov 13, 2017 · Viewed 22.9k times · Source

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

Benjamin Intal picture Benjamin Intal · May 2, 2019

ShallowWrapper has a isEmptyRender() function:

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

Related questions

Simulate a button click in Jest

Simulating a button click seems like a very easy/standard operation. Yet, I can't get it to work in Jest.js tests. This is what I tried (and also doing it using jQuery), but it didn't seem to trigger anything: …

Read More
Jest spyOn function called

I'm trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I should …

Read More
How can I use Jest to spy on a method call?

I recently wanted to test that some custom method gets conditionally called in the componentDidMount method of a React component. componentDidMount() { if (this.props.initOpen) { this.methodName(); } } I'm using Jest as my testing framework, which includes jest.fn() for mocks/…

Read More