Migrate mocked useNavigate hook that uses jest.requireActual

[florianwittmann]

Regarding this thread (testing-library/react-hooks-testing-library#588), I mocked the useNavigate function the following way in jest:

const mockedUseNavigate = jest.fn();

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useNavigate: () => mockedUseNavigate,
}));

This does not seem to work now in vitest yet - Maybe there is an alternative way to mock the useNavigate hook until requireActual is also working in vitest? I would love to be able to drop jest in favor of vitest already.

[sheremet-va]

We won't support requireActual, please use importActual

[stevenvachon]

importActual is async, though, which forces us to use import() after the hoisted mock().

[arjundangi01]

Here is the solution to mock useNavigate hook for vitest and jest.

IMPORTANT:- Use react-router instead of react-router-dom

Component File

import { useNavigate } from 'react-router';
const navigate = useNavigate();

  const onClick = () => {
  navigate('/setup');
};

<button  data-testid='navigate-buttton'   onClick={onClick} > Click  </button>

Mock --> test.jsx file

1. const mockedUsedNavigate = vi.fn(); // keep the declaration of this on top of file. make it very first variable in the file.

//button.test.jsx 

const mockedUsedNavigate = vi.fn();  //keep it at top of file
 
//Here we are mocking partially means only useNavigate we are mocking and remaining we are required actual.
beforeEach(() => {
    vi.mock('react-router', () => {
      return {
        ...vi.importActual('react-router'),  // for vitest 
        ...jest. requireActual('react-router') // for jest
        useNavigate: () => mockedUsedNavigate,
      };
    });
  });

  describe('...........', () => {
          test('.........'), async()=>{

            render(<App/>)
    
            const button = await findByTestId('navigate-buttton');
            expect(button).toBeTruthy();

           fireEvent.click(button);
           await waitFor(() => expect(mockedUsedNavigate).toBeCalledWith('/path'));

         //if want to check navigate should not happen 
           await waitFor(() => expect(mockedUsedNavigate).not.toBeCalledWith('/another path));
          }
  }
 

Here I'm rendering App if you want to start your test from a specific page where your button is mount you can do that as well by memory-router. Get more details here unit/testing/react