React组件表单提交时preventDefault未定义错误求助

这个错误的根源很明确：你在测试里调用form.simulate('submit')时，没有传递模拟的事件对象给handleSubmit函数。Enzyme的simulate方法不会自动生成并传入事件对象，所以handleSubmit里的e是undefined，调用e.preventDefault()自然就报错了。

这里有两种靠谱的解决方式：

1. 在测试中手动传递模拟的事件对象 #

直接在simulate方法的第二个参数里传入一个包含preventDefault空方法的对象，模拟真实的事件对象结构：

it('dispatches an action when form is submitted', () => {
  const spy = jest.fn();
  const wrapper = shallow(<App dispatch={spy} />);
  const form = wrapper.find('form');
  // 传入模拟的事件对象，包含preventDefault方法
  form.simulate('submit', { preventDefault: () => {} });
  expect(spy).toHaveBeenCalled();
});

这样handleSubmit里就能拿到有效的e，调用preventDefault()就不会报错了。

2. 给组件添加容错处理，让代码更健壮 #

即使在真实业务场景中，也可能存在事件对象未正常传递的极端情况（虽然概率很低），可以在handleSubmit里先判断事件对象是否存在，再调用方法：

handleSubmit(e) {
  // 用可选链操作符简化判断，或者用 if (e) e.preventDefault();
  e?.preventDefault();
  this.props.dispatch();
}

这种方式能让组件在任何情况下都不会因为事件对象缺失而崩溃，同时也能解决测试中的报错问题。

你可以根据需求选择其中一种，或者两种结合使用——既保证测试通过，又让组件代码更健壮。

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