MSW seems to be unreliably working with Cypress

[thomasmery]

Hi there,

after struggling for too long with this ... asking here

Describe the bug

The worker sometimes starts sometimes not, and the request are sometimes intercepted others not.

This only happen when the app is tested with cypress

I'm only using a simple cy.visit('/')

and the console sometimes shows the

sometimes not

other times it show the worker has started but the requests are not intercepted

ie. this does not show

I'm starting the worker like this :

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./services/mocks');
  worker.start();
}

Note: the requests I'm mentioning are requests that are sent when the React App (CRA) starts

Environment

• msw:0.19.4
• nodejs: 14.1
• npm: 6.14

Please also provide your browser version.

chrome 83

Expected behavior

Consistent starting and interceptin of requests while working w/ Cypress

thanks a lot

[thomasmery]

So I have even tried this approach:

https://github.com/andreawyss/msw-tester/blob/master/src/index.tsx

(thanks @andreawyss)

but this does not seem to make things much better

restarting the cypress server sometimes seems to force the detection of the worker but not all the time

I'll try and make a reduced use case in a repo if I can

[kettanaito]

Hey, @thomasmery. Thanks for raising this. I'm sorry for your experience, I'd love to address this issue and fix any bugs on the library's side to make it shine.

I'm starting the worker like this :

Your setup looks okay. May I please ask you where are you calling that code?

So I have even tried this approach:

That approach is no longer necessary, as of 0.19.0 the library will automatically catch and defer any requests your app makes until the worker is ready. Please check the version of msw you are using and ensure it's the latest one.

There's a Cypress example as a part of REST API example, could you please look at that? It's bare minimum, so there's a fair chance it misses something that makes it behave differently than in your case. I'd still recommend to use it as a reference when creating a reproduction repo.

I'll try and make a reduced use case in a repo if I can

Please, that would be highly appreciated and allow us to address the issue much more effectively!

[thomasmery]

thanks for the quick response,

Your setup looks okay. May I please ask you where are you calling that code?

this is called in the entry index file that bootstraps the whole app

There's a Cypress example as a part of REST API example

I have looked at the example but have not started it locally

I'll do that and see how it behaves

I'll try and report soon

[kettanaito]

Hey. Did you have any luck in debugging this issue?

[thomasmery]

Hi,

I'm sorry

I have ahed to switch to other matters and have had no time at all

I will have to come back to it but I don't know when that will be

feel free to close if that's convenient for you, I'll re-open or make another issue when I can

thanks!

On Fri, Jul 3, 2020 at 10:06 AM Artem Zakharchenko notifications@github.com wrote:

Hey. Did you have any luck in debugging this issue?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mswjs/msw/issues/240#issuecomment-653413471, or unsubscribe https://github.com/notifications/unsubscribe-auth/AALPETS3YUCJZ4JBRV25Z53RZWGSBANCNFSM4OEPAWLA .

[kettanaito]

Thanks for the quick reply! I'll close this issue for now, but, please, feel free to re-open and share more details once you have a chance.

[MaxDNG]

Hi All,

I have been facing the same issue. MSW indicated it was enabled but the requests were only caught with a force refresh and when the service worker was installed.

It turns out the issue was likely coming from the default registerServiceWorker provided in create-react-app. It was set to serviceWorker.unregister() and thus was calling

navigator.serviceWorker.ready.then(registration => {
  registration.unregister();
});

I'm no expert in service workers but I assume it was messing up with MSW.

TL;DR: remove or comment out the default registerWorker from CRA:

// import * as serviceWorker from './serviceWorker.js';
// serviceWorker.unregister();