MSW handler disabled just before call

[Ericlm]

Describe the bug

I am using Vitest browser mode with Vue, with MSW to mock api calls.

I'm using a simple setup file, as suggested by MSW :

import { setupWorker } from 'msw/browser'
import type { SetupWorker } from 'msw/browser'
import { it as testBase } from 'vitest'

export const worker = setupWorker()

export const it = testBase.extend<{ worker: SetupWorker }>({
  worker: [
    // eslint-disable-next-line no-empty-pattern
    async ({}, use) => {
      // Start the worker before the test.
      await worker.start({ quiet: false, onUnhandledRequest: 'warn' })

      // Expose the worker object on the test's context.
      await use(worker)

      // Remove any request handlers added in individual test cases.
      // This prevents them from affecting unrelated tests.
      worker.resetHandlers()

      // Stop the worker after the test.
      worker.stop()
    },
    {
      auto: true,
    },
  ],
})

And in my test:

import { describe } from 'vitest'
import { it } from '@/msw'
import { render } from 'vitest-browser-vue'
import { http, HttpResponse } from 'msw'
import HelloWorld from '../HelloWorld.vue'

describe('HelloWorld', () => {
  it('renders properly', ({ worker }) => {
    worker.use(
      http.get('https://httpbin.org/status/401', () => {
        return new HttpResponse(null, { status: 401 })
      }),
    )

    render(HelloWorld, {props: {msg: 'Hello Vitest'}})
  })
})

And the HelloWorld component is making a fetch at the onMounted.

The issue is that, even with the MSW handler, the call is not mocked and made to the real API. It seems that MSW is disabled just before the api call.

index.mjs?v=d11e1ef7:280 [MSW] Mocking enabled.
tester-k74mgIRa.js:1189 Documentation: https://mswjs.io/docs
tester-k74mgIRa.js:1189 Found an issue? https://github.com/mswjs/msw/issues
tester-k74mgIRa.js:1189 Worker script URL: http://localhost:63315/mockServiceWorker.js
tester-k74mgIRa.js:1189 Worker scope: http://localhost:63315/
tester-k74mgIRa.js:1189 Client ID: b2c46cb0-09ba-41aa-abdb-ce9d93c60016 (nested)
tester-k74mgIRa.js:1189 [MSW] Mocking disabled.
tester-k74mgIRa.js:1200 [MSW] Warning: intercepted a request without a matching request handler:

  • GET https://httpbin.org/status/401

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/http/intercepting-requests
(anonymous) @ tester-k74mgIRa.js:1200
warn @ devUtils.mjs?v=d11e1ef7:8
applyStrategy @ onUnhandledRequest.mjs?v=d11e1ef7:28
onUnhandledRequest @ onUnhandledRequest.mjs?v=d11e1ef7:50
handleRequest @ handleRequest.mjs?v=d11e1ef7:31
httpbin.org/status/401:1  Failed to load resource: the server responded with a status of 401 ()

Reproduction

https://github.com/Ericlm/vitest-msw

System Info

System:
    OS: macOS 26.3
    CPU: (8) arm64 Apple M3
    Memory: 103.44 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.13.0 - /Users/ericlemaitre/.asdf/installs/nodejs/24.13.0/bin/node
    npm: 11.9.0 - /Users/ericlemaitre/.asdf/plugins/nodejs/shims/npm
    pnpm: 10.29.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Firefox: 147.0.4
    Safari: 26.3
  npmPackages:
    @vitejs/plugin-vue: ^6.0.4 => 6.0.4 
    @vitest/browser-playwright: ^4.0.18 => 4.0.18 
    vite: beta => 7.3.1 
    vitest: ^4.0.18 => 4.0.18 
    vitest-browser-vue: ^2.0.2 => 2.0.2

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[AriPerkkio]

render(HelloWorld, {props: {msg: 'Hello Vitest'}})

My guess is that this render mounts the component, but does not wait for any HTTP calls to start or resolve. You would need to add some asynchronous code to await the HTTP call to happen.

Your test resolves immediately and MSW is stopped.

[Ericlm]

Alright, it's stopped before the component itself has a chance to make the call. Shouldn't render be a Promise ?

[sheremet-va]

Alright, it's stopped before the component itself has a chance to make the call. Shouldn't render be a Promise ?

Even if it was a Promise, we can't track it because you just call fetch in onMounted, it's not tracked by anything

I recommend awaiting the element that depends on the fetch result instead:

render(Component)

await expect.element(page.getByRole('button', { title: 'Fetch Done' }).toBeVisible()

[Ericlm]

Thank you for your help! This is what I did and it makes more sense to actually test something 😅