Jest测试受控React组件：input onChange回调值验证异常原因排查

原因分析 #

这是React合成事件的事件池机制导致的：为了优化性能，React会复用合成事件对象。当事件处理函数执行完成后，React会将事件对象的所有属性重置（包括target上的属性），以便后续事件复用这个对象。

你在handleChange内部能拿到正确值，是因为此时事件处理函数还在执行，事件对象尚未被事件池回收重置；而测试代码中的断言执行时，整个事件处理流程已经结束，事件对象的属性已经被重置回组件初始的value（也就是1）。

@testing-library/react的fireEvent会模拟React的合成事件行为，因此也会遵循这个事件池规则。

解决方法 #

有两种常用方案可以解决这个测试断言问题：

方案1：传递提取后的值而非原始事件对象 #

在组件的事件处理函数中，先提取target.value再传递给父组件的onChange，避免依赖易被重置的事件对象：

export const MyInput = ({ onChange, value }) => {
  const handleChange = (event) => {
    const inputValue = event.target.value;
    console.log(inputValue);
    onChange(inputValue); // 或传递包含value的自定义对象
  };

  return (
    <div>
      <input
        type="text"
        onChange={handleChange}
        label="test-component"
        data-testid="test"
        value={value}
      />
    </div>
  );
};

对应的测试断言可以简化为：

expect(onChangeMock).toHaveBeenCalledWith("23");

方案2：阻止事件对象被重置 #

如果必须传递整个事件对象，可以调用event.persist()将事件对象从事件池中移除，避免被React重置：

export const MyInput = ({ onChange, value }) => {
  const handleChange = (event) => {
    event.persist(); // 阻止事件对象被回收重置
    console.log(event.target.value);
    onChange(event);
  };

  return (
    <div>
      <input
        type="text"
        onChange={handleChange}
        label="test-component"
        data-testid="test"
        value={value}
      />
    </div>
  );
};

此时测试中的原断言就能正常通过。

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