为何React Testing Library用findByRole能识别禁用按钮却无法匹配其文本？

核心原因 #

问题出在无障碍名称（accessible name）的匹配逻辑上：

• React Testing Library的findByRole查询里的name参数，是基于元素的无障碍名称进行匹配，而非直接匹配可见文本内容。
• 当按钮被禁用时，如果文本是通过嵌套元素（比如<span>包裹）、动态渲染组件（比如加载状态组件）输出，或者组件未正确设置无障碍属性，会导致按钮的无障碍名称和你看到的可见文本不一致，自然匹配失败。
• 而toBeDisabled()断言只检查元素的disabled属性是否存在，只要按钮DOM元素存在且带有该属性，就能通过，和文本、无障碍名称无关。

解决方案 #

1. 检查无障碍名称
   打开浏览器开发者工具的「无障碍」面板，查看目标按钮的「Name」字段，确认是否和你要匹配的Generating Configurations一致。如果不一致，调整组件：

   • 确保文本直接作为按钮的子元素，不要嵌套过多无关元素；
   • 若必须用嵌套元素，可通过aria-labelledby关联文本元素，或直接给按钮设置aria-label="Generating Configurations"。

2. 换用文本匹配断言
   不需要依赖无障碍名称的话，可以先找到按钮，再断言文本内容：

   const button = await screen.findByRole('button');
   expect(button).toBeDisabled();
   expect(button).toHaveTextContent('Generating Configurations');
   

3. 直接用文本查询按钮
   如果按钮文本是唯一的，也可以跳过findByRole，直接用文本定位：

   const button = screen.getByText('Generating Configurations');
   expect(button).toBeDisabled();
   

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