msw fails to find the correct client in iframe scenarios (like with Cypress)

Describe the bug

This is a tricky one. I suppose the root error is failing to find the correct client that emitted a specific event, which then throws an error in ./mockServiceWorker.js#117 on if (activeClientIds.has(client.id)) because client is undefined.

It only happens in Cypress tests, which changes how the app is rendered I suppose, and has to do with iframes I guess.

More info in screenshots.

Environment

• msw: 0.27.1
• nodejs: 14.13.0
• npm: 7.6.1
• cypress: 6.6.0

msw@0.26.2 does not have this issue

Chrome: 89.0.4389.82

but also happens on Electron and Firefox, doesn’t seem to be browser related

To Reproduce

Steps to reproduce the behavior:

1. Run msw on app start
2. Run Cypress to test app (or another way to put app into an iframe?)
3. Re-run tests until error (usually first or second is enough)
4. See error

I realise this is bad, please take a look at the screenshots, perhaps it will become clearer how to reproduce

Expected behavior

msw can be used in Cypress/iframes without issues.

Screenshots

It starts by intercepting this request, I don’t know why because it’s definitely not a path I mock. I suppose it should simply pass through.

It then finds the client, but it’s nested so on to trying to find the parent I suppose?

This is where it goes wrong. allClients has no id that matches one in activeClientIds.

Therefore client is now undefined here, and client.id throws.

I hope that helps, I’m sure it has to do with iframes but I don’t know why the ids don’t match.

Curiously, the first Cypress test always passes (ids match and all), but the second on always fail.

[tget4]

I’m having the exact same problem. The client id for the incoming event doesn’t match any of the active clients. I’m running a nextjs server and it blows up on any request to /__cypress/ or /_next/.

Updating line 117 on mockServiceWorker.js to this seems to resolve the problem

  if (client && activeClientIds.has(client.id)) {

[Wimpert]

The fix looks good, but we need to get a test so this doesn’t happen again. I’m trying to emulate an iframe reload scenario in Playwright, and it doesn’t seem to be working as we need.

Please, can anybody share some context when exactly this happens? (test suite change, page reload, navigation, etc.) Any details will be helpful to finding the root cause and writing a test for that. Thanks.

In my case it happens when I hit the rerun button in Cypress.