Mocking with react-query and graphql-request stopped working after upgrade to the LTS version of msw

[zgrybus]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

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

Node.js version

20.10.0

Reproduction repository

https://codesandbox.io/p/devbox/msw-nextjs-react-query-z6n3h8?file=%2Fcomponents%2FTodoList.spec.tsx%3A18%2C61

Reproduction steps

npm run test

Current behavior

Mocking the graphql-request stopped working. There are no 3 items of list that we have mocked in tests/mocks/handlers.ts

Expected behavior

We should get 3 items in a todo list

[kettanaito]

Hi, @zgrybus. Thanks for reporting this.

There are a couple of problems with the way you configured Jest. I will go through them below.

Problem 2: Using ReadableStream from node:util

I'm not sure where you saw that ReadableStream has to be polyfilled from node:util. That's incorrect. Whatever node:util exports as ReadableStream is not an actual class of ReadableStream. You can see an error message about this if you log out the request promise rejection:

To solve this, import ReadableStream from node:streams/web.

-const { ReadableStream } = require('node:util')
+const { ReadableStream } = require('node:stream/web')

Problem 2: The infamouse structuredClone error

With the ReadableStream correctly polyfilled, you will see the actual root cause for the failed request:

    FetchError {
      message: 'request to https://test/graphql failed, reason: structuredClone is not defined',
      type: 'system',
      errno: undefined,
      code: undefined
    }

This is a known issue with Jest using core-js to polyfill structuredClone, which is not happening correctly. Read about it and how to fix it here: #1916 (comment)

[MoSattler]

Hey @kettanaito - the problem remains for me for graphql-request using vitest and node 20. Are there some common pitfalls setting this up? Intercepting fetch works fine.

[MoSattler]

It turns out, when I am testing this Browser app in a node jsdom environment, this gets intercepted by MSW:

fetch("/graphql")

but this`

import request from 'graphql-request`
request("/graphql", gql`query Test {id}`)

throws an error:

TypeError: Only absolute URLs are supported

and hence never arrives at MSW. I guess this is a graphql-request issue.

[zgrybus]

@MoSattler You may change the URL, when env.NODE_ENV === 'test'

const url = process.env === 'test' ? 'http://test.com' : '/graphql'
request(url, gql`query Test {id}`)

That should work :)

Moreover, @MoSattler
Does msw2.0 works with vitest and graphql-request for you?