How to setup MSW for Vitest browser mode?

[foxaltus]

I'm trying Vitest browser mode (still experimental) and I'm wondering what's the canonical way to setup MSW in this mode? I tried:

// src/vitest-setup.ts
import { worker } from "./mocks/browser";
import { cleanup } from "@testing-library/react";

// from https://mswjs.io/docs/getting-started/integrate/node#setup
// Establish API mocking before all tests.
beforeAll(async () => {
  await worker.start({ onUnhandledRequest: "error" });
});

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => {
  worker.resetHandlers();
  cleanup();
});

// Clean up after the tests are finished.
afterAll(() => {
  worker.stop();
});

with:

// vitest.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    setupFiles: ["src/vitest-setup.ts"],
    globals: true,
    browser: {
      enabled: true,
      name: "chromium",
      provider: "playwright",
    },
  },
});

While this seems to work, I'm not sure this is 100% correct.

Also, I am not able to override a request in a single test using:

  worker.use(...);
  render(<MyComponent />);

The override doesn't seem to have any effect or to be taken into account.

EDIT: the override works if I move whatever I have inside vitest-setup.ts into the test file instead. I'm not quite sure why.

[kettanaito]

Hi, @foxaltus.

I suspect that setup files aren't applied in the browser. That's still the setup file for your Node.js run of Vitest.

@sheremet-va, please correct me if I'm wrong.

[sheremet-va]

Setup files are imported in the browser mode.

[foxaltus]

Do I need to file a bug in Vitest with a repo to repro? But is the "normal"/"recommended" setup for MSW in browser mode anyway?

[kettanaito]

@foxaltus, we are still exploring the recommended setup. I will provide more info once I get to use the Browser mode more. I think what you have above should work. If it doesn't, file an issue.

[foxaltus]

I have reported the bug at: vitest-dev/vitest#6690

[kettanaito]

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

[foxaltus]

Thanks, this looks neat! Excited to try it!