如何在Jest中覆盖react-router-dom的useParams默认mock配置

方案1：修改mock实现为可动态调整的Jest Mock函数 #

首先调整你全局的useParams mock配置，把它改为Jest模拟函数，设置默认返回值满足多数用例需求：

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useParams: jest.fn().mockReturnValue({
    language: 'IT'
  })
}));

注意需要在测试文件顶部从react-router-dom导入useParams，才能调用mock方法

需要覆盖默认值的测试用例中，直接调用模拟函数的mockReturnValueOnce方法设置单次返回值即可：

test('组件在语言为FR时渲染正常', () => {
  // 仅当前用例生效的参数配置
  useParams.mockReturnValueOnce({ language: 'FR' });
  // 后续正常渲染组件、执行断言即可
  render(<YourComponent />);
  // 你的断言逻辑
});

如果需要多个连续用例使用同一个自定义参数，可以用mockReturnValue覆盖全局默认值，测试结束后重置即可：

afterEach(() => {
  // 每次测试后重置mock，避免影响其他用例
  jest.clearAllMocks();
});

方案2（更推荐）：使用MemoryRouter模拟路由参数 #

不需要手动mockuseParams，直接通过React Router提供的MemoryRouter包裹测试组件，传入真实的路由参数，更贴近实际运行场景：

import { MemoryRouter, Routes, Route } from 'react-router-dom';

test('组件在语言为FR时渲染正常', () => {
  render(
    <MemoryRouter initialEntries={['/FR/your-path']}>
      <Routes>
        <Route path="/:language/your-path" element={<YourComponent />} />
      </Routes>
    </MemoryRouter>
  );
  // 你的断言逻辑
});

这种方式不需要维护mock逻辑，测试结果可信度更高。

内容的提问来源于stack exchange，提问作者Arjun K R