React-testing-library getByRole查询极慢，如何在不降低测试可信度前提下优化？

已知getByRole查询极端缓慢的常见原因 #

• 全量可访问性树计算开销：getByRole不会直接匹配DOM文本，需要先遍历查询范围内所有节点生成完整可访问性树，逐节点计算语义role、可访问名称（要合并aria-label、aria-labelledby、子元素文本、隐藏文本等多重规则），如果查询范围内存在大量节点（比如未卸载的隐藏组件、全局残留的旧测试用例DOM、UI库默认挂载但隐藏的弹窗/下拉组件），遍历计算开销会指数级上升。
• getAllByRole的全量匹配逻辑：你当前使用的getAllByRole需要遍历所有节点找到全部符合条件的元素后才返回，哪怕第一个匹配项已经找到也不会停止，性能远低于只需要找到第一个匹配项就返回的getByRole。
• 测试环境配置问题：部分版本的jsdom存在可访问性API实现的性能bug，会导致getByRole相关计算耗时异常升高；如果测试用例没有做执行后DOM清理，多次用例运行后全局DOM节点持续累积，也会让后续查询耗时越来越长。
• 名称匹配规则开销：默认的可访问名称匹配会做空格归一化、隐藏文本包含等额外处理，如果没有明确指定匹配精度，也会增加不必要的计算开销。

不损失测试可信度的优化方案 #

• 替换getAllByRole+下标取数的写法：直接使用screen.getByRole('button', { name: 'Accept' })查询第一个符合条件的元素，无需全量遍历所有节点，同时如果存在多个匹配元素会直接抛出错误，反而能提升测试的准确性，完全不损失可访问性测试的可信度。
• 缩小查询范围：不要默认在整个screen全局查询，先定位到被测组件的父容器，再使用within API在容器范围内查询，比如：

  const modal = screen.getByRole('dialog', { name: '操作确认' })
  userEvent.click(within(modal).getByRole('button', { name: 'Accept' }))
  

  可以大幅减少需要遍历的节点数量，同时明确元素的层级归属，提升测试可靠性。
• 明确查询参数减少无效计算：确认目标元素是可见的，就添加hidden: false参数，查询时直接跳过所有不可访问的隐藏元素，无需计算这些节点的role和可访问名称；如果不需要模糊匹配，添加exact: true关闭默认的模糊匹配逻辑。
• 优化测试用例清理：确保每个测试用例执行完成后自动卸载被测组件、清理全局DOM，避免残留节点累积。大部分React测试脚手架默认开启了cleanup逻辑，如果是自定义配置可以手动在每个afterEach钩子中调用cleanup()。
• 修复环境性能问题：升级jsdom、@testing-library/dom到最新稳定版，避免已知的性能bug；如果被测项目用到的UI组件默认会挂载大量隐藏节点，可以配置组件在隐藏时直接卸载（比如AntD的Modal组件的destroyOnClose属性），减少静态DOM节点数量。

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