如何模拟react-number-format组件的change事件？遇TypeError报错求助

嘿，这个问题我之前帮好几个开发者排查过，核心原因是你没摸透react-number-format组件的事件处理逻辑！

你直接用simulate('change', event)模拟事件，但是这个组件根本不依赖原生的change事件参数——它的onValueChange回调接收的是一个包含value（格式化后的字符串）和floatValue（数值类型）的对象，不是普通的Event对象。当你传的事件里的value不是字符串（比如数字或者结构不对的东西），组件内部要调用replace方法处理格式化时，自然就会报错，因为replace是字符串专属的方法呀！

给你两个靠谱的解决方案：

方案1：直接调用onValueChange方法（最推荐） #

既然组件的核心逻辑是通过onValueChange处理值变化，咱们没必要绕弯子模拟change事件，直接拿到组件实例调用它的回调就行：

// 假设你用Enzyme做测试
const numberFormatEl = wrapper.find(NumberFormat);
// 传入符合组件要求的参数，value得是格式化后的字符串哦
numberFormatEl.props().onValueChange({
  value: '1 234,56', // 匹配你设置的千分位空格、逗号小数分隔符
  floatValue: 1234.56
});
// 然后断言组件状态是否更新正确
expect(wrapper.state('estimateLineQty')).toEqual('1 234,56');

方案2：模拟正确的change事件参数（非要用simulate的话） #

如果你坚持要用simulate，那得确保传入的事件对象里的target.value是字符串类型，而且符合组件的输入预期：

const mockEvent = {
  target: {
    value: '1234.56' // 传未格式化的数字字符串就行，组件会自动帮你转成带千分位和逗号的格式
  }
};
wrapper.find('#estimateLineQty').simulate('change', mockEvent);
// 验证状态更新是否符合预期
expect(wrapper.state('estimateLineQty')).toEqual('1 234,56');

最后提个醒 #

千万别给target.value传数字类型（比如直接写1234.56），必须是字符串！这就是你现在报错的直接原因。要是你用的是React Testing Library，思路也差不多：找到元素后用fireEvent.change传正确的字符串值，或者直接调用回调函数就行。

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