MSW fails to intercept GraphQL queries when using vi.mock in Browser Mode

[ytoshiki]

Describe the bug

I am encountering an issue where MSW is unable to intercept GraphQL queries when using vi.mock from Vitest in my test setup.
Regardless of which module is being mocked using vi.mock, MSW cannot intercept the requests when vi.mock is active.

Reproduction

A minimal reproduction of the issue can be found here. https://github.com/ytoshiki/repro-msw-vitest-browser

Steps To Reproduce

1. Run npm install to install dependencies.
2. Run npm run test:browser to start the test in the browser.
3. In components/index.test.ts, MSW fails to mock the GraphQL queries. However, when pressing the refetch pokemon button in the browser, the mock works as expected.
4. Comment out the vi.mock section in the test file, kill the running task in the terminal, and rerun npm run test:browser

  vi.mock("anyModuleToMock", () => ({
    default: {
      key: "value",
    },
  }));

5. Now, MSW successfully mocks the GraphQL queries without the vi.mock.

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M2
    Memory: 70.97 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.5.0 - ~/.nodebrew/current/bin/npm
    Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 130.0.6723.58
    Safari: 17.5
  npmPackages:
    @vitest/browser: ^2.1.3 => 2.1.3
    vitest: ^2.1.3 => 2.1.3

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.

[kettanaito]

Hi, @ytoshiki. Thanks for reporting this.

We've looked into the issue, and the setup and usage on your side look correct. There was a bug in MSW that prevented it from correctly forwarding the requests from the test frame to the respective worker instance (the one you create in tests).

Just upgrading msw to 2.5.0 in Vitest should fix the problem.

@sheremet-va also proposed moving the Vitest's worker to the test frame, which will also eliminate the problem by keeping all workers in a single context.

[ytoshiki]

@kettanaito

I upgraded msw to 2.5.0, and it worked perfectly!
I truly appreciate the effort and responsiveness from the team.

[ytoshiki]

@sheremet-va

Thank you for addressing the bug. However, after upgrading to version 2.1.4, MSW is once again unable to intercept requests when using vi.mock in tests.
The steps to reproduce are the same, and a small reproduction can be found here: https://github.com/ytoshiki/repro-msw-vitest-browser

[sheremet-va]

I added an example to catch this regression in the future: https://github.com/vitest-tests/browser-examples/tree/main/examples/vue-msw-graphql

You can run it with

pnpm install
cd examples/vue-msw-graphql
pnpm test

[chetankumar01]

I am facing a similar issue with vitest-browser-react + msw.

When there are no vi.mocks, msw intercepts api calls correctly.
When I add a vi.mock, either in the vitest.setup.ts or the individual test file, msw responds with 404 error.

Repro:
https://github.com/chetankumar01/vitest-browser-msw-vi-mock-fail-repro

[charlieforward9]

I am also facing an issue with this, I filed an issue in MSW a few weeks back and it looks like its failing to intercept ALL requests for me, not just graphql requests.

Reproduction is in the linked issue.

[e7h4n]

I also encountered this issue, here is the minimal reproduction I tried: https://github.com/e7h4n/msw-vitest-failure/blob/main/index.test.ts