React Typescript测试中如何创建符合React.FormEvent<HTMLFormElement>类型的事件

错误原因 #

你触发onSubmit时传入的模拟事件对象只包含了不完整的属性，且存在方法名拼写错误，不符合TypeScript要求的React.FormEvent类型定义，因此触发了类型报错。

注：你的代码里将preventDefault误写为preventDefualt，需要先修正拼写问题。

解决方案 #

这里提供3种常用的处理方式，你可以根据自己的测试场景选择：

方案1：使用类型断言（最简便，适合单测场景） #

如果你不需要在测试中用到事件的其他属性，可以直接用类型断言告诉TypeScript该对象符合FormEvent类型要求：

wrapper.find( 'form' ).prop( 'onSubmit' )({
    preventDefault(){},
} as unknown as React.FormEvent<HTMLFormElement>);

方案2：补全事件必填属性（无断言，类型更安全） #

如果不想使用类型断言，可以补全FormEvent要求的最小属性集：

const mockFormEvent = {
  preventDefault: jest.fn(), // 用Jest mock的话还可以后续断言方法调用情况
  nativeEvent: {},
  currentTarget: document.createElement('form'),
  target: document.createElement('form'),
  bubbles: false,
  cancelable: false,
  isDefaultPrevented: () => false,
  stopPropagation: () => {},
  isPropagationStopped: () => false,
  persist: () => {},
} as React.FormEvent<HTMLFormElement>;

wrapper.find('form').prop('onSubmit')(mockFormEvent);

// 后续可以加断言，比如：
// expect(mockFormEvent.preventDefault).toHaveBeenCalledTimes(1);

方案3：使用Enzyme的simulate方法（更符合Enzyme测试规范） #

你在处理input的change事件时已经用到了simulate方法，submit事件也可以用同样的写法，Enzyme会自动处理事件类型匹配，不需要手动构造完整事件对象：

wrapper.find('form').simulate('submit', {
  preventDefault: () => {}
});

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