ERR_NETWORK: Vague Network Error in browser mode.

[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 Yeah, I was under the impression that if we created the respective handler in msw, all network related operations would be skipped and handled by the msw handler. This is what is confusing me the most. Why am i getting network problems when implementing the mocks in msw?

[charlieforward9]

I mocked the preflight request with http.options, but it did not reveal anything novel. I still do not understand why it will work with the setupServer but not setupWorker in browser mode...

Could someone please point me to how to debug this better? I need to figure this out.

EDIT: I dont see [MSW] Mocking enabled log in my console, but I do see [MSW] Mocking disabled at the end. Would be great to get some eyes on this.