如何在Testing Library中通过role获取dd、dt等定义列表标签？

问题原因 #

从报错信息能看到，<dt>（对应term角色）和<dd>（对应definition角色）的可访问名称（accessible name）均为空值，所以你用{ name: 'ID' }作为筛选条件时，Testing Library找不到匹配的元素。默认情况下，屏幕阅读器不会自动将<dt>的文本关联为对应<dd>的可访问名称。

解决方案 #

方案1：通过无障碍属性关联（推荐，符合无障碍标准） #

修改HTML，给<dt>添加唯一ID，让<dd>通过aria-labelledby关联该ID，这样<dd>的可访问名称会继承<dt>的文本内容：

<dl>
  <dt id="id-term">ID</dt>
  <dd aria-labelledby="id-term">123456</dd>
</dl>

之后就能用你原本的代码精准定位目标<dd>：

screen.getByRole('definition', { name: 'ID' })

方案2：不修改HTML的情况下定位 #

如果无法调整页面结构，可以先定位到对应的<dt>，再通过父容器范围查找<dd>：

// 先找到文本为"ID"的<dt>元素
const idTerm = screen.getByText('ID');
// 在<dt>的父元素（即<dl>）范围内查找definition角色的元素
const idDefinition = within(idTerm.parentElement).getByRole('definition');

如果页面中有多个<dd>，也可以通过getAllByRole获取所有definition元素，再根据文本内容筛选：

const allDefinitions = screen.getAllByRole('definition');
const targetDefinition = allDefinitions.find(el => el.textContent === '123456');

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