ReferenceError: ReadableStream is not defined

[OscarJVD]

after including the jest.polyfills.js and the code from the official docs and installing undici. I have the error: ReferenceError: ReadableStream is not defined when I try to execute a test. Help :(
I'm using this versions of dependencies
"msw": "^2.0.11",
"next": "14.0.1",
"@testing-library/jest-dom": "5.16.5",
"jest": "29.5.0",
"jest-environment-jsdom": "29.5.0",

[OscarJVD]

Solution

Add ReadeableStream next to TextEncoder and our jest.pollyfills.js will look so:

// jest.polyfills.js
/**
 * @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, ReadableStream } = require("node:util")

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 },
})

[martinnajjar12]

I just needed to downgrade the undici package to v5 without adding the ReadableStream.
I'm using Node v18.12.1 and the following packages:
"msw": "^2.0.11",
"react": "^18.2.0",
"@testing-library/jest-dom": "5.16.5",
"jest": "^27.4.3",

[pedroSoaresll]

nodejs 18 is not a lts version anymore, I believe that should be better provide a solution based on newer version of nodejs and those libraries

[kettanaito]

I shared a bit of technical details on why this "cannot polyfill" error happens: #1931 (comment)

Note that the right place to get ReadableStream is the node:streams/web built-in package.

[kettanaito]

This does seem to be specific to JSDOM. Can somebody please confirm that?

[nathanhannig]

node:stream/web

[surfer19]

I have the same issue, tried with several node versions v18+

[surfer19]

Following setup resolved the issue

• try to downgrad undici to "undici": "^5.0.0"

// jest.polyfill.js
// jest.polyfills.js
/**
 * @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, ReadableStream } = require("node:util");

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 },
});

// jest.config.ts

export default {
  preset: "ts-jest",
  testEnvironment: "jest-environment-jsdom",

  transform: {
    "^.+\\.tsx?$": "ts-jest",
    // process `*.tsx` files with `ts-jest`
  },
  moduleNameMapper: {
    "\\.(gif|ttf|eot|svg|png)$": "<rootDir>/test/__ mocks __/fileMock.js",
    "\\.(css)$": "identity-obj-proxy",
  },
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
  setupFiles: ["<rootDir>/jest.polyfills.js"],
  testEnvironmentOptions: {
    /**
     * @note Opt-out from JSDOM using browser-sc
     * tyle resolution
     * for dependencies. This is simply incorrect, as JSDOM is
     * not a browser, and loading browser-oriented bundles in
     * Node.js will break things.
     *
     * Consider migrating to a more modern test runner if you
     * don't want to deal with this.
     */
    customExportConditions: [""],
  },
};

{
  "name": "msw-react-template",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "jest --watchAll"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite-plugin-svgr": "^4.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.5",
    "@testing-library/react": "^14.1.2",
    "@types/jest": "^29.5.11",
    "@types/node": "^18.19.3",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "msw": "2.0.2",
    "ts-jest": "^29.1.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.2.2",
    "undici": "^5.0.0",
    "vite": "^5.0.8"
  }
}

[narensulegai]

I think we can remove

ReadableStream: { value: ReadableStream },

[bgourlie]

@surfer19's solution is what actually worked for me. Including ReadableStream in the setup alongside undici 6 caused a separate error to occur.

[amarg3891]

Just upgrade your node js version to lates like 20.11.1 or something upgraded

[fabri86]

An upgrade to node v20 did not help for me.
The solution with polyfills provided above is valid, but it did not work for me due to the way ReadableStream was imported.
The proper setup is provided here:

#2082 (comment)

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

I hope it helps!

[DaleSalcedo]

this only worked for me as well once i imported from node:stream/web instead of node:util