如何用React Testing Library与Jest断言文本无可见显示？

针对你需要断言文本（如“Message failed to send”）无论因何原因都不被用户看到的场景，有两种符合React Testing Library（RTL）原则且简洁的实现方式：

方法一：使用queryByRole查询（推荐） #

RTL的*ByRole类查询器默认只返回用户可见的元素，完美贴合“基于用户体验”的测试原则。如果目标文本对应的元素不存在，或存在但不可见，queryByRole都会返回null，此时只需断言该结果不存在于文档中即可覆盖两种场景。

示例代码：

test('it does not display an error', () => {
  render(<App />);
  // 根据实际元素的ARIA role调整，比如错误提示常用alert role
  expect(
    screen.queryByRole('alert', { name: /failed to send/i })
  ).not.toBeInTheDocument();
});

• 注意：name参数支持正则匹配，可灵活匹配目标文本；需根据实际元素的ARIA role（如alert、status等）调整查询的role值。

方法二：封装辅助函数统一处理 #

如果无法通过role查询目标元素，可封装一个辅助函数，统一处理“元素不存在”和“元素存在但不可见”两种情况：

// 辅助函数：断言指定文本不可见（无论元素是否存在）
const expectTextNotVisible = (text) => {
  const element = screen.queryByText(text);
  if (element) {
    expect(element).not.toBeVisible();
  }
};

// 测试用例
test('it does not display an error', () => {
  render(<App />);
  expectTextNotVisible('failed to send');
});

• 该函数会先尝试查找元素：若找到则断言其不可见；若未找到则直接通过，无需额外判断。

为什么原有方法存在局限 #

• expect(screen.queryByText('fail')).not.toBeInTheDocument()：仅检查元素是否存在于DOM，不考虑可见性，若元素存在但被隐藏（如display: none），测试会失败。
• expect(screen.queryByText('fail')).not.toBeVisible()：仅检查元素是否不可见，但元素不存在时queryByText返回null，此时调用toBeVisible匹配器会抛出错误（匹配器仅支持DOM元素）。

内容的提问来源于stack exchange，提问作者Nycki