使用Enzyme测试含useState与reactstrap的React表单时输入值不更新问题排查

我看到你在用Enzyme（v3.11.0）配合react-adapter-react-16测试基于React Hooks（useState）和reactstrap开发的表单组件时，遇到了模拟输入change事件后，断言input值不更新的问题——报错显示实际获取到的是空字符串，而非预期的1。这其实是两个Enzyme测试Hooks组件的常见问题导致的，下面一步步来解决：

问题根源拆解 #

结合你的组件代码和测试代码来看：

1. 事件参数不完整：组件的handleInputChange是通过event.target.name来定位要更新的state字段的，但你模拟change事件时只传了value，没传对应的name属性，导致state根本没有被正确更新。
2. 异步状态更新未被处理：useState的状态更新是异步的，Enzyme不会自动等待异步状态更新完成，就算后续state更新了，组件也没及时渲染，你获取到的还是旧的value值。

修正后的测试代码 #

针对这两个问题，修改测试代码需要注意两个核心点：

• 模拟change事件时，必须传入和组件input一致的name参数
• 用React的act方法包裹事件模拟逻辑，确保异步状态更新完成后，调用wrapper.update()强制组件刷新

完整的修正代码如下：

import React from "react";
import { shallow, mount } from "enzyme";
import { act } from 'react-dom/test-utils'; // 别忘了导入act工具
import UserInput from "./UserInput";

describe("check user input form", () => {
  let wrapper;
  
  // 建议在每个测试用例前重新挂载组件，避免测试间的状态污染
  beforeEach(() => {
    wrapper = mount(<UserInput/>);
  });

  it('should set the number input value on change event', async () => {
    await act(async () => {
      wrapper.find('input[type="number"]').simulate('change', {
        target: {
          name: 'number', // 必须传入与组件input一致的name
          value: 1,
        },
      });
    });
    wrapper.update(); // 强制组件刷新，获取更新后的状态
    expect(wrapper.find('input[type="number"]').prop('value')).toEqual(1);
  });
})

额外测试提示 #

• 尽量在beforeEach钩子中重新挂载组件，避免不同测试用例之间的状态互相干扰
• 测试受控组件时，一定要保证模拟事件的参数和组件逻辑完全匹配（比如这里的name字段是状态更新的关键）
• Enzyme处理React Hooks异步更新时，act+wrapper.update()是常用组合，能确保组件状态更新后再执行断言

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