Mocking imported modules correctly with Vitest and React

[swinogrodzki]

The documentation might be a bit insufficient, so I think if you answer my question, it would help the others for the future reference.

Please refer to https://vitest.dev/guide/mocking.html

Setup:

React Vite TypeScript SPA

All deps versions are ^, so they might in fact be higher atm.

react 18.2.0
react-dom 18.2.0
@testing-library/jest-dom 6.4.5
@testing-library/react 15.0.7
@testing-library/user-event 14.5.2
@vitest/coverage-v8 1.6.0
jsdom 24.0.0
react-router-dom 6.22.3
typescript 5.2.2
vite 5.2.0
vitest 1.5.0

Case:

NotFound.tsx:

import { Button, Typography } from '@mui/material';
import HomeIcon from '@mui/icons-material/Home';
import { useNavigate } from 'react-router-dom';
import { HOME_URI } from '@/routes/router.tsx';

const NOT_FOUND_MESSAGE = 'Page does not exist.';

const NotFound = () => {
    const navigate = useNavigate();
    return (
        <>
            <Typography>
                {NOT_FOUND_MESSAGE}
            </Typography>
            <Button
                variant="contained"
                startIcon={<HomeIcon />}
                onClick={() => navigate(HOME_URI)}
            >
                Main page
            </Button>
        </>
    );
};

export default NotFound;

NotFound.test.tsx:

import { expect, test } from 'vitest';
import { render, screen } from '@testing-library/react';
import NotFound from '@/views/NotFound.tsx';

test('Renders the 404 page correctly', async () => {
    await render(<NotFound />);
    const title = await screen.queryByText('Page does not exist.');

    expect(title).not.toBeNull();
});

This obviously results with the:
Error: useNavigate() may be used only in the context of a <Router> component., because the Router context is provided by the component's parent.

I wanted to Mock the useNavigate to return vi.fn(), to avoid that error.

However, trying multiple scenarios didn't help, namely:

Solution 1 (not working):
NotFound.test.tsx (part):

vi.mock('react-router-dom', () => ({
    ...vi.importActual('react-router-dom'),
    useNavigate: () => vi.fn(),
}));

Solution 2 (not working):
NotFound.test.tsx (part):

const mockNavigate = vi.fn();
vi.mock('react-router-dom', async () => {
    const mod = await vi.importActual('react-router-dom');
    return {
        ...mod,
        useNavigate: () => mockNavigate,
    };
});

Solution 3 (not working):
NotFound.test.tsx:

import { expect, test, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import NotFound from '@/views/NotFound.tsx';
import type { PropsWithChildren } from 'react';

const mockNavigate = vi.fn();

const MockProvider = ({ children }: PropsWithChildren) => {
    vi.mock('react-router-dom', async () => {
        const mod = await vi.importActual('react-router-dom');
        return {
            ...mod,
            useNavigate: () => mockNavigate,
        };
    });

    return <>{children}</>;
};

test('Renders the 404 page correctly', async () => {
    await render(
        <MockProvider>
            <NotFound />
        </MockProvider>
    );
    const title = await screen.queryByText('Page does not exist.');

    expect(title).not.toBeNull();
});

Solution 4 (not working):

Doing exactly the same above mocking with vi.mock globally, in vitest.setup.ts, that is referenced in vitest.config.ts via setupFiles: ['./src/tests/vitest.setup.ts'],.

Solution 5 (not working):

Providing a global __mocks__ folder in project's root, with a custom react-router-dom.ts that exports the same ...mod and mocked useNavigate.

Solution 6 (not working):

All above + explicit mocking inside my test using vi.mocked(useNavigate).mockImplementation or others results in mockImplementation is not a function.

Summary:

There is in fact a possibility that I am a complete moron. But there is also a possibility that something is not right with the mocking in Vitest.

It basically doesn't work as I expect. Doesn't seem to work at all as a matter of fact.

Please provide me some insight as to what I'm doing wrong or what I should be doing right.

Much appreciated.

[hi-ogawa]

What do you mean by "not working"? Is all of them still causing Error: useNavigate() may be used only in the context or different errors?
If you only need to mock import { useNavigate } from 'react-router-dom', then technically this should suffice:

vi.mock('react-router-dom', () => ({
    useNavigate: () => vi.fn(),
}));

To keep other exports, you will need importOriginal as shown in https://vitest.dev/api/vi.html#vi-mock

Can you setup a reproduction so we can see the exact setup?

[swinogrodzki]

Thank you for your response!

When I prepared a demo to reproduce that error... it actually works in my demo!

vitest-mocking

So I think this issue is not an issue and I simply have to check through my actual webapp and assess the differences. I might have misconfigured something there...

That's weird, cause the setup and components look exactly alike. Maybe some caching?

Oh, and FYI I needed to importActual due to the other router-related dependencies.

[swinogrodzki]

FYI fun fact, it's still reproducible! Here's how:

Simply run npm run test-run in Windows 10/11 in cmd as Admin...

For whatever reason, the tests work just fine in Git Bash or cmd run as local user.

But when you run cmd as Admin, the vi.mock never gets triggered and the test fails with useNavigate() may be used only in the context of a <Router> component..

#Wandows

[victorz]

I just ran into this error. Usually, the fix for me with this is to wrap the component being tested in a <MemoryRouter>. This didn't work this time however. The reason for this was that I had imported useNavigate() and useLocation() from the wrong package: "react-router" instead of "react-router-dom".