TypeError: Right-hand side of 'instanceof' is not an object

[BrunoQuaresma]

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

v18.19.1

Reproduction repository

https://github.com/coder/coder/tree/bq/upgrade-msw

Reproduction steps

pnpm test:ci

Current behavior

When running tests I'm getting the following error:

    TypeError: Right-hand side of 'instanceof' is not an object

      at Object.BodyInit (node_modules/.pnpm/undici@6.7.0/node_modules/undici/lib/web/fetch/response.js:545:7)
      at new Response (node_modules/.pnpm/undici@6.7.0/node_modules/undici/lib/web/fetch/response.js:123:32)
      at createResponse (node_modules/.pnpm/@mswjs+interceptors@0.25.16/node_modules/@mswjs/interceptors/lib/node/chunk-GHU3MN2O.js:211:10)
      at Proxy.call (node_modules/.pnpm/@mswjs+interceptors@0.25.16/node_modules/@mswjs/interceptors/lib/node/chunk-GHU3MN2O.js:296:39)
      at forEach (node_modules/.pnpm/@mswjs+interceptors@0.25.16/node_modules/@mswjs/interceptors/lib/node/chunk-GHU3MN2O.js:584:50)
          at Array.forEach (<anonymous>)
      at XMLHttpRequestController.trigger (node_modules/.pnpm/@mswjs+interceptors@0.25.16/node_modules/@mswjs/interceptors/lib/node/chunk-GHU3MN2O.js:584:19)

Expected behavior

Not get the error.

[BrunoQuaresma]

Fixed by #2082

[BrunoQuaresma]

It was partially solved but still happening for a few tests.

[dsanch3z]

I was getting a very similar error and was able to solve it, I hope this helps.

Make sure you add all the polyfills needed as mentioned here: https://mswjs.io/docs/migrations/1.x-to-2.x#requestresponsetextencoder-is-not-defined-jest. I did the same but I started getting Right-hand side of 'instanceof' is not an object as an error so I just added ReadableStream to the setup file and the tests are running fine now, this is how my setup tests file looks like:

const { TextDecoder, TextEncoder } = require("node:util");
const { ReadableStream } = require("node:stream/web");

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
  ReadableStream: { value: ReadableStream },
});

const { Blob, File } = require("node:buffer");
const { fetch, Headers, FormData, Request, Response } = require("undici");

Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
});

[BrunoQuaresma]

This worked!!! Thanks A LOT @dsanch3z

[alvarolopezh]

worked for me too thanks @dsanch3z

[fabri86]

I confirm, it works! Thanks a lot @dsanch3z
Please pay attention to the import for the ReadableStream, it must be imported from 'node:stream/web'

[martinnajjar12]

I needed also to import TransformStream from node:stream/web
This is the whole file content right now:

/**
 * @note The block below contains polyfills for Node.js globals
 * required for Jest to function when running JSDOM tests.
 * These HAVE to be require's and HAVE to be in this exact
 * order, since "undici" depends on the "TextEncoder" global API.
 *
 * Consider migrating to a more modern test runner if
 * you don't want to deal with this.
 */

const { TextDecoder, TextEncoder } = require('node:util');
const { ReadableStream, TransformStream } = require('node:stream/web');

Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
  ReadableStream: { value: ReadableStream },
  TransformStream: { value: TransformStream },
});

const { Blob, File } = require('node:buffer');
const { fetch, Headers, FormData, Request, Response } = require('undici');

Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
});