Is there a better way to configure Vitest + MSW to work both with AND without Vitest browser mode on the same test suite?

[ezzatron]

EDIT: Actually, I realised this is more of an MSW issue than a Vitest issue. I ended up writing a little NPM package that solves the problem: https://www.npmjs.com/package/isomorphic-msw

Hey there!

I'm trying to figure out how to set up a Vitest workspace with two projects - one using Vitest Browser mode, another using happy-dom, but both running the same exact test suite.

I have an example repo to provide context for this question, where you can run my setup and try it for yourself:

• https://github.com/ezzatron/vitest-msw-server-and-worker-config

The Vitest workspace config I've got is actually pretty simple:

// vitest.workspace.ts
import { defineProject, defineWorkspace } from "vitest/config";

export default defineWorkspace([
  defineProject({
    test: {
      name: "chromium",
      browser: {
        enabled: true,
        headless: true,
        provider: "playwright",
        name: "chromium",
      },
    },
  }),
  defineProject({
    test: {
      name: "happy-dom",
      environment: "happy-dom",
    },
  }),
]);

I also want to use MSW to mock API responses, so I need to be able to switch between using setupServer() and setupWorker() depending on the test environment, and I also need a reference to the created server or worker so that I can call server.use() or worker.use() during test setup.

I thought I would be able to achieve this by writing a helper function that imports @vitest/browser/context, checking to see if the server export is defined, and choosing the MSW API to use as appropriate. Something like this:

import { expect, it } from "vitest";
import { setupMSW } from "./setup-msw.js";
import { http, HttpResponse } from "msw";

// setupMSW is a helper function that calls setupServer or setupWorker based on
// whether the test is running under Vitest browser mode or not
const server = await setupMSW();

it("should respond to requests", async () => {
  server.use(
    http.get("/greet", ({ request }) => {
      const url = new URL(request.url);
      const name = url.searchParams.get("name") ?? "";

      return HttpResponse.json({ greeting: `Hello ${name}` });
    })
  );

  const response = await fetch("/greet?name=Vitest");

  expect(response.ok).toBe(true);
  expect(await response.json()).toEqual({ greeting: "Hello Vitest" });
});

// setup-msw.ts
import { server as viServer } from "@vitest/browser/context";
import type { SetupServer } from "msw/node";
import type { SetupWorker } from "msw/browser";
import { afterAll, beforeAll, beforeEach } from "vitest";

export async function setupMSW(): Promise<SetupServer | SetupWorker> {
  // If this is defined, we are running under Vitest browser mode
  if (viServer) {
    const { setupWorker } = await import("msw/browser");
    const worker = setupWorker();

    beforeAll(async () => {
      await worker.start({
        quiet: true,
        onUnhandledRequest: "bypass",
      });
    });

    beforeEach(() => {
      worker.resetHandlers();
    });

    afterAll(() => {
      worker.stop();
    });

    return worker;
  }

  // Otherwise, we are running under Node.js
  const { setupServer } = await import("msw/node");
  const server = setupServer();

  beforeAll(() => {
    server.listen();
  });

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

  afterAll(() => {
    server.close();
  });

  return server;
}

But unfortunately, this kind of setup will result in two similar errors, seemingly caused by Vitest trying to bundle both versions of MSW for both Vitest projects:

No known conditions for "./node" specifier in "msw" package

No known conditions for "./browser" specifier in "msw" package

After some digging, I found a suggestion in this comment to use resolve.alias to force these imports to resolve to something. After all, the imports that are failing are not actually used, so I can just alias them to a dummy module:

// vitest.workspace.ts
import { defineProject, defineWorkspace } from "vitest/config";

export default defineWorkspace([
  defineProject({
    resolve: {
      alias: [
        {
          find: "msw/node",
          replacement: "./dummy-msw.ts",
        },
        {
          find: "@mswjs/interceptors/ClientRequest",
          replacement: "./dummy-msw.ts",
        },
      ],
    },
    test: {
      name: "chromium",
      browser: {
        enabled: true,
        headless: true,
        provider: "playwright",
        name: "chromium",
      },
    },
  }),
  defineProject({
    resolve: {
      alias: [
        {
          find: "msw/browser",
          replacement: "./dummy-msw.ts",
        },
      ],
    },
    test: {
      name: "happy-dom",
      environment: "happy-dom",
    },
  }),
]);

// dummy-msw.ts
export function setupServer() {
  throw new Error("Dummy setupServer() should not be called");
}

This feels really gross, but it does work: https://github.com/ezzatron/vitest-msw-server-and-worker-config/actions/runs/10899426826/job/30244789376#step:3:216

 RUN  v2.1.1 /home/runner/work/vitest-msw-server-and-worker-config/vitest-msw-server-and-worker-config
      [chromium] Browser runner started by playwright at http://localhost:5173/

 ✓ |happy-dom| example.test.ts  (1 test) 31ms
 ✓ |chromium| example.test.ts  (1 test) 34ms

 Test Files  2 passed (2)
      Tests  2 passed (2)
   Start at  08:33:38
   Duration  1.81s (transform 208ms, setup 0ms, collect 718ms, tests 66ms, environment 331ms, prepare 194ms)

For reference, here's what a run looks like without the resolve.alias config additions: https://github.com/ezzatron/vitest-msw-server-and-worker-config/actions/runs/10899434546/job/30244811169#step:3:216

Now that you've read through that wall of text (sorry), is there something I'm missing here in Vitest or Vite config that could simplify this setup?

[jgarplind]

Thanks for sharing your experience and solution 🎉

I'm also experimenting with Vitest browser mode + MSW. Still doing some initial configuration and troubleshooting, but seeing others are engaging in this space is very encouraging.

[ezzatron]

No problems, glad it was useful!