Enzyme模拟checkbox的change事件后checked属性返回false如何解决

1. 补充change事件的参数 #

大部分受控Checkbox组件的选中状态依赖change事件返回的e.target.checked值，你直接调用simulate("change")没有传递事件对象的话，组件无法拿到最新的选中状态，不会触发后续的状态更新。修改simulate调用逻辑，补充事件参数：

wrapper.find(Checkbox).find("input").simulate("change", { target: { checked: true } });

2. 手动触发Wrapper更新 #

Enzyme不会自动响应组件状态更新后的重渲染，在触发change事件、调用setProps之后都需要手动调用update()方法，刷新DOM快照才能拿到最新的属性：

wrapper.setProps({ isCheckbox: true });
wrapper.update(); // setProps后强制更新
// 触发change事件后再次更新
wrapper.find(Checkbox).find("input").simulate("change", { target: { checked: true } });
wrapper.update();

3. 校验Redux Mock逻辑是否正确 #

你代码中mock了useDispatch和useSelector，需要确认两处逻辑：

• 点击Checkbox触发的dispatch action是否被正确监听，对应的状态更新逻辑是否生效
• mock的useSelector需要返回更新后的选中状态，如果状态没有同步到mock的selector中，组件拿到的checked值永远是初始的false

如果Checkbox状态是存在组件内部state而非Redux，可以打印组件state校验更新是否生效：

console.log(wrapper.state())

4. 确认元素选择逻辑正确 #

校验wrapper.find("input")是否命中了目标Checkbox对应的input元素，避免页面存在多个input导致拿错对象，可以通过属性选择器缩小匹配范围：

// 只匹配checkbox类型的input
wrapper.find('input[type="checkbox"]')

如果使用的是Antd等组件库封装的Checkbox，也可以直接断言组件的props，不需要深入查找原生input：

expect(wrapper.find(Checkbox).prop('checked')).toBe(true)

5. 确认Enzyme版本适配 #

如果使用React 16.8+的函数组件+Hooks写法，需要确认Enzyme及对应适配器版本和React版本完全匹配，旧版本适配器对Hook的状态更新捕获存在缺陷，会导致测试无法拿到最新状态。

修改后完整测试代码 #

describe("<RecommendRetailer/>", () => {
  mockUseDispatch();
  mockUseSelector();

  const testProps = {
    message: null,
    isCheckbox: null,
  };
  let wrapper = mount(<RecommendRetailer {...testProps} />);

  it("Checkbox should be disabled when checkbox is clicked", () => {
    wrapper.setProps({ isCheckbox: true });
    wrapper.update();
    wrapper.find(Checkbox).find("input").simulate("change", { target: { checked: true } });
    wrapper.update();
    console.log(wrapper.find("input").debug());
    expect(wrapper.find("input").prop("checked")).toBe(true);
  });
});

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