Use service workers in component testing

[lmiller1990]

Current behavior

Weird behavior with service workers (or at least, mock service worker) in component testing.

See: mswjs/msw#744

Desired behavior

It should work.

Test code to reproduce

mswjs/msw#744 (comment)

Versions

• msw: 0.28.2
• nodejs: 14.14.0
• npm: 6.4.8
• browser: Chromium opened by cypress

[csvan]

Related: #16192

[csvan]

We managed to get Cypress to work with Service Workers using Workbox. Key is simply to tell the SW not to cache (or precache) any Cypress resources:

const navigationRoute = new NavigationRoute(handler, {
  denylist: [
    new RegExp('/__'),
    new RegExp('cypress'),
  ],
});

Then add a rule which forces all Cypress requests to be network-only:

  registerRoute(
    (request) => request.url.includes('cypress'),
    new NetworkOnly(),
  );

[yannbf]

We managed to get Cypress to work with Service Workers using Workbox. Key is simply to tell the SW not to cache (or precache) any Cypress resources:

const navigationRoute = new NavigationRoute(handler, {
  denylist: [
    new RegExp('/__'),
    new RegExp('cypress'),
  ],
});

Then add a rule which forces all Cypress requests to be network-only:

  registerRoute(
    (request) => request.url.includes('cypress'),
    new NetworkOnly(),
  );

Thanks for sharing that @csvan !
@kettanaito do you think this could help msw?

[kettanaito]

Hey, @yannbf. I think it may but I'd like to learn more about the context: what is NavigationRoute? What is NetworkOnly? Is there a solution using a barebone Service Worker API (afaik Workbox is an abstraction on top Service Workers)?

The root issue also seems different at the first glance. MSW doesn't cache anything. So the situation when a Cypress resource would get cached isn't possible. Therefore, configuring any sort of whitelisting on our side is redundant. I think the actual cause for the issue lies elsewhere, and that's where I'd love to hear more feedback from developers investigating what goes wrong when they use Service Workers with Cypress.

[fridaystreet]

thanks @csvan after hours of searching finally found this and while it didn't immediately work and took a bit of figuring out for our setup, managed to get it working in the end. couple points to note for anyone else, hopefully it'll save them a bit more time digging.

I'd agree with you though, this does feel a bit hacky, not sure how long before it breaks. Also have no clue at this stage what the impact of it is on the caching or offline testing. Although we have a PWA our app isn't really intended to be fully offline with local data sync and stuff, so fingers crossed it's ok for now. I did read somewhere, that the SW caching has no affect on cypress. This is certainly true in the testing I saw today, the only real issue is ensuring it forces the cypress url to be network only. But that might only be our PWA config.

1. Not sure if it's a version thing in cypress, but when we run the tests the term 'cypress' isn't in the url anywhere. the url is /__/#/tests/

I'm not sure if that's a configurable thing, but to get it working and it seemed maybe to ensure we do only capture this for the testing url (who knows someone could have a slug with cypress) we changed it to. Also this is the import for networkOnly, save having to track that down.

import {NetworkOnly} from 'workbox-strategies';

registerRoute(
    (request) => request.url.includes('/__/#/'),
    new NetworkOnly(),
  );

2. In case it isn't obvious (maybe it was just me), the handler in the navroute is your default handler function. At first I was trying to create a second Navroute for cypress. but the following worked for us with the default workbox handler creation

const handler = createHandlerBoundToURL('/index.html');
const navigationRoute = new NavigationRoute(handler, {
    denylist: [
      new RegExp('/__')
    ],
});
registerRoute(navigationRoute);

Thanks again, really saved us.

[lmiller1990]

Seems like the best solution here would just be a detailed blog post + example project? Do we need any work in Cypress to facilitate this?

[fridaystreet]

@lmiller1990 yeah sounds good if that's the way you guys like to role. I think there's a number of issues related to service workers spread out over diferent issues, possibly something that could sum them all up in one place with solutions for the ones that have them. I know I just kept on stumbling on all of the others but couldn't find this one until it crossed my mind this could be a issue specific to workbox not just a service worker thing.

[vospascal]

Any update on this ?

[lmiller1990]

Did you try the work-around suggested above?

Are you trying to use msw or just service workers in general?