在React+TypeScript中使用Enzyme测试输入组件onChange属性的正确类型写法

错误原因 #

你当前的写法混淆了TypeScript类型和运行时值：

1. ChangeEventHandler<HTMLInputElement>是TS类型，仅在编译阶段做类型校验，不存在于编译后的JS运行时环境中
2. toEqual方法接收的是运行时要匹配的实际值，把TS类型作为值传入会触发语法错误
3. 你不需要精确匹配onChange的函数实例，props校验只需要确认该字段是符合要求的函数即可，函数具体逻辑可以单独写用例验证

额外注意 #

你现有测试代码中describe('<Logn /> with props test', () => {存在拼写错误，应改为<Login />。

解决方案 #

方法1：分开断言属性（更清晰易维护） #

分开校验每个prop，onChange只需要验证是函数类型即可：

it('should have proper props for password field', () =>{
  const passwordInput = container.find('input[type="password"]');
  expect(passwordInput.prop('type')).toBe('password');
  expect(passwordInput.prop('className')).toBe('my-2');
  expect(passwordInput.prop('value')).toBe('testvalue');
  // 验证onChange是函数类型
  expect(passwordInput.prop('onChange')).toBeInstanceOf(Function);
})

方法2：全量匹配时用expect.any指定函数类型 #

如果你坚持要用toEqual全量匹配props对象，把onChange的匹配规则改成expect.any(Function)即可：

it('should have proper props for password field', () =>{
  expect(container.find('input[type="password"]').props()).toEqual({
    type: "password",
    className: "my-2",
    value: "testvalue",
    onChange: expect.any(Function)
  });
})

可选：补充onChange逻辑验证 #

如果需要确认onChange的处理逻辑符合预期，可以单独加用例模拟触发事件：

it('should update password value correctly when input changes', () => {
  // 构造模拟输入事件，注意加TS类型断言
  const mockChangeEvent = {
    target: { value: '  testpass123  ' }
  } as React.ChangeEvent<HTMLInputElement>;
  // 触发输入框的onChange事件
  container.find('input[type="password"]').invoke('onChange')(mockChangeEvent);
  // 验证密码自动trim后更新成功
  expect(container.find('input[type="password"]').prop('value')).toBe('testpass123');
})

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