jestjs - 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，上面的将不起作用。 Here's使用 Enzyme 和 Jest 的文档页面。