在Vitest中Mock react-router-dom的useParams Hook遇问题求助

方法一：修正模块级Mock的写法 #

你的原有Vitest mock代码无法工作，大概率是因为没有正确适配Vitest的mock函数规范，或者模块导出处理细节不到位。可以调整成以下写法：

vi.mock('react-router-dom', async () => {
  // 获取真实模块的所有导出内容
  const actual = await vi.importActual('react-router-dom');
  return {
    // 保留真实模块的所有原有导出
    ...actual,
    // 用Vitest的mock函数覆盖useParams，兼容性更好
    useParams: vi.fn(() => ({ taskId: 123 }))
  };
});

核心差异是用vi.fn()定义mock的useParams，Vitest对自家mock函数的支持更完善，同时确保完整继承了真实模块的其他导出内容。

方法二：使用vi.spyOn单独Mock（更灵活） #

如果不需要mock整个react-router-dom模块，只针对useParams做拦截，这种方式更简单且不易出错：

import * as reactRouterDom from 'react-router-dom';

// 在所有测试用例执行前初始化mock
beforeEach(() => {
  vi.spyOn(reactRouterDom, 'useParams').mockReturnValue({ taskId: 123 });
});

// 测试结束后恢复原有实现，避免影响其他测试用例
afterEach(() => {
  vi.restoreAllMocks();
});

这种方式的优势在于可以在单个测试用例中随时修改返回值，比如某测试需要不同的taskId，直接在该用例里重新调用mockReturnValue即可。

注意事项 #

• 确保vi.mock代码写在组件导入之前（Vitest会自动将vi.mock提升到模块顶部，一般无需手动调整顺序）
• 若使用react-router-dom v6+，确认useParams确实从react-router-dom导出（而非react-router核心库）
• 检查全局测试配置文件（如vitest.setup.js）中是否有其他针对react-router的mock，避免冲突

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