Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MSW fails to recognize a registered handler #2012

Closed
4 tasks done
stevenpollack opened this issue Feb 5, 2024 · 1 comment
Closed
4 tasks done

MSW fails to recognize a registered handler #2012

stevenpollack opened this issue Feb 5, 2024 · 1 comment
Labels
bug Something isn't working needs:triage Issues that have not been investigated yet. scope:node Related to MSW running in Node

Comments

@stevenpollack
Copy link

stevenpollack commented Feb 5, 2024 •
edited
Loading

Prerequisites

Environment check

  • I'm using the latest msw version
  • I'm using Node.js version 18 or higher

Node.js version

v20.5.1

Reproduction repository

https://github.com/stevenpollack/msw-mre

Reproduction steps

npm ci --force 
npm run test:vitest

Current behavior

I have 2 test files:

  1. one using a "shared" server, mswServer, defined in src/api/msw-server.ts and configured via vitest.setup.ts
  2. one instantiating its own "dedicated" server instance via setupServer

The dedicated server:

  • emits a warning that the graphQL request is unhandled (despite its handler being passed through during creation)
  • doesn't fire its request:start event callback (which would simply log all requests).

Here's the output from a vitest run:

stderr | src/views/ask-axel/hooks/use-axel-chats-dedicated-server.vitest.tsx > useAxelChats > default to empty chats
[MSW] Warning: intercepted a request without a matching request handler:

  • POST /graphql

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks

stderr | src/views/ask-axel/hooks/use-axel-chats-shared-server.vitest.tsx > useAxelChats > default to empty chats
[MSW] Warning: intercepted a request without a matching request handler:

  • POST /graphql

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks

stdout | src/views/ask-axel/hooks/use-axel-chats-dedicated-server.vitest.tsx > useAxelChats > should return chats
undefined
[Network error]: TypeError

stderr | src/views/ask-axel/hooks/use-axel-chats-dedicated-server.vitest.tsx > useAxelChats > should return chats
[MSW] Warning: intercepted a request without a matching request handler:

  • POST /graphql

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks

stdout | src/views/ask-axel/hooks/use-axel-chats-shared-server.vitest.tsx > useAxelChats > should return chats
undefined
[Network error]: TypeError

 ✓ src/views/ask-axel/hooks/use-axel-chats-shared-server.vitest.tsx (2)
 ❯ src/views/ask-axel/hooks/use-axel-chats-dedicated-server.vitest.tsx (2) 1033ms
   ❯ useAxelChats (2) 1031ms
     ✓ default to empty chats
     × should return chats 1012ms

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/views/ask-axel/hooks/use-axel-chats-dedicated-server.vitest.tsx > useAxelChats > should return chats
AssertionError: expected [] to deeply equal [ { chatId: 'chat-id', …(2) }, …(2) ]

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div />
  </body>
</html>

- Expected
+ Received

- Array [
-   Object {
-     "chatId": "chat-id",
-     "lastUpdate": "2023-12-17T00:00:00.000Z",
-     "name": "chat-name",
-   },
-   Object {
-     "chatId": "chat-id-1",
-     "lastUpdate": "2023-12-16T00:00:00.000Z",
-     "name": "chat-name-1",
-   },
-   Object {
-     "chatId": "chat-id-2",
-     "lastUpdate": "2023-12-10T00:00:00.000Z",
-     "name": "chat-name-2",
-   },
- ]
+ Array []

 ❯ src/views/ask-axel/hooks/use-axel-chats-dedicated-server.vitest.tsx:35:54
     33|   test('should return chats', async () => {
     34|     const { result } = renderHook(() => useAxelChats(), { wrapper });
     35|     await waitFor(() => expect(result.current.chats).toEqual(CHATS));
       |                                                      ^
     36|   });
     37| });
 ❯ runWithExpensiveErrorDiagnosticsDisabled node_modules/@testing-library/dom/dist/config.js:47:12
 ❯ checkCallback node_modules/@testing-library/dom/dist/wait-for.js:124:77
 ❯ Timeout.checkRealTimersCallback node_modules/@testing-library/dom/dist/wait-for.js:118:16

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed | 1 passed (2)
      Tests  1 failed | 3 passed (4)
   Start at  10:15:38
   Duration  1.57s

Expected behavior

Firstly, I expect the following block

// src/views/ask-axel/hooks/use-axel-chats-dedicated-server.vitest.tsx
server.events.on('request:start', async ({ request }) => {
  console.log('Start process for', request);
});

to output to std out.

Second, the statement in the same file

const server = setupServer(listChatsResponseHandler);

registers a graphQL handler that is seemingly unmatched. I would expect the server to match the graphQL request, because the other server (used in src/views/ask-axel/hooks/use-axel-chats-shared-server.vitest.tsx) seems to have no issues with it.
@stevenpollack stevenpollack added bug Something isn't working needs:triage Issues that have not been investigated yet. scope:node Related to MSW running in Node labels Feb 5, 2024
@kettanaito
Copy link
Member

kettanaito commented Feb 12, 2024 •
edited
Loading

Hi, @stevenpollack.

The root cause of this problem is a failing request. In more detail, MSW tries to construct a Request (using global fetch API), and fails with this:

This is because JSDOM, once again, takes away your globals and polyfills AbortController, which is a global present API in both browser and Node.js. Because it's a polyfill, Node.js won't recognize it, and will throw right over here:

The issue is also mentioned in Undici: nodejs/undici#1910 (comment)

  1. Undici does this: https://github.com/nodejs/undici/blob/07fe3609d266ddc2309c303d9d87c001bb534791/lib/fetch/request.js#L414
  2. Then, Node.js does this: https://github.com/nodejs/node/blob/544cfc5ef151bca8d625fbccc581200a77b00bc0/lib/events.js#L943

Solution

The solution is to prevent JSDOM from polyfilling existing globals. Alas, this isn't something we can do on MSW's side. I highly recommend you check that Undici issue and search the JSDOM repo for any recommendations on how to solve this—it's a bug on their end.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working needs:triage Issues that have not been investigated yet. scope:node Related to MSW running in Node
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@stevenpollack @kettanaito