在 vitest 中模拟 react-router-dom useParams 钩子

Question

在将我的应用程序从 cra 迁移到 vite 后，我刚刚开始从 jest 迁移到 vitest。我遇到了一个问题，我想模拟react-router-dom的useParam钩子

原始代码：

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
  useParams: () => ({
    taskId: 123,
  }),
}));

我尝试过这样的事情：

vi.mock('react-router-dom', async () => ({
  ...vi.importActual('react-router-dom'), // use actual for all non-hook parts
  useParams: () => ({
    taskId: 123,
  }),
}));

但它不起作用？

Answer 1

我遇到了同样的问题，但这对我来说非常适合正确的 TypeScript 类型

import { Params } from 'react-router-dom';

vi.mock('react-router-dom', () => ({
      useParams: (): Readonly<Params<string>> => ({ taskId: 123 }),
}));

Answer 2

尝试这样的事情：

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

vi.mock('react-router-dom'

vi.mocked(useParams).mockReturnValue({ taskId: 123 })