我正在努力寻找一个通用解决方案，以便在Next.js中用Vitest对导航进行模拟。

next-router-mock 提到“在Next.js v13、v12、v11和 v10上进行了测试。”因此我不确定是否能在Next 14中使用它。此外，README中并未提及Vitest。

我找到的唯一可行解决方案是：

vi.mock('next/navigation', async () => {
  const actual = await vi.importActual('@/__mocks__/next/navigation')
  return {
    ...actual,
    useRouter: () => ({
      push: vi.fn(),
      replace: vi.fn(),
      refresh: vi.fn(),
      back: vi.fn(),
      prefetch: vi.fn()
    }),
    useParams: () => ({ book_id: '123 })
  }
})

但这需要在所有测试文件中进行。如果我尝试在 test.setup.ts 全局处理，并将其用作 vi.mocked(useParams).mockReturnValue({ id: book_id })，就会失败，出现 vi.mocked(...).mockReturnValue is not a function。

解决方案

在 alias 在 vitest.config.ts 中使用，而不是 vi.mock()

alias: {
  'next/navigation': '/your-project/__mocks__/next/navigation.ts',
}

所以基本上，这将使 next/navigation 直接解析到你的模拟文件（该文件导出 vi.fn() 实例），因此 vi.mocked() 在任何地方都能工作，而无需在每个测试文件中重复 vi.mock()。