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 109 · Answer 1 · edited Jan 02 '19 at 18:22

109

.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

432
7
10

answered Dec 14 '17 at 10:04

Artem Kislov

1,101
1
7
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 59 · Accepted Answer · edited Aug 09 '18 at 08:16

59

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

lsl

4,371
3
39
54

answered Sep 17 '17 at 10:13

Andreas Köberle

106,652
57
273
297

29

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
1

@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 20 · Answer 3 · 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.

score 8 · Answer 4 · 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

10,672
5
43
51

answered Jan 28 '19 at 16:16

Snekse

15,474
10
62
77

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

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

5

.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

17,217
6
62
70

1

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 3 · Answer 6 · answered Mar 09 '21 at 15:59

3

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,868
1
23
24

Daniel Felipe Henao Toro · Answer 7 · 2022-08-11T17:44:21.120

If you are using react-testing-library, then this also will work:

expect(component.queryByText("Text I care about").toBeNull());
expect(within(component).queryByText("Text I care about")).toBeNull();

Note: In my case, I needed to use queryBy* because it doesn´t error out when the text element (that contains the text: Text I care about) does not exist. Therefore, I could evaluate whether there is an existence of a text component or not.

score 0 · Answer 8 · answered Mar 23 '23 at 04:18

0

In my case it was rendered then removed later. I needed to wait for it to disappear (because it was hidden by a button):

await waitFor(() => {
  expect(screen.queryByText('some text')).not.toBeInTheDocument()
})

answered Mar 23 '23 at 04:18

Rimian

36,864
16
117
117

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

8 Answers8

Linked