在 Vitest 中从 React-router-dom 模拟 useParams 返回 {} 而不是实际的模拟

Question

我正在开发一个 React 项目，我正在使用

react-router-dom

。出于测试目的，我使用

Vitest

来模拟

useParams

钩子。然而，在模拟

useParams

并添加控制台日志来检查模拟之后，我只得到

{}

而不是实际的模拟值。

这是我的代码和测试的简化版本：

代码（Component.js）：

import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  const params = useParams();
  
  console.log('useParams:', params); // For debugging

  return (
    <div>
      {/* Some JSX code using `id` */}
    </div>
  );
};

export default MyComponent;

测试（Component.test.js）：

import { render } from '@testing-library/react';
import { describe, it, vi } from 'vitest';
import { useParams } from 'react-router-dom';
import MyComponent from './Component';

vi.mock('react-router-dom', () => ({
  ...vi.importActual('react-router-dom'),
  useParams: vi.fn().mockReturnValue({ id: '123' }),
}));

describe('MyComponent', () => {
  it('should use mocked useParams', () => {
    render(<MyComponent />);
    // Expectations or assertions
  });
});

运行测试时，

MyComponent

内的控制台日志输出

{}

，而不是模拟的

{ id: '123' }

。我不确定我错过了什么或做错了什么。

有人遇到过类似的问题或者知道如何在这种情况下使用

useParams

正确模拟

Vitest

吗？

Answer 1

您可能应该只提供一个路由器/路由上下文和一个带有您想要“模拟”测试的参数的路由，而不是尝试模拟代码。

示例：

import { render } from '@testing-library/react';
import { describe, it, vi } from 'vitest';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import MyComponent from './Component';

describe('MyComponent', () => {
  it('should access route with "id" param', () => {
    render(
      <MemoryRouter initialEntries={["/test/123"]}>
        <Routes>
          <Route path="/test/:id" element={<MyComponent />} />
        </Routes>
      </MemoryRouter>
    );
    // Expectations or assertions
  });
});