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.

score 82 · Answer 1 · edited May 31 '19 at 10:16

82

ShallowWrapper has a isEmptyRender() function:

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

edited May 31 '19 at 10:16

ndequeker

7,932
7
61
93

answered May 02 '19 at 17:10

Benjamin Intal

2,748
1
25
26

4

Best answer in my eyes. – Hinrich Mar 19 '20 at 14:50
2

@klugjo - this is a better answer than the accepted answer. Can you change the accepted answer? – Tom May 27 '21 at 17:48
2

This answer best communicates the substance of the test while also accurately testing the result. – Matt S Jul 20 '21 at 06:22

score 59 · Accepted Answer · edited Jan 16 '22 at 12:07

59

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

That's it!

or:

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

edited Jan 16 '22 at 12:07

vsync

118,978
58
307
400

answered Nov 13 '17 at 07:32

Abdennour TOUMI

87,526
38
249
254

Maybe it's an artifact of `mount` versus `shallow`, but this did not work for me, I had to look at `comp.html()` as described by @shoaib-nawaz. – shawkinaw Dec 26 '18 at 23:08
3

`expect(comp.get(0)).toBeFalsy()` **worked** for me. `expect(comp.type()).toEqual(null)`did **not**. – Skromak Feb 24 '19 at 19:58

Shoaib Nawaz · Answer 3 · 2018-10-05T19:49:56.987

28

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

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

edited Oct 05 '18 at 19:49

answered Sep 26 '18 at 10:58

Shoaib Nawaz

2,302
4
29
38

2

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Luca Kiebel Sep 26 '18 at 19:26
1

using Chai, `expect(comp.html()).to.eq('')` worked for me – Pants Jul 01 '19 at 13:37
This did not work for me, `comp.html()` returned an empty string in my case. – Hinrich Mar 19 '20 at 14:51

score 9 · Answer 4 · answered Dec 19 '19 at 10:45

9

we use the following with jest-enzyme

expect(comp).toBeEmptyRender()

answered Dec 19 '19 at 10:45

ducci

351
1
4
15

I was using mocha and chai for that particular project, but thats good to know – klugjo Dec 19 '19 at 12:21
I think you're looking for toBeEmptyRender() to be on comp. See answer https://stackoverflow.com/a/55957248/3843358 – Adam Oct 23 '20 at 18:11

score 1 · Answer 5 · answered May 27 '20 at 22:03

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

For me, calling _shallow()_ on not existing child results in "Method “shallow” is meant to be run on 1 node. 0 found instead." _expect(childComponent.isEmptyRender()).toBe(true)_ works perfectly fine. enzyme@^3.11.0 & jest-enzyme@^7.1.2 — Pgarr, Dec 09 '21 at 10:24

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

5 Answers5

Linked