如何检查组件是否不存在,即特定组件是否未被渲染?
lbsnaicq1#
.contains接收一个React节点或节点数组作为参数。相反,使用.find:
.contains
.find
expect(wrapper.find('selector').exists()).toBeTruthy()
vnjpjtjt2#
您可以使用酶contains来检查组件是否被渲染:
contains
expect(component.contains(<ComponentName />)).toBe(false)
nmpmafwu3#
如果你正在使用react-testing-library(我知道OP不是,但我通过网络搜索发现了这个问题),那么这将起作用:
expect(component.queryByText("Text I care about")).not.toBeInTheDocument();
你可以通过Text、Role和其他几个查询。更多信息请参见文档。
Text
Role
注意:queryBy*如果找不到,会返回null。如果使用getBy*,则会因为找不到元素而出错。
queryBy*
null
getBy*
9wbgstp74#
根据enzyme-matchers的toExist文档提供了一个稍微更新的答案。这将需要您安装enzyme-matchers包。
toExist
enzyme-matchers
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();
ia2d9nvy5#
与find不同,.contains不需要选择器。expect(wrapper.find('...')).toHaveLength(0)我发现我需要使用这种语法与酶和Jest测试,如果一个连接组件存在于渲染输出。
expect(wrapper.find('...')).toHaveLength(0)
7nbnzgx96#
我们使用Jest和Enzyme,我发现唯一好的测试是导入子组件并以这种方式进行测试:
expect(component.find(SubComponent).length).toEqual(0); // or (1) for exists, obvs
我尝试了所有其他的答案,没有一个是可靠的。
rkttyhzu7#
如果你正在使用react-testing-library,那么这也可以工作:
expect(component.queryByText("Text I care about").toBeNull()); expect(within(component).queryByText("Text I care about")).toBeNull();
注意:在我的例子中,我需要使用queryBy*,因为当文本元素(包含文本:因此,我可以评估是否存在文本组件。
unguejic8#
在我的例子中,它被渲染,然后被删除。我需要等待它消失(因为它被一个按钮隐藏):
await waitFor(() => { expect(screen.queryByText('some text')).not.toBeInTheDocument() })
8条答案
按热度按时间lbsnaicq1#
.contains
接收一个React节点或节点数组作为参数。相反,使用.find
:vnjpjtjt2#
您可以使用酶
contains
来检查组件是否被渲染:nmpmafwu3#
如果你正在使用react-testing-library(我知道OP不是,但我通过网络搜索发现了这个问题),那么这将起作用:
你可以通过
Text
、Role
和其他几个查询。更多信息请参见文档。注意:
queryBy*
如果找不到,会返回null
。如果使用getBy*
,则会因为找不到元素而出错。9wbgstp74#
根据enzyme-matchers的
toExist
文档提供了一个稍微更新的答案。这将需要您安装enzyme-matchers
包。ia2d9nvy5#
与find不同,
.contains
不需要选择器。expect(wrapper.find('...')).toHaveLength(0)
我发现我需要使用这种语法与酶和Jest测试,如果一个连接组件存在于渲染输出。
7nbnzgx96#
我们使用Jest和Enzyme,我发现唯一好的测试是导入子组件并以这种方式进行测试:
我尝试了所有其他的答案,没有一个是可靠的。
rkttyhzu7#
如果你正在使用react-testing-library,那么这也可以工作:
注意:在我的例子中,我需要使用
queryBy*
,因为当文本元素(包含文本:因此,我可以评估是否存在文本组件。unguejic8#
在我的例子中,它被渲染,然后被删除。我需要等待它消失(因为它被一个按钮隐藏):