Next.js测试报router.prefetch is not a function 无法校验表单提交

1. 修复TypeError: router.prefetch is not a function报错 #

这个报错是因为你对next/router的useRouter mock 不完整，只定义了route和pathname属性，缺少了Next.js路由实例默认携带的prefetch方法，补全mock即可：

// 把原来的useRouter mock改成如下实现
nextRouter.useRouter.mockImplementation(() => ({
  route: '/settings/locations/add',
  pathname: '/settings/locations/add',
  prefetch: jest.fn(), // 补全缺失的prefetch方法
  push: jest.fn(),
  back: jest.fn(),
  // 其他你组件用到的路由方法都可以在这里补全，统一设为mock函数
}));

2. 修复提交函数调用校验失败问题 #

核心原因 #

你测试时传入的addLocationprops没有被组件内部的提交逻辑调用：当前Add组件中handleSubmit绑定的是内部自定义的addLocation方法，该方法仅执行console.log，没有调用props.addLocation，因此你定义的mockAdd永远不会被触发。

修复方案 #

修改Add组件的提交逻辑，调用传入的props方法：

const addLocation = async (data) => {
  console.log(data)
  props.addLocation?.(data) // 新增这行，调用父级传入的提交方法
}

可选优化：测试逻辑优化 #

如果表单验证规则较多，提交后可以配合waitFor等待异步逻辑完成，避免断言提前执行：

// 先从testing-library引入waitFor
import { waitFor } from '@testing-library/react'

// ... 省略其他代码
await act(async () => {
  fireEvent.click(addButton);
})
await waitFor(() => {
  expect(mockAdd).toHaveBeenCalled()
})

同时需要确认company字段是否在表单中通过register注册了对应规则，如果该字段是必填项，你需要保证测试时输入的值满足验证规则，否则表单验证不通过会阻止提交函数触发。

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