Jest - how to test if a component does not exist?
JestjsEnzymeJestjs 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.