How do you mock a module multiple times (now) ?

[RossRogers]

Similar to this thread #1255, I want to mock a module multiple times.

I have 3 files:

uut.ts

import { an_api_function } from './api'

export async function a_function() {
  return await an_api_function()
}

api.ts

export async function an_api_function() {
  return 1
}

uut.test.ts

import { a_function } from './uut'
import { afterEach, describe, expect, it, vi } from 'vitest'


describe('test_a_function', () => {
  afterEach(() => {
    vi.clearAllMocks()
  })

  it('42', async () => {
      vi.mock('./api', () => ({
          an_api_function: async () => 42
      }))
      expect( await a_function()).toBe(42)
  })

  it('0', async () => {
      vi.mock('./api', () => ({
          an_api_function: async () => 0
      }))
      expect( await a_function()).toBe(0)
  })

})

As the documents say, this will fail because vi.mock is hoisted and this is found to be true:

 FAIL  src/uut.test.ts > test_a_function > 42
AssertionError: expected +0 to be 42 // Object.is equality

- Expected
+ Received

- 42
+ 0

sheremet-va's answer to that previous post doesn't seem to work in this scenario.

The only hacky work-around that I've found is to use global variables at the module level:

uut.test.ts

import { a_function } from './uut'
import { afterEach, describe, expect, it, vi } from 'vitest'


let an_api_function_result;
vi.mock('./api', () => ({
  an_api_function: async () => an_api_function_result
}))


describe('test_a_function', () => {
  afterEach(() => {
    vi.clearAllMocks()
  })

  it('42', async () => {
      an_api_function_result = 42
      expect( await a_function()).toBe(42)
  })

  it('0', async () => {
      an_api_function_result = 0
      expect( await a_function()).toBe(0)
  })

})

This works, but I don't like it.

---

What's the alternative to the above?

[sheremet-va]

You can use vi.hoisted instead:

const api = vi.hoisted(() => vi.fn())
vi.mock("./path.js". () => ({
  api
})
api.mockReturnValue(42)
api.mockReturnValue(0)

[RossRogers]

That checks out! Thank you @sheremet-va!
uut.test.ts

import { a_function } from './uut'
import { afterEach, describe, expect, it, vi} from 'vitest'

const an_api_function = vi.hoisted( () => vi.fn())
vi.mock('./api', () => ({
  an_api_function
}))

describe('test_a_function', () => {
  afterEach(() => {
    vi.clearAllMocks()
  })

  it('42', async () => {
      an_api_function.mockResolvedValue(42)
      expect( await a_function()).toBe(42)
  })

  it('0', async () => {
      an_api_function.mockResolvedValue(0)
      expect( await a_function()).toBe(0)
  })

})

[AmielCyber]

Thanks so much for this. I have been looking for this everywhere 😓

[oanaOM]

ahh this example is a gem! same as @AmielCyber, I've been battling with my tests for more than a couple of hours and finding this helped me to fix them. @sheremet-va what's the best way to add this to the example section? I'm happy to contribute to it.

[breathTake]

Wow finally after weeks of research i found a working example! Thank you very much!

[sheremet-va]

Just to note, you don't really need to use hoisted, the imported functions reference the same value even in tests:

import { api } from './path.js'
vi.mock("./path.js", () => ({
  api: vi.fn()
})
api.mockReturnValue(42)
api.mockReturnValue(0)

If the TypeScript gives an error, you can wrap the call with vi.mocked:

import { api } from './path.js'
vi.mock("./path.js", () => ({
  api: vi.fn()
})
vi.mocked(api).mockReturnValue(42)
vi.mocked(api).mockReturnValue(0)