玩笑-如何测试一个组件是否不存在？

如何检查组件是否不存在，也就是说，特定的组件是否没有呈现？

143499 次浏览
小开
最佳答案

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

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

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

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

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

小开

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

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.

小开

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.

小开

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.


提交答案