Jest -如何测试组件是否不存在?

xhv8bpkk  于 2023-03-27  发布在  Jest
关注(0)|答案(8)|浏览(264)

如何检查组件是否不存在,即特定组件是否未被渲染?

lbsnaicq

lbsnaicq1#

.contains接收一个React节点或节点数组作为参数。相反,使用.find

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

vnjpjtjt2#

您可以使用酶contains来检查组件是否被渲染:

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

nmpmafwu3#

如果你正在使用react-testing-library(我知道OP不是,但我通过网络搜索发现了这个问题),那么这将起作用:

expect(component.queryByText("Text I care about")).not.toBeInTheDocument();

你可以通过TextRole和其他几个查询。更多信息请参见文档。

注意:queryBy*如果找不到,会返回null。如果使用getBy*,则会因为找不到元素而出错。

9wbgstp7

9wbgstp74#

根据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();
ia2d9nvy

ia2d9nvy5#

与find不同,.contains不需要选择器。
expect(wrapper.find('...')).toHaveLength(0)
我发现我需要使用这种语法与酶和Jest测试,如果一个连接组件存在于渲染输出。

7nbnzgx9

7nbnzgx96#

我们使用Jest和Enzyme,我发现唯一好的测试是导入子组件并以这种方式进行测试:

expect(component.find(SubComponent).length).toEqual(0); // or (1) for exists, obvs

我尝试了所有其他的答案,没有一个是可靠的。

rkttyhzu

rkttyhzu7#

如果你正在使用react-testing-library,那么这也可以工作:

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

注意:在我的例子中,我需要使用queryBy*,因为当文本元素(包含文本:因此,我可以评估是否存在文本组件。

unguejic

unguejic8#

在我的例子中,它被渲染,然后被删除。我需要等待它消失(因为它被一个按钮隐藏):

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

相关问题