如何使用Vitest Mock React Router的useSearchParams？

方法一：直接Mock useSearchParams函数 #

在测试文件中直接Mock useSearchParams 函数，自定义其返回值：

import { vi } from 'vitest';
import { useSearchParams } from 'react-router-dom';
import { render, screen } from '@testing-library/react';
import App from './App';

// Mock react-router-dom，保留其他原有导出
vi.mock('react-router-dom', () => ({
  ...vi.importActual('react-router-dom'),
  useSearchParams: vi.fn(),
}));

test('组件正确读取search参数', () => {
  // 构造模拟的URLSearchParams实例
  const mockParams = new URLSearchParams('id=456&status=active');
  // 设置useSearchParams的返回值
  (useSearchParams as vi.Mock).mockReturnValue([mockParams]);

  render(<App />);
  // 根据你的组件逻辑断言内容
  expect(screen.getByText('ID: 456')).toBeInTheDocument();
  expect(screen.getByText('Status: active')).toBeInTheDocument();
});

方法二：使用MemoryRouter模拟路由场景 #

如果不想Mock钩子，可通过MemoryRouter的initialEntries直接传递带search参数的路由地址，模拟真实路由环境：

import { MemoryRouter } from 'react-router-dom';
import { render, screen } from '@testing-library/react';
import App from './App';

test('通过路由传递search参数', () => {
  render(
    <MemoryRouter initialEntries={['/?id=456&status=active']}>
      <App />
    </MemoryRouter>
  );

  expect(screen.getByText('ID: 456')).toBeInTheDocument();
  expect(screen.getByText('Status: active')).toBeInTheDocument();
});

关键注意点 #

• 若使用TypeScript，需对Mock的useSearchParams添加类型断言（如as vi.Mock）以避免类型错误
• 测试后可通过vi.clearAllMocks()清理Mock状态，避免用例间干扰
• 确保已安装@testing-library/react、react-router-dom及vitest相关依赖

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