testing-library中使用getByRole获取li下a标签文本元素失败如何解决

• 你尝试查询角色为listitem、名称为Click Me的元素失败，是因为<li class="bar-container">内部包含两个不同的文本内容（Click Me和Address），可访问性名称计算规则无法给这个<li>分配Click Me作为单独的可访问名，报错信息也显示所有listitem角色的元素可访问名都为空。
• 如果你尝试查询link角色找不到，是因为你的<a>标签没有添加href属性，没有href的<a>标签默认不会被识别为link可访问角色。

方案1：查询对应链接元素（最符合可访问性测试规范） #

优先给<a>标签补充符合业务逻辑的href属性，或者主动给<a>标签添加role="link"属性，之后就可以通过以下代码查询：

const clickMeLink = screen.getByRole('link', { name: 'Click Me' });

方案2：需要定位到包含该链接的<li>元素 #

如果你的查询目标是外层的<li>，可以先查到目标链接，再向上查找父级li元素：

// 先查询到目标链接
const clickMeLink = screen.getByRole('link', { name: 'Click Me' });
// 向上匹配最近的li父元素
const targetListItem = clickMeLink.closest('li');

方案3：无需修改HTML的临时方案 #

如果暂时没法修改HTML给<a>标签加href或role属性，可以直接通过文本查询目标元素，不过不符合优先使用getByRole的测试最佳实践：

const clickMeElement = screen.getByText('Click Me');

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