RTL中getByRole的name选项匹配item无结果问题求助

核心原因 #

• item不是可独立识别的ARIA角色，它必须搭配特定容器角色（比如list、listbox、menu等）才能被浏览器的可访问性API纳入识别范围。
• 你的代码里，role="item"的父元素是role="option"，而option本身是用于listbox/select的子项角色，和item角色不兼容，导致这个item角色不会被收录到可访问性树中，RTL自然查询不到。
• 而role="option"是标准的、可独立被识别的角色，它会自动继承子元素的文本内容作为自己的可访问名称，所以screen.getByRole('option', {name: /apple/i})能正常命中目标元素。

修复方案 #

如果需要使用item角色，要把父容器改成支持它的角色类型：

<div role="list">
  <div role="item">Apple</div>
  <div>...</div>
</div>

如果是做选项类组件，建议统一使用option角色，避免角色混用：

<div role="option">
  Apple
  <div>...</div>
</div>

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