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