如何使用Jest/Enzyme测试基于react-hook-form Controller API的组件

完全可以使用 Jest + Enzyme 测试使用了 react-hook-form Controller API 的组件，无需强制切换到 Testing Library，你遇到的问题是 Controller 模拟逻辑不正确导致的。

你之前的模拟直接让 Controller 返回空片段，自然不会渲染内部的输入组件。正确的模拟需要让 Controller 接收传入的属性后，调用其中的 render 方法，传入预设的模拟表单状态参数，这样你写在 Controller render 函数内的输入组件就能正常渲染出来。
参考模拟代码如下：

jest.mock('react-hook-form', () => ({
  Controller: (props) => props.render({
    field: {
      onChange: jest.fn(),
      onBlur: jest.fn(),
      value: '',
      name: props.name || ''
    },
    fieldState: {
      invalid: false,
      error: undefined,
      isTouched: false
    },
    formState: {}
  }),
  useForm: () => ({
    control: {},
    handleSubmit: (cb) => () => cb({}),
    formState: { errors: {} }
  }),
}))

你可以根据实际测试场景调整上述模拟值，比如要测试错误提示场景，就把 fieldState.error 设为对应的错误提示文本；要测试输入填充场景，就把 field.value 设为对应的测试值即可。

• 如果你需要模拟用户输入、表单提交等交互，可以把模拟的 onChange、handleSubmit 等方法用变量单独存储，测试时可以直接断言这些函数的调用参数、调用次数是否符合预期
• 如果你的组件依赖 useFormContext，可以在模拟中添加同名方法，返回和 useForm 一致的模拟值即可
• 如果你使用 Enzyme 的 shallow 渲染模式，确认输入组件是否在 shallow 渲染范围内，必要时可以改用 mount 全量渲染组件

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