如何通过React Testing Library利用aria-controls属性获取折叠组件元素？

你可以通过以下步骤，借助aria-controls属性关联的ID来获取对应的折叠内容元素：

1. 获取控制按钮：先通过角色和名称定位到折叠组件的触发按钮

   const toggleButton = screen.getByRole('button', { name: 'collapsible' });
   

2. 提取关联的ID值：从按钮上读取aria-controls属性的内容，这里可以直接用DOM元素的驼峰式属性ariaControls，或者用getAttribute方法

   // 两种方式都可行
   const collapsibleId = toggleButton.ariaControls;
   // 或者
   const collapsibleId = toggleButton.getAttribute('aria-controls');
   

3. 通过ID获取折叠内容：用提取到的ID，调用getByElementId获取对应的div元素

   const collapsibleContent = screen.getByElementId(collapsibleId);
   

另外补充一个优化建议：给折叠内容的div加上role="region"和aria-labelledby关联按钮的ID，既能增强组件的无障碍性（符合屏幕阅读器的识别逻辑），也能让你直接通过角色查询内容：

修改后的JSX示例：

<>
  <button
    id="collapsible-toggle"
    onClick={onClickHandler}
    aria-controls="collapsible"
    aria-expanded={expanded}
    aria-label="collapsible"
  />

  <div
     id="collapsible"
     role="region"
     aria-labelledby="collapsible-toggle"
     aria-hidden={!expanded}
  />
</>

此时测试时可以直接用角色查询：

const collapsibleContent = screen.getByRole('region');

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