模拟react-router-dom中的useParams钩子

Question

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

原始代码:

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

有一个关于模拟模块部分的备忘单示例。

vi.mock('react-router-dom', async () => {
const mod = await vi.importActual('react-router-dom');
return {
...mod,
useParams: () => ({
taskId: 123,
}),
};
});

Answer 3

您可以使用文档中提到的react-router-dom模拟创建一个__mocks__文件夹:https://vitest.dev/api/vi.html#vi-mock。然后像这样进行嘲弄:

__mocks__/react-router-dom.ts:

import { vi } from 'vitest';
export * from 'react-router-dom';
export const useParams = vi.fn();
// .. add more mocks if needed

然后在你的*.test.tsx

import { useParams } from 'react-router-dom';
vi.mock('react-router-dom')
test("it mocks useParams()", () => {
vi.mocked(useParams).mockReturnValue({ taskId: "123" });
//...implement the tests
expect(useParams).toHaveBeenCalled()
})

Answer 4

您也可以尝试这样做:

vi.mock('react-router-dom', async () => {
return {
...vi.importMock('react-router-dom'),
useHistory: vi.fn(),
useParams: vi.fn(),
useLocation: () => ({
search: '',
pathname: '/',
}),
matchPath: vi.fn(),
withRouter: vi.fn(),
useRouteMatch: vi.fn(),
Link: ({ children, to }: { children: JSX.Element; to: string }) =>
React.createElement('a', { href: to }, children),
Router: () => vi.fn(),
HashRouter: () => vi.fn(),
Switch: () => vi.fn(),
};
});

我认为它失败的原因是因为测试代码导入了真正的react-router-dom，并且调用了vi.mock，这反过来又模拟了react-router-dom。

模拟应该在运行实际测试之前进行。

Answer 5

试试这样做:

import { useParams } from 'react-router-dom'
vi.mock('react-router-dom'
vi.mocked(useParams).mockReturnValue({ taskId: 123 })

Answer 6

升级到react-router-dom 6解决了我以前使用vitest的所有嘲弄问题。

从v5迁移到v6应该很简单。