我有一些像“Message failed to send”这样的文本，我想Assert它不会出现在屏幕上。根据this answer，我应该避免在Assert中使用复合逻辑。根据React Testing Library guiding principles，我应该根据用户体验编写测试。所以看起来我应该这样做：
test('it does not display an error', () => {
render(<App />);
expect(screen).not.toDisplayText('failed to send');
});不过，这个匹配器似乎并不存在，我也找不到一个与之等价的匹配器。
- 我可以使用
expect(screen.queryByText('fail')).not.toBeInTheDocument()，如果文本不存在则通过，如果文本不可见则失败。 - 我可以使用
expect(screen.queryByText('fail')).not.toBeVisible()，如果文本不可见则通过，如果文本不存在则失败。
看起来“this text does not exist and I don't care why”应该是一个非常常见的查询，但是我找不到一个干净的方法来测试它。现在我只是根据我期望元素不存在还是不可见来切换我使用的测试，但是感觉不对。有更好的方法吗？
1条答案
按热度按时间daolsyd01#
“不存在”和“不可见”从根本上说是两件不同的事情，这就是为什么你提到的测试匹配器工作方式不同的原因。
在元素上设置样式属性（如
visibility: hidden;和opacity: 0;）意味着该元素仍将占用屏幕空间并显示在DOM树中。另一方面，设置
display: none;（或根本不呈现元素）将防止元素占用任何空间或出现在DOM中。这两种“隐藏”元素或文本的方法都是有效的，取决于你的需求。尽管如此，即使有这样一个自定义匹配器可以覆盖这两种情况，我还是建议不要使用它。这是因为为每种方法使用一个特定的测试匹配器，可以为你未来的自己或你团队中的其他开发人员提供更好的上下文，让他们了解组件是如何工作的，它的预期行为是什么，以及为什么测试可能失败。