使用Jest/Enzyme测试React中Material UI的Checkbox触发change事件报错如何解决？

• Material UI 的 FormControlLabel 包裹 Checkbox 时，你给 Checkbox 绑定的 data-testid 会被组件内部的多个关联元素继承，包括外层的label标签、内部隐藏的input输入框、复选框图标节点等，导致用 [data-testid="Marketing"] 查找时匹配到多个节点。Enzyme 的 simulate 方法要求必须作用在单个节点上，因此抛出该错误。
• 也存在另一种可能：你的页面中存在多套重复渲染的筛选组件（比如分别适配桌面端和移动端的两套筛选栏），复用了相同的 data-testid 赋值逻辑，导致全局出现多个值为Marketing的测试ID。

你可以选择以下任意一种方案解决问题：

• 查找时限定匹配原生input节点，精准定位可交互的复选框输入源：

wrapper
  .find(`input[data-testid="Marketing"]`)
  .simulate("change", {
    target: { checked: true },
  });

MUI Checkbox的变更事件实际绑定在内部隐藏的原生input元素上，添加标签限定后可以直接过滤掉其他无关的匹配节点。

• 保证测试ID全局唯一：如果页面确实存在多套重复的筛选组件，给不同场景的测试ID加后缀区分，比如将Checkbox的测试ID改为 data-testid={${x.label}-desktop-filter}，测试时直接匹配完整的唯一ID即可。

• 如果你确认要操作第一个匹配到的节点，可以直接调用.first()方法指定操作对象：

wrapper
  .find(`[data-testid="Marketing"]`)
  .first()
  .simulate("change", {
    target: { checked: true },
  });

该方案兼容性强但精准度不足，更推荐优先使用前两种方案保证测试可靠性。

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