为何getByRole无法通过name属性定位元素却可识别aria-label？

核心原因是：getByRole里的name参数匹配的是元素的「可访问名称（Accessible Name）」，而非HTML原生的name属性。

具体细节： #

• HTML的name属性作用是给表单元素标记提交时的参数名，它不会被纳入无障碍名称的计算逻辑，所以即使你给button加了name="day"，Testing Library依然识别不到它的可访问名称，只会把它的名称判定为空（就像你控制台报错里显示的Name ""）。
• 而aria-label是WAI-ARIA规范中专门用来指定元素无障碍名称的属性，它会直接被屏幕阅读器和React Testing Library识别为元素的可访问名称，所以换成aria-label="day"后就能匹配成功。

你的场景下的其他解决方案： #

除了用aria-label，你还可以通过以下方式给按钮设置可访问名称，让getByRole能匹配到：

1. 添加隐藏的文本内容：给按钮内加一个视觉上隐藏但可被无障碍工具识别的文本（比如自定义sr-only类）：

<Button
  classes={myCustomClass}
>
  <ViewDayOutlinedIcon />
  <span className="sr-only">day</span>
</Button>

（sr-only样式示例：position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;）

2. 使用aria-labelledby：如果页面上已有描述该按钮的文本元素，可以通过ID关联：

<p id="dayBtnLabel">查看日期</p>
<Button
  classes={myCustomClass}
  aria-labelledby="dayBtnLabel"
>
  <ViewDayOutlinedIcon />
</Button>

总结 #

React Testing Library的查询逻辑完全贴合无障碍规范，getByRole的name参数只认元素的无障碍名称，而非HTML原生属性。所以要给交互元素设置可被识别的名称，必须使用无障碍相关的属性或文本内容。

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