使用Jest和Testing Library测试React表单时Mock函数未被调用

问题原因 #

你代码中存在的核心错误是密码输入框对应的Controller组件name属性配置错误：两个字段的name都被设为了email，导致密码字段没有被正确注册到react-hook-form的表单状态中。
提交表单时，react-hook-form会根据配置校验password字段是否符合必填规则，但实际上表单收集到的字段里根本没有password对应的值，校验失败后自然不会触发你传入的onSubmit回调，这就是mock函数始终没有被调用的原因。

补充：react-hook-form的Controller组件会优先使用自身的name属性作为表单字段的key，哪怕内部input写了name="password"，只要外层Controller的name配置错误，字段还是不会被正确识别。这也符合你提到的「未使用react-hook-form时测试正常，接入后就出问题」的现象。

修复方案 #

只需要修改App.js中密码输入框对应的Controller的name属性，将其从"email"改为"password"即可：

// 修复后的密码字段Controller代码
<Controller
  name="password" // 原代码此处错误写为"email"，修改为password即可
  control={control}
  defaultValue=""
  rules={{
    required: `Password is required.`
  }}
  render={({ field }) => {
    return (
      <input
        placeholder="Password"
        type="text"
        key="password"
        name="password"
        id="password"
        {...field}
      />
    );
  }}
/>

可选优化 #

你测试代码中手动包裹的act不是必须的，@testing-library/react 提供的fireEvent方法已经内置了act逻辑，删除多余的act包裹也不会影响测试结果。

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