Jest - how to test if a component does not exist?

Question

How do I check if a component is not present, i.e. that a specific component has not been rendered?

Which renderer do you use, enzyme or the react test renderer? — Andreas Köberle, Sep 16 '17 at 12:37
Isn't it valid just check if an element from this component is on the screen? — sergioviniciuss, Sep 16 '17 at 18:53
Oops.. I mean, check if the element is NOT on the screen, by doing something like this: expect(component.find('ELEMENT').exists()).toBe(false); — sergioviniciuss, Sep 16 '17 at 19:29

score 81 · Answer 1 · edited Jan 02 '19 at 18:22

81

.contains receives a React Node or array of Nodes as an argument. Instead, use .find:

expect(wrapper.find('selector').exists()).toBeTruthy()

edited Jan 02 '19 at 18:22

AdamJB

346
3
10

answered Dec 14 '17 at 10:04

Artem Kislov

821
5
3

Nice succinct answer. How is this possible with react-testing-library? – Brady Dowling Dec 29 '20 at 17:48
Found it. For anyone interested, see my answer below. – Brady Dowling Dec 29 '20 at 18:54

score 48 · Accepted Answer · edited Aug 09 '18 at 08:16

48

You can use enzymes contains to check if the component was rendered:

expect(component.contains(<ComponentName />)).toBe(false)

edited Aug 09 '18 at 08:16

Louis

4,007
3
36
52

answered Sep 17 '17 at 10:13

Andreas Köberle

88,409
51
246
277

23

The `contains` call always returns `false` in my case. I used `expect(component.find('ComponentName').exists()).toBeFalsy();` instead as suggested by Periback. – Samuel Dec 12 '17 at 11:21
@Samuel Your answer works for me. I'm curious why it needs to be "toBeFalsy()" not "toBe(false)". I understand the concept difference between those, however cannot understand why "toBe(false)" is not working in this case. – shinyatk May 27 '19 at 01:07
3

@shinyatk I believe the `find` and `exists` are the important parts. `toBe(false)` should work just fine. If you use [jest-enzyme matchers](https://github.com/FormidableLabs/enzyme-matchers/tree/master/packages/jest-enzyme#tocontainmatchingelement), you can also just write `expect(component.find('ComponentName')).toExist()` – Samuel May 28 '19 at 06:56
@Samuel Thank you for the prompt response. I will look into [jest-enzyme matchers](https://github.com/FormidableLabs/enzyme-matchers/tree/master/packages/jest-enzyme#tocontainmatchingelement) and try with `toExist()` as well :) – shinyatk May 28 '19 at 07:05
@Samuel I believe this is becaus `contains` looks "inside" for the child components. If the component you're testing acts just like a wrapper that renders another component, you might not be able to find it – foxy Feb 27 '20 at 17:33
What if there are multiple components with same name? Like a list of items that is rendered by mapping an array? – K4R1 Mar 02 '20 at 22:07

score 8 · Answer 3 · edited Feb 21 '20 at 21:18

8

Providing a slightly updated answer based on the documentation for enzyme-matchers's toExist. This will require you to install the enzyme-matchers package.

function Fixture() {
  return (
    <div>
      <span className="foo" />
      <span className="bar baz" />
    </div>
  );
}

const wrapper = mount(<Fixture />); // mount/render/shallow when applicable

expect(wrapper.find('span')).toExist();
expect(wrapper.find('ul')).not.toExist();

edited Feb 21 '20 at 21:18

kylieCatt

9,293
4
39
50

answered Jan 28 '19 at 16:16

Snekse

14,360
10
53
73

4

This requires `enzyme-matchers` this library. https://github.com/FormidableLabs/enzyme-matchers – smbl Mar 15 '19 at 20:04
@smbl This is true. I would hope for most projects, adding a dev dependency for easier testing isn't going to be too much of a problem. – Snekse Mar 19 '19 at 16:17

score 6 · Answer 4 · answered Dec 29 '20 at 18:54

If you're using react-testing-library (I know the OP wasn't but I found this question via web search) then this will work:

expect(component.queryByText("Text I care about")).not.toBeInTheDocument();

You can query by Text, Role, and several others. See docs for more info.

Note: queryBy* will return null if it is not found. If you use getBy* then it will error out for elements not found.

Mark Swardstrom · Answer 5 · 2018-10-17T18:20:11.283

4

.contains does not expect a selector, unlike find. You can look at the length attribute of the ShallowWrapper

expect(wrapper.find('...')).toHaveLength(0)

I found I needed to use this syntax with Enzyme and Jest to test if a Connected Component existed in the rendered output.

edited Oct 17 '18 at 18:20

answered Jun 23 '18 at 13:15

Mark Swardstrom

15,663
5
57
62

I think this might be a bit misleading. When we see something with `length` property, we might expect this to be Array or smth. IMO `exists` helps to distinguish these cases more swiftly. – Vladislav Kovechenkov Dec 04 '19 at 12:00

score 0 · Answer 6 · answered Mar 09 '21 at 15:59

0

We use Jest and Enzyme, and I've found the only good test is to import the sub-component and test this way:

expect(component.find(SubComponent).length).toEqual(0); // or (1) for exists, obvs

I tried all the other answers and none worked reliably.

answered Mar 09 '21 at 15:59

eon

1,528
1
18
22

Jest - how to test if a component does not exist?

6 Answers6

Linked