升级React Hook Form V7后测试出现TypeError：无法解构register的ref

问题原因 #

React Hook Form V7 中，register 函数调用后会返回包含 ref、name、onChange 等属性的对象，你之前仅用 jest.fn() 模拟 register，它默认返回 undefined，导致解构 ref 时抛出类型错误。

修复方案 #

方案1：模拟符合V7规范的register函数（组件接收register作为props时） #

测试时传入一个能返回正确结构对象的模拟函数：

// 模拟register函数，调用后返回包含ref及必要属性的对象
const mockRegister = jest.fn((fieldName) => ({
  ref: jest.fn(), // 可根据测试需求调整为真实DOM节点或空函数
  name: fieldName,
  onChange: jest.fn(),
  onBlur: jest.fn()
}));

// 渲染组件时传入该mock
render(<YourComponent register={mockRegister} />);

方案2：Mock整个useForm钩子（组件内部调用useForm时） #

直接 mock react-hook-form 库的 useForm 方法，确保返回的 register 符合V7结构：

jest.mock('react-hook-form', () => ({
  useForm: () => ({
    register: jest.fn((fieldName) => ({
      ref: jest.fn(),
      name: fieldName,
      onChange: jest.fn(),
      onBlur: jest.fn()
    })),
    // 若组件用到handleSubmit等其他方法，需在此添加对应模拟
    handleSubmit: jest.fn((callback) => callback)
  })
}));

额外验证 #

可通过断言确认 register 被正确调用：

expect(mockRegister).toHaveBeenCalledWith('test');

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