screen.getByRole报无法找到可访问role元素但元素实际存在

screen.getByRole()的匹配目标是元素的ARIA可访问角色，而非HTML标签名，之前的写法完全不符合这个API的匹配规则：

1. 普通<div>属于无语义容器，默认没有隐式ARIA角色，不存在role="div"的定义，哪怕DOM中存在多个div元素，getByRole("div")也匹配不到任何结果。
2. <h1>~<h6>系列标题标签的隐式ARIA角色统一为heading，不是标签名本身的"h5"，直接传"h5"作为参数同样无法匹配。你贴的报错信息里已经明确列出当前页面的可访问角色清单，只有一个heading角色的元素，就是你渲染的h5标题。

按照Testing Library推荐的「模拟用户感知」的查询优先级，对应你的组件场景可以这么写：

• 查询h5标题：

// 匹配层级为5、文本为"Lorem ipsum dolor sit."的标题
const title = screen.getByRole("heading", {
  name: "Lorem ipsum dolor sit.",
  level: 5
});

• 查询普通div元素：
  div属于无语义容器标签，默认没有可访问角色，不要用getByRole查询，根据场景选其他查询方式：
  • 给目标div加data-testid标记，用getByTestId查询：

    // 组件里给Card加标记 <Card data-testid="info-card" sx={{ maxWidth: 300 }}>
    const card = screen.getByTestId("info-card");
    

  • 按元素内的文本内容查询，比如拿正文段落：

    const content = screen.getByText(/Lorem ipsum dolor sit amet consectetur adipisicing elit/i);
    

Testing Library不推荐按HTML标签名、类名这类用户感知不到的属性查询元素，查询优先级永远优先选贴近真实用户使用体验的方式：能按可访问角色查就用getByRole，其次按文本、表单标签、占位符查，实在没办法定位的元素再用testid。

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