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

Question

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

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

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

Answer 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，上述内容将不起作用。这是在 Jest 中使用 Enzyme 的文档页面。