React中单选按钮测试失败：验证默认选中状态报错

问题根源 #

从你提供的渲染HTML能看到，Apple对应的单选按钮没有checked属性，这就是测试失败的直接原因——测试代码断言它处于选中状态，但实际渲染的元素并未被选中。

解决方案 #

要让测试通过，需确保组件渲染时第一个单选按钮默认处于选中状态，分两种场景处理：

1. 非受控组件场景 #

给Apple的<input>标签添加defaultChecked属性：

<input
  id="apple"
  type="radio"
  name="fruits"
  value="Apple"
  defaultChecked // 添加该属性实现默认选中
/>
<label for="apple">Apple</label>

2. 受控组件场景 #

如果组件通过状态控制单选按钮选中状态，需将初始状态设为Apple：

// 组件内状态定义
const [selectedFruit, setSelectedFruit] = useState("Apple");

// 单选按钮绑定状态
<input
  id="apple"
  type="radio"
  name="fruits"
  value="Apple"
  checked={selectedFruit === "Apple"}
  onChange={(e) => setSelectedFruit(e.target.value)}
/>

测试验证 #

修改组件后重新运行测试，expect(radioOption1).toBeChecked()即可正常通过。若仍有问题，可在测试中添加screen.debug(radioOption1)查看元素实际属性，确认checked状态是否正确。

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