React Testing Library测试复选框点击选中状态失败的解决方法

测试报错的核心原因是元素查询方式错误：你用screen.getByLabelText('second')查找元素，但实际第二个复选框的aria-label是"checkbox"，而非"second"，导致查询到的元素不是目标复选框（甚至可能未找到有效元素），进而触发toBeChecked()的使用限制报错。

1. 修正元素查询逻辑 #

根据现有HTML结构，可通过以下几种正确方式获取第二个复选框：

• 通过value属性查询（推荐，符合元素特征）：

  const secondOption = screen.getByValue('second');
  

• 通过role+筛选条件查询（更贴近用户交互视角）：

  const secondOption = screen.getByRole('checkbox', { name: 'checkbox', value: 'second' });
  

• 通过id查询：

  const secondOption = screen.getByElementById('second');
  

2. 修复后的完整测试代码 #

it('should select second option when clicked', () => {
  const secondOption = screen.getByValue('second');
  expect(secondOption).toBeInTheDocument();
  expect(secondOption).not.toBeChecked();
  
  fireEvent.click(secondOption); 

  expect(secondOption).toBeChecked();
});

补充说明 #

• 关于toHaveValue()未被识别：因为之前查询到的不是有效输入元素，修正查询后，若需要验证值，toHaveValue('second')即可正常使用。
• 若后续想通过标签文本查询，需修改组件，给第二个复选框设置正确的aria-label="second"或绑定对应的<label for="second">second</label>标签。

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