Nuxt•7mo ago

Test Utils + Vitest + MSW - potential caching issue

I'm using a combination of "@nuxt/test-utils": "^3.12.1",, "vitest": "^1.5.0", and "msw": "^2.2.14", to test my Nuxt application. Everything works great, except I'm running into an issue when attempting to mock a specific http request using MSW (https://mswjs.io/):

  it('should retry fetching the next match after a delay', async () => {
    mswServer.use(
      http.get(lolesports.GET_SCHEDULE_ENDPOINT, () => {
        return new HttpResponse(null, {
          status: 401,
        })
      })
    )

    const setTimeoutSpy = vi.spyOn(global, 'setTimeout')
    await getNextMatchFromLoop()

    vi.advanceTimersByTime(intervalTimes.fiveSeconds)

    expect(setTimeoutSpy).toHaveBeenCalledTimes(1)
  })

  it('should retry fetching the next match after a delay', async () => {
    mswServer.use(
      http.get(lolesports.GET_SCHEDULE_ENDPOINT, () => {
        return new HttpResponse(null, {
          status: 401,
        })
      })
    )

    const setTimeoutSpy = vi.spyOn(global, 'setTimeout')
    await getNextMatchFromLoop()

    vi.advanceTimersByTime(intervalTimes.fiveSeconds)

    expect(setTimeoutSpy).toHaveBeenCalledTimes(1)
  })

In this case, I'm trying to do a one-off network override (https://mswjs.io/docs/best-practices/network-behavior-overrides). This doesn't actually override the HTTP request, and instead provides the response from my initial mock that is passed to my MSW server. I'm happy to get deeper into the details if you're interested, but the question I have is related to caching. This problem is discussed a few times in the MSW github (https://github.com/mswjs/msw/issues/694#issuecomment-860570247), and the solution tends to be caching-related. I haven't been able to find anywhere to disable or force-reset the vitest or nuxt test-utils cache besides https://vitest.dev/config/#cache, which had no effect.

3 Replies

Muhammad Mahmoud•7mo ago

Maybe unrelated a bit but isn't msw doesn't work correctly with nuxt (specificaly ofetch)? https://github.com/nuxt/nuxt/discussions/24519 https://github.com/unjs/ofetch/issues/295

GitHub

Getting Nuxt to play nicely with mswjs · nuxt nuxt · Discussion #24...

Hello, I am not sure if I should make this an issue or not, so posting here for now. I am trying to integrate mswjs with Nuxt. Here is a minimal example of what I got so far: https://stackblitz.com...

GitHub

Usage with MSW / patched fetch · Issue #295 · unjs/ofetch

Environment Node Reproduction https://codesandbox.io/p/sandbox/stoic-https-6gjdtz?file=/index.js:14,16 import { setupServer } from "msw/node"; import { http, HttpResponse } from "msw...

Cody BontecouOP•7mo ago

Ah interesting, all of my mocked calls have been client-side requests which have worked fine (outside of this network override problem). I'm using fetch for my requests which I believe Nuxt isn't tampering with on the client-side.

Muhammad Mahmoud•7mo ago

Yeah the problem is with $fetch. Thanks I hope someone help you out with your problem

Gaming

Programming

Test Utils + Vitest + MSW - potential caching issue