How to use different mocks for each test with vi.mock?

[marcadrian-it]

Hello, I’m having trouble using different mocks for each test in my test suite.
Here’s my code:

import { render, screen } from '@testing-library/react';
import { vi } from 'vitest';
import HomePage from '../app/page';

describe('Homepage', () => {
  test('Home page renders correctly', async () => {
    render(await HomePage());
    expect(screen.getByText('get started')).toBeInTheDocument();
  });

  test('Conditional rendering when authenticated', async () => {
    vi.mock('@clerk/nextjs', () => {
      return {
        auth: () => new Promise((resolve) => resolve({ userId: 'fefsfehrf' })),
        ClerkProvider: ({ children }) => <div>{children}</div>,
        useUser: () => ({
          isSignedIn: true,
          user: {
            id: 'user_8JkL2mP0zX6d8JkL2mP0zX6dJ',
            fullName: 'Thrall Durotan',
          },
        }),
      };
    });

    const { debug } = render(await HomePage());
    debug();
    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('href', '/journal');
  });

  test('Conditional rendering when not authenticated', async () => {
    vi.mock('@clerk/nextjs', () => {
      return {
        auth: () => new Promise((resolve) => resolve({ userId: null })),
        ClerkProvider: ({ children }) => <div>{children}</div>,
        useUser: () => ({
          isSignedIn: false,
          user: null,
        }),
      };
    });

    const { debug } = render(await HomePage());
    debug();
    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('href', '/new-user');
  });
});
 

I’m calling vi.mock twice, once in the second test and once in the third test. However, it seems that the second call to vi.mock is overwriting the first mock as when I console log userId both tests use it mocked as null, which means both tests are using the mock defined in the second call.

I’ve tried calling vi.resetAllMocks in an afterEach block and setting mockReset: true in my config, but it's not really problem of a mock reset rather some overwrite problem.

Can you help me understand how to use different mocks for each test with vi.mock? Is there something I’m missing or doing wrong?

Thank you!

[sheremet-va]

https://vitest.dev/api/vi.html#vi-mock

The call to vi.mock is hoisted, so it doesn't matter where you call it. It will always be executed before all imports.

[marcadrian-it]

Thank you for explaining that the call to vi.mock is hoisted.
However, I’m still not quite sure how to make it so that vi.mock uses different parameters for each test. I’m entirely new to mocking, so any guidance or examples would be greatly appreciated. Thank you!

[sheremet-va]

You can pass down variables with vi.hoisted and change the implementation before running a test:

import { namedExport } from './path/to/module.js'

const mocks = vi.hoisted(() => {
  return {
    namedExport: vi.fn(),
  }
})

vi.mock('./path/to/module.js', () => {
  return {
    namedExport: mocks.namedExport,
  }
})

it('test 1', () => {
	mocks.namedExports.mockReturned(true)
	// some test
})

it('test 2', () => {
	mocks.namedExports.mockReturned(false)
	// some test
})

[sinaza]

I've had the same issue trying to mock @remix-run/react's useParams and 👆 came to the rescue. In my case, I also had to call mockImplementation instead of mockReturned e.g.

  mocks.useParams.mockImplementation(() => ({
    "*": "",
  }));

[tnt-glenn-mccomb]

Thanks for including this additional context @sinaza, I found it very useful when trying to mock react-router-dom's useLocation hook since .mockReturned didn't work.

[Sti2nd]

Remember to restore the mocks at the end of the test!

import { namedExport } from './path/to/module.js'

const mocks = vi.hoisted(() => {
  return {
    namedExport: vi.fn(),
  }
})

vi.mock('./path/to/module.js', () => {
  return {
    namedExport: mocks.namedExport,
  }
})

it('test 2', () => {
  mocks.namedExports.mockReturned(false)
  // some test
  mocks.namedExport.mockRestore() // <-- Important
})

it('test 3', () => {
  // some test here will use namedExport: vi.fn() because we remembered to restore the mocks
}

[abdelrahman543873]

herooooo thanks so much working

[rocifier]

You can pass down variables with vi.hoisted and change the implementation before running a test:

import { namedExport } from './path/to/module.js'

const mocks = vi.hoisted(() => {
  return {
    namedExport: vi.fn(),
  }
})

vi.mock('./path/to/module.js', () => {
  return {
    namedExport: mocks.namedExport,
  }
})

it('test 1', () => {
	mocks.namedExports.mockReturned(true)
	// some test
})

it('test 2', () => {
	mocks.namedExports.mockReturned(false)
	// some test
})

What if you don't have a named export, eg. a vue component: import MyComponent from '@/components/MyComponent.vue'

[sheremet-va]

It is called default export and it's also mentioned in documentation. Just use the name "default"