MSW in fallback mode not intercepting and mocking image binary request

ahayes91 commented 3 months ago

Prerequisites

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

Environment check

[X] I'm using the latest msw version
[X] I'm using Node.js version 18 or higher

Browsers

Chromium (Chrome, Brave, etc.)

Reproduction repository

https://github.com/ahayes91/msw-cypress-docker-storybook

Reproduction steps

Run yarn storybook from the root of the repo to view a locally running instance of Storybook and confirm the image is being mocked correctly.
Run yarn test:visual to confirm that the snapshot generated by Cypress against Storybook isn't mocking the image correctly.

To view how the story is being rendered in the Docker container (and see MSW in fallback mode), you need to do some setup steps:

From https://sourabhbajaj.com/blog/2017/02/07/gui-applications-docker-mac/?ref=cypress-io.ghost.io - run brew install xquartz from your terminal and restart your machine
Run open -a XQuartz from your terminal
Go to XQuartz settings as per the instructions in that link and update the security checkbox "Allow connections from network clients"
Set the IP environment variable as per the instructions in that link: IP=$(ipconfig getifaddr en0) and /usr/X11/bin/xhost + $IP
Run IP=$IP yarn test:visual to see the test runner open up, and run debugStorybook test file to inspect the Storybook entry in the test runner browser.
See the video recording here

Current behavior

MSW enters fallback mode when running Cypress in a Docker container. Image request is not being mocked and instead the browser is attempting to fetch the image from the file system.

Expected behavior

The image request should be intercepted and handled by the mock.

zauni commented 3 months ago

Hi, did you already check if Cypress is browsing storybook with HTTPS enabled? Or in the Chrome Devtools of Cypress could you check if service worker are possible? MSW is checking these things in the browser to determine if it can run properly, so maybe you can check these things in the Chrome Devtools: https://github.com/mswjs/msw/blob/52d0a13b5c22065a56748d266fd200fcf786d217/src/browser/setupWorker/setupWorker.ts#L151

ahayes91 commented 3 months ago

Hi, did you already check if Cypress is browsing storybook with HTTPS enabled?

Looks like it's using http from the screenshot of the results on the repo: https://github.com/ahayes91/msw-cypress-docker-storybook/blob/main/static/msw_in_fallback_mode.png

Would you know off-hand is there's something specific I can do to enable that in the Cypress docker image? (I can go a-googlin' too!)

Is it expected that fallback mode can't intercept image requests?

zauni commented 3 months ago

Unfortunately I don't know if you can enable HTTPS in Cypress, but maybe it is not needed because if I just google for MSW and Cypress the setup is quite simple and nobody mentions problems with the fallback mode or anything related to HTTPS...

So maybe if you started the Docker Container, you could check the Devtools in the Cypress browser. Paste this code in the Console tab and see what it outputs.

console.log(!('serviceWorker' in navigator) ? 'NO service worker is possible' : 'service worker possible');
console.log(location.protocol === 'file:' ? 'running as local file, so no MSW mocking possible' : 'protocol is fine');

ahayes91 commented 3 months ago

So maybe if you started the Docker Container, you could check the Devtools in the Cypress browser. Paste this code in the Console tab and see what it outputs.

Sure - the output is "NO service worker is possible" and "protocol is fine":

Screenshot 2024-08-06 at 13 00 53

WadePeterson commented 3 months ago

Just ran into this same issue trying to mock the response of a javascript file loaded via script tag with MSW, which also does not seem to work when MSW is running in fallback mode.

I saw 'serviceWorker' in navigator was false, and it turns out that window.isSecureContext was also false, which is why the service worker was not allowed.

The root cause of this, was Cypress baseUrl was pointing to a host that was not https or localhost. Instead, it was using a docker-compose service name as the host, which was not being detected as secure by the browser.

  - CYPRESS_baseUrl=http://storybook:6060

I was able to get the proper serviceWorker version of MSW loaded by changing the baseUrl to http://localhost:6060 and updating the network_mode to allow the cypress container to access localhost of the storybook service

services:
  storybook:
    container_name: test_storybook
    ports:
      - "6060:6060"
    entrypoint: npx http-server storybook-static -p 6060 -s
    # ...
  cypress:
    container_name: test_cypress
    network_mode: service:storybook # <-- allow cypress container to access localhost of storybook container
    environment:
      - CYPRESS_baseUrl=http://localhost:6060 # <-- allows browser to run in secure context
    depends_on:
      - storybook
    command: npx cypress run --browser chrome

Before changes (baseUrl='http://storybook:6060')

After changes (baseUrl='http://localhost:6060')

mswjs / msw