Using "onUnhandledRequest": "error" does not fail tests

Describe the bug

When a server ist configured to listen with onUnhandledRequest: "error", the test where this error occurs does not fail.

Based on this discussion: https://github.com/mswjs/msw/discussions/943

Environment

• Next.js, Jest, React Testing Library & MSW

https://github.com/bennettdams/msw-nextjs-bug/blob/master/package.json

This happens for a fresh install with all default configuration from the Next.js & MSW docs.

• msw: 0.35.0
• nodejs: 14.18.0
• npm: 6.14.15

To Reproduce

Reproduction repo: https://github.com/bennettdams/msw-nextjs-bug

To try it out: npm i npm run test

---

Steps to reproduce the behavior from zero:

1. Install initial Create Next App with TypeScript npx create-next-app@latest --use-npm --ts . https://github.com/bennettdams/msw-nextjs-bug/commit/2cf426a22bcdab3836365509cdc40a82bfae54f1

2. Create src folder at root and move pages folder to it https://github.com/bennettdams/msw-nextjs-bug/commit/78b657e495d08da7fb12343b07b2e66327d742c8

3. Install & configure Jest, testing libs, etc. based on Next’s docs: npm install --save-dev jest babel-jest @testing-library/react @testing-library/jest-dom identity-obj-proxy react-test-renderer https://github.com/bennettdams/msw-nextjs-bug/commit/aaf1fb3257c311bf25ea7f6e25487a8159feceb2

4. Create a simple test file based on Next’s docs: https://github.com/bennettdams/msw-nextjs-bug/commit/bd9ba7776ca00e8d8deec740c79a5ac12749752e

5. Install MSW and follow setup for mocks/handlers/server via docs: npm install msw --save-dev https://github.com/bennettdams/msw-nextjs-bug/commit/cdd07c1218bfb411bf958c10685aa426be591316

6. Integrate MSW with Jest https://github.com/bennettdams/msw-nextjs-bug/commit/39738368a00308c1f478ae7f86537d26abd092a4

7. Install and utilize whatwg-fetch - needed for Polyfill with Next.js npm install -D whatwg-fetch https://github.com/bennettdams/msw-nextjs-bug/commit/5cbe84a9ab2830dce8f5f18b862e576bf889773f

8. Change server config to onUnhandledRequest: "error" and add some simple fetch execution in the tested component https://github.com/bennettdams/msw-nextjs-bug/commit/f77bb0f6bdcf9d37796c678eedda420cc656f3a1

==> The test does not fail, even though the tests shows the error.

Expected behavior

When onUnhandledRequest is configured with error and an unhandled request is found, the test shoud fail.

[nico1510]

@sbdchd I have the same problem and at least for my very simple test suite the following hack worked:

onUnhandledRequest: (req) => {
        test(`${req.url} is not handled`, () => {});
      },

test here comes from jest and jest doesn’t allow for tests to be nested or else it will fail with an error message. Coincidentally this will only happen when you have unhandled requests, so in order to know which request failed I pass the url to the test’s name. Could you please let me know if this works for you?

[kettanaito]

Hey, @balzdur. There hasn’t been any additional investigation than the one above.

I did stumble upon what seems the behavior we want when rewriting the ClientRequest interceptor but I don’t have tests to confirm that.

Anyone is welcome to dive into this to see how we can support failing individual tests (or the entire test suite) whenever onUnhandledRequest is set to error.

Note on semantics

I wonder if such test failures are semantic in regards to your assertions. Think of it this way: if your test setup (i.e. the beforeAll hook) throws, it’s not your individual tests that are marked as failed, it’s the entire test run, with the exception originating from the problematic area (i.e. the hook).

Since MSW is, effectively, a party of your testing setup, I’d say that it makes more sense to fail the entire test suite rather than try to figure out how to associate requests with the test code that issued them (spoiler: that’s likely impossible).

That being said, it still poses a challenge due to how the library is architectures. As the first step, I’d try propagating the exception from onUnhandledRequest to server.listen90 scope, which is the direct scope used in your test setup.