How to vi.mock only in one test

[Hurtak]

I am using the vi.mock to mock module but only in one test.

I tried the following but it does not seem to work, the original test still has the mocked module data

import { vi, test, expect, describe, afterEach } from 'vitest';
import { data } from './fetch';

describe('fetch', () => {
  afterEach(() => {
    vi.clearAllMocks();
    vi.resetAllMocks();
  });

  test('mock', async () => {
    vi.mock('node-fetch', () => ({
      default: () => Promise.resolve({ json: () => Promise.resolve({ mock: 'data' }) }),
    }));
    expect(await data()).toEqual({ mock: 'data' });
  });

  test('original', async () => {
    expect(await data()).toEqual({
      id: 1,
      todo: 'Do something nice for someone I care about',
      completed: true,
      userId: 26,
    });
  });
});

Any solution to this? Or am I using the vi.mock incorrectly?

[sheremet-va]

Or am I using the vi.mock incorrectly?

vi.mock is hoisted to top of the file.:

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

You can check mocking cheat sheet for different ways to mock a module: https://vitest.dev/guide/mocking.html#cheat-sheet

[Hurtak]

I was checking that but I haven't really found a simple solution that would work well.

[sandra-oldenburg]

I achieved it like this for mocking a component.

import { vi, it, describe } from 'vitest';
import * as childComponent from './path/to/child.tsx'

describe('Parent', () => {
     it('tests with mocked child', () => {
          vi.spyOn(childComponent, 'Child').mockImplementation((props: ChildProps) => {
               return (
                    <div>
                         // your component mock able to use component props as well
                    </div>
               )
     })
})