Mock react-router-dom useParams hook in vitest

Question

I just started to migrate from jest to vitest after migrating my app from cra to vite. I ran ainto an issue where I want to mock useParam hook of react-router-dom

Original code:

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

I tried something like this:

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

But it's not working?

Answer 1

I had the same problem, but this works perfect for me with correct TypeScript types

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

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