开玩笑 - 如何测试组件是不是不存在？

Posted 2023-02-21

【中文标题】开玩笑 - 如何测试组件是不是不存在？

【英文标题】：Jest - how to test if a component does not exist?开玩笑 - 如何测试组件是否不存在？

【发布时间】：2018-02-25 09:40:27

【问题描述】：

如何检查组件是否不存在，即特定组件是否尚未渲染？

【问题讨论】：

你使用哪个渲染器，酶还是反应测试渲染器？

我正在使用酶。

仅检查该组件中的元素是否在屏幕上是否有效？

哎呀..我的意思是，通过执行以下操作检查元素是否不在屏幕上：expect(component.find('ELEMENT').exists()).toBe(false) ;

【参考方案1】：

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

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

【讨论】：

不错的简洁答案。 react-testing-library 怎么可能做到这一点？

找到了。对于任何有兴趣的人，请参阅下面的答案。

【参考方案2】：

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

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

【讨论】：

在我的情况下，contains 调用总是返回 false。我按照 Periback 的建议使用了expect(component.find('ComponentName').exists()).toBeFalsy();。

@Samuel 您的回答对我有用。我很好奇为什么它需要是“toBeFalsy()”而不是“toBe(false)”。我理解它们之间的概念差异，但是不明白为什么“toBe(false)”在这种情况下不起作用。

@shinyatk 我相信find 和exists 是重要的部分。 toBe(false) 应该可以正常工作。如果你使用jest-enzyme matchers，你也可以直接写expect(component.find('ComponentName')).toExist()

@Samuel 感谢您的及时回复。我会调查jest-enzyme matchers 并尝试toExist() :)

@Samuel 我相信这是因为contains 看起来是“内部”的子组件。如果您正在测试的组件就像渲染另一个组件的包装器一样，您可能无法找到它

【参考方案3】：

如果您使用的是 react-testing-library（我知道 OP 不是，但我通过网络搜索找到了这个问题），那么这将起作用：

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

您可以通过Text、Role 和其他几个人进行查询。请参阅docs 了解更多信息。

注意： queryBy* 将在未找到时返回 null。如果你使用getBy*，那么它会因为找不到元素而出错。

【参考方案4】：

根据the documentation for enzyme-matchers's 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();

【讨论】：

这需要enzyme-matchers 这个库。 github.com/FormidableLabs/enzyme-matchers

@smbl 这是真的。我希望对于大多数项目来说，添加开发依赖项以便于测试不会有太大问题。

【参考方案5】：

.contains 不需要选择器，与 find 不同。可以看一下ShallowWrapper的length属性

expect(wrapper.find('...')).toHaveLength(0)

我发现我需要将此语法与 Enzyme 和 Jest 一起使用来测试渲染输出中是否存在连接组件。

【讨论】：

我认为这可能有点误导。当我们看到带有 length 属性的东西时，我们可能会认为这是 Array 或 smth。 IMO exists 有助于更快地区分这些情况。

【参考方案6】：

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

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

我尝试了所有其他答案，但没有一个可靠。