React Testing Library中toBeInTheDocument()与toBeVisible()有何区别？

这两个是jest-dom为React Testing Library扩展的断言匹配器，判断逻辑和适用场景差异非常明确：

toBeInTheDocument() #

仅判断目标元素是否存在于当前页面的DOM树中，完全不关心元素对用户是否可见。只要元素在HTML结构里能被查询到，无论它被设置了什么隐藏样式，断言都会通过。

toBeVisible() #

判断标准完全对齐普通用户的视觉感知，只有同时满足以下所有条件时断言才会通过：

• 元素自身和所有祖先元素都没有设置display: none
• 元素自身和所有祖先元素都没有设置visibility: hidden
• 元素透明度opacity≥0.01
• 元素没有被HTML原生hidden属性标记
• 元素实际渲染的宽高都大于0
  即使元素被设置了aria-hidden="true"，只要用户肉眼能看到，这个断言依旧会通过。

举个直观的对比例子：

// 假设页面存在元素：<div style="display: none">hello</div>
expect(screen.getByText('hello')).toBeInTheDocument(); // 断言通过
expect(screen.getByText('hello')).toBeVisible(); // 断言失败

什么时候用toBeInTheDocument() #

只需要验证元素是否被正确挂载到DOM，不需要关心用户是否可见的场景：

• 测试屏幕阅读器专用的隐藏语义标签
• 验证默认隐藏的弹窗、抽屉等组件初始化时是否正常预挂载
• 测试懒加载、预渲染逻辑中先挂载后显示的元素

什么时候用toBeVisible() #

需要验证用户确实可以视觉感知到元素的场景，比前者严谨性更高：

• 测试按钮点击后弹出的提示、下拉菜单等交互反馈
• 验证表单提交后的成功/错误提示是否正常展示
• 测试条件渲染的业务内容是否按预期显示给用户

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