Jest + Enzyme - 测试组件对用户的可见性答案

【问题标题】：Jest + Enzyme - test for component visibility to the userJest + Enzyme - 测试组件对用户的可见性
【发布时间】：2019-08-18 08:21:03
【问题描述】：

目前我们用它来测试一个组件是否已经渲染：


const someComponent = component.find('[data-test="some-component"]').at(0);
expect(someComponent.length).toBe(1);

这很好，但它实际上并没有测试该组件对用户是否可见 - 它只是测试该组件是否存在。如何测试一个组件既存在又对用户可见？

【问题讨论】：

我不太明白你所说的存在是什么意思，如果一个组件被渲染，它将为用户存在，除非有一个标志隐藏组件，在这种情况下你必须切换在您的测试中标记并查看您的组件是否在它之后呈现

【解决方案1】：

查看https://github.com/testing-library/jest-dom，它为 Jest 提供了各种自定义 DOM 匹配器，包括 toBeVisible()。

有了它，你可以编写这样的测试，它应该可以工作：

const someComponent = component.find('[data-test="some-component"]').at(0);
expect(someComponent.getDOMNode()).toBeVisible();

编辑：虽然 OP 帖子的标题是“Jest + Enzyme”，但我应该澄清 getDomNode() 是一个 Enzyme 函数，所以如果你只使用 Jest，上述方法将不起作用. Here's 使用 Enzyme with Jest 的文档页面。

【讨论】：

TypeError: expect(...).toBeVisible 不是函数
@SimonLong 您是否将@testing-library/jest-dom 导入到您的测试设置文件中？有关说明，请参阅github.com/testing-library/jest-dom#usage。
这里出现 TypeError: .getDOMNode is not a function
@VictorCarvalho 这是一个酶函数 (enzymejs.github.io/enzyme/docs/api/ReactWrapper/getDOMNode.html) - 我的答案假设 Enzyme 已设置，因为最初的问题主题是“Jest + Enzyme”，但我会更新我的答案以明确这一点，对于其他来这里的人！