msw: Do not listen to all messages posted on broswer

Describe the bug

MSW reads all posted messages as MSW messages. However, anything can post a message. In particular, the react dev tools posts messages all the time. With MSW installed, MSW will throw uncaught exceptions.

Environment

msw@0.24.4
nodejs: v14.15.1
npm: 6.14.4

Google Chrome Version 87.0.4280.141 (Official Build) (x86_64) macOS Big Sur 11.1

To Reproduce

Steps to reproduce the behavior:

Install React Developer Tools
Run test suite (on a browser) with MSW
See error in console

Expected behavior

There shouldn’t be any errors.

Screenshots

Here is a screenshot of the failing line in MSW:

And more stack traces (which all seem to be related to react-dev-tools):

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 18 (13 by maintainers)

Most upvoted comments

An observation:

The test does not fail because MSW handles all desired requests successfully. The undesired requests (from other sources) throw an exception but it does not affect the outcome of the test.

While it is not blocking test development, it is annoying to see a few unhandled exceptions per test. When you have a codebase with 1k+ tests, this can become overwhelming.

juanca on Jan 22, 2021

I think that to replicate the issue you can simply call window.postMessage on a page of puppeteer using page.evaluate

const runtime = await runBrowserWith(path.resolve(__dirname, 'mocks.ts'))

runtime.page.evaluate(() => {
   window.postMessage({
       source: 'external-message',
   });
})

marcosvega91 on Jan 18, 2021

Hi, I can take this one if no one is working on it. If that’s OK, would be enough to verify that we have to client, or would all of our messages have a MSW tag (a property)?

timdeschryver on Jan 15, 2021