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

JestjsEnzyme

Jestjs Problem Overview


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

Jestjs Solutions


Solution 1 - Jestjs

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

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

Solution 2 - Jestjs

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

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

Solution 3 - Jestjs

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.

Solution 4 - Jestjs

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();

Solution 5 - Jestjs

.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.

Solution 6 - Jestjs

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJoeTideeView Question on Stackoverflow
Solution 1 - JestjsArtem KislovView Answer on Stackoverflow
Solution 2 - JestjsAndreas KöberleView Answer on Stackoverflow
Solution 3 - JestjsBrady DowlingView Answer on Stackoverflow
Solution 4 - JestjsSnekseView Answer on Stackoverflow
Solution 5 - JestjsMark SwardstromView Answer on Stackoverflow
Solution 6 - JestjseonView Answer on Stackoverflow