Browser: worker not mocking requests when vi.mock present

[charlieforward9]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Browsers

Chromium (Chrome, Brave, etc.)

Reproduction repository

https://github.com/Agriculture-Intelligence/msw-vitest-browser-issue

Reproduction steps

• Install aws-amplify, vitest, msw
• Configure vitest and msw to support browser-based testing/mocking
• Try mocking a call to the downloadData command from aws-amplify/storage module
• Notice the non-detailed NETWORK ERR

Current behavior

Functional in development and node/jsdom testing, when configuration is changed to browser-based, fails.

Expected behavior

I expect the browser based mocking to work exactly the same as node based testing.

[charlieforward9]

Looking at more of my tests, it seems like the real problem is that my handlers are not properly intercepting/mocking the network calls.

It appears to fire the request and match correctly, but not mock properly and end up somehow bypassing?

Am I configuring the worker incorrectly?

Please take a look at the sample repo so I can fix it and contribute it to an msw/example browser mode setup. Thank you

[charlieforward9]

I am also getting this at some places in my console when I run my tests...

 ... Warning: intercepted a request without a matching request handler:

  • GET /node_modules/...

i did not have any issues with any of the mocking when I was using the setupServer config, but now with setupWorker, there are a bunch of miscellaneous issues relating to external calls, including calls to http://localhost:63315/node_modules/...

[bdpartridge]

I'm hitting a seemingly similar issue while trying to use msw with vitest browser mode. My request handlers are being called, but ultimately msw is bypassing all requests, so all my mocked requests are resulting in 404 responses.

[bdpartridge]

I'm hitting a seemingly similar issue while trying to use msw with vitest browser mode. My request handlers are being called, but ultimately msw is bypassing all requests, so all my mocked requests are resulting in 404 responses.

I just realized that vitest browser is setting up its own msw request handler when vi.mock(...) is used to mock modules. Somehow this is interfering with my own request handlers, so it looks like this might be an issue with vitest browser and not msw.

[charlieforward9]

vitest browser is setting up its own msw request handler when vi.mock(...) is used to mock modules. Somehow this is interfering with my own request handlers

@bdpartridge is it? Take a look at my reproduction. I don't use vi.mock and still get issues.

[bdpartridge]

@charlieforward9 You're right. It looks like yours is a different issue. I tried out your reproduction and noticed that the beforeAll hook in the vitest.setup.ts file wasn't awaiting the worker to start. After making this change:

beforeAll(async () => {
  Amplify.configure(amplifyconfig);
  await worker.start();
});

…I see the mocked 200 response for POST https://cognito-identity.us-east-2.amazonaws.com/, but there seems to be a separate CORS issue related to the preflight request to https://mock-staging.s3.us-east-2.amazonaws.com/path/to/file.json.

Anyway, sorry for adding noise to this thread. Good luck resolving this.

[charlieforward9]

@bdpartridge seems to be right

I just realized that vitest browser is setting up its own msw request handler when vi.mock(...) is used to mock modules. Somehow this is interfering with my own request handlers, so it looks like this might be an issue with vitest browser and not msw.

The reason it wasnt working on my repro without vi.mock calls was because I was originally returning undefined in the handler, leading to it bypassing the call.

If you think this isnt a problem with msw, have you opened an issue with vitest yet? Any workarounds other than commenting out vi.mock?

[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