使用testing-library测试React组件正确读取渲染react-router路径参数

方案1：使用官方推荐的真实路由上下文测试（无需打桩，更贴近实际运行场景） #

这是最推荐的方案，不需要模拟useParams，直接通过React Router自带的MemoryRouter传递真实的路径参数，完全贴合组件在生产环境的运行逻辑：

import { render, screen } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import { QuestionGrid } from './你的组件路径';

test("renders correct level when level parameter is provided", () => {
  render(
    <MemoryRouter initialEntries={['/question/4']}>
      <Routes>
        {/* 此处路径要和实际路由中配置的QuestionGrid访问路径一致，保留:level参数占位符 */}
        <Route path="/question/:level" element={<QuestionGrid />} />
      </Routes>
    </MemoryRouter>
  );
  expect(screen.getByText('Level 4')).toBeInTheDocument();
});

// 无参数的边界场景测试可对应调整为以下写法
test("page renders in the absence of a 'level' parameter", () => {
  render(
    <MemoryRouter initialEntries={['/question']}>
      <Routes>
        <Route path="/question/:level?" element={<QuestionGrid />} />
      </Routes>
    </MemoryRouter>
  );
  expect(screen.getByText(/Level/)).toBeInTheDocument();
});

方案2：打桩useParams直接返回指定参数 #

如果你确实需要跳过路由逻辑单独测试组件，可以直接模拟useParams的返回值：

import { render, screen } from '@testing-library/react';
import { useParams } from 'react-router-dom';
import { QuestionGrid } from './你的组件路径';

// 先mock整个react-router-dom包
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useParams: jest.fn(),
}));

test("renders correct level when level parameter is provided", () => {
  // 强制useParams返回指定的level值
  (useParams as jest.Mock).mockReturnValue({ level: '4' });
  render(<QuestionGrid />);
  expect(screen.getByText('Level 4')).toBeInTheDocument();
});

注意：方案2的缺点是如果后续修改了路由参数命名、或者组件新增了其他路由相关逻辑，测试不会同步捕获问题，优先选择方案1。

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