React Testing Library按选中状态筛选复选框为何失效？

你遇到的问题本质很明确：当前测试环境里根本没有已勾选的复选框，所以用{ checked: true }筛选自然找不到元素。

从控制台输出能看到，所有复选框的aria-checked都是"false"，这说明它们当前都是未选中状态。你忽略的点大概率是以下两种情况之一：

1. 测试流程缺失：你在查询已勾选复选框之前，没有执行任何勾选操作（比如用fireEvent.click()模拟用户点击切换状态），初始状态下所有复选框都是未选中的，自然查不到符合条件的元素。
2. 组件状态同步异常：你的自定义复选框组件（看起来是用button模拟的）在被勾选后，没有正确把aria-checked属性更新为"true"，导致React Testing Library无法识别它的选中状态。

解决办法 #

1. 补全测试流程，先勾选再查询 #

如果是测试步骤的问题，先在代码里模拟用户点击勾选操作，再执行查询：

// 先获取目标复选框并点击切换为选中状态
const targetCheckbox = wrapper.getByRole('checkbox', { name: 'folderType' });
fireEvent.click(targetCheckbox);

// 现在再查询已勾选的复选框
const checkedCheckboxes = wrapper.getAllByRole('checkbox', { checked: true });

2. 修复组件的aria属性同步逻辑 #

如果是组件本身的问题，检查你的自定义复选框组件，确保选中状态变化时，aria-checked会同步更新为对应的值，而不是只修改data-state或样式：

// 正确的状态同步示例
<button
  role="checkbox"
  aria-checked={isChecked ? "true" : "false"}
  data-state={isChecked ? "checked" : "unchecked"}
  onClick={() => setIsChecked(!isChecked)}
>
  {/* 复选框内容 */}
</button>

3. 手动过滤的备选方案 #

如果暂时不想调整组件或测试流程，也可以先获取所有复选框，再手动过滤出已选中的：

const allCheckboxes = wrapper.getAllByRole('checkbox');
const checkedCheckboxes = allCheckboxes.filter(el => el.getAttribute('aria-checked') === 'true');

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