How use msw in browser mode

[njzydark]

I use msw/browser to setup worker, but when i await worker.start, it stuck

import { setupWorker } from 'msw/browser';
import { afterEach, beforeAll } from 'vitest';

const server = setupWorker([]);

beforeAll(async () => {
  await server.start();
});

afterEach(() => {
  server.resetHandlers();
});

[edwincarlflores]

I've been trying to create a utility function similar to how I do it with msw's setup server:

export function startMockServer(handlers: HttpHandler[]) {
  const server = setupServer(...handlers)
  beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
  afterEach(() => server.resetHandlers())
  afterAll(() => server.close())

  return server
}

But it seems that it is not working for msw's browser worker. What worked for me is this:

// browser.ts
import { setupWorker } from 'msw/browser'

export const worker = setupWorker()

Then on your test file:

import { worker } from '../../mocks/browser'
import { handlers } from '../../mocks/handlers'

describe('test', async () => {
  await worker.start()
  worker.use(...handlers)

  test(...)
})

[ysgk]

It seems that worker.start() should be called in each test file instead of the setup file. Although writing it in every test file is a bit tedious.

[charlieforward9]

@ysgk is this still the case? I am having insane headaches trying to get browser mode to work... see mswjs/msw#2398

[ysgk]

@charlieforward9
No, I’m not experiencing it anymore. In my case, the issue was fixed in version 2.1.4 by #6772

[kettanaito]

I've added the Vitest Browser Mode recipe to the MSW docs. Please follow it to integrate MSW with Vitest Browser Mode. Thanks!

[charlieforward9]

If theres any way this issue can be resolved relating to vitest and msw using the browser config, would be incredible

#7290

[kettanaito]

Hi. Please see the Vitest Browser Mode recipe. It describes how to integrate MSW in Vitest Browser Mode.

[charlieforward9]

Hey @kettanaito thanks for making this available.

Im not sure if this message is in response to mine, but were having a lot of trouble mocking other modules.

I dont see any mention of that within the vitest browser docs, I would like to get around this, but want to make sure this recipe either solves it or if not, there is an idea for moving forward in the short term.

[kettanaito]

That one is a bug and it will be addressed as soon as someone has time. Hopefully soon! You are also welcome to dive in and do some investigation as to what is causing that behavior. Logging out the worker and its handlers it a good place to start. Debugging runbook also applies.