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]

UPDATE:
This now worked for me after upgrading the undici:

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

Note the ReadableStream and the TransformStream that are imported from 'node:stream/web'

[kellyrmilligan]

would love it if the docs were updated, just pieced this together after an hour or so of run test, rinse, google, repeat

[akashmakde]

Where to write this in angular code?

[akashmakde]

ReadableStream
^

ReferenceError: ReadableStream is not defined
at Object. (D:\3.0ang\my-app\node_modules\undici\lib\web\fetch\response.js:527:3)
at Module._compile (node:internal/modules/cjs/loader:1198:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
at Module.load (node:internal/modules/cjs/loader:1076:32)
rs:119:18)
at Object. (D:\3.0ang\my-app\node_modules\undici\lib\web\fetch\index.js:11:5)
at Module._compile (node:internal/modules/cjs/loader:1198:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
getting this error while running compodoc command in angular 15 project nodejs 16.20.0

[halilibrahimcelik]

I encounter with same problem, in my jest.polyfills.js file I structure my code like this you suggested but now I got this error and I really do not why is this happening

● Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

C:\Github projects\base-concert-venue\node_modules\.pnpm\@bundled-es-modules+tough-cookie@0.1.6\node_modules\@bundled-es-modules\tough-cookie\index-esm.js:11846
export {
^^^^^^

SyntaxError: Unexpected token 'export'

  at Runtime.createScriptFromCode (node_modules/.pnpm/jest-runtime@27.5.1/node_modules/jest-runtime/build/index.js:1728:14)
  at Object.<anonymous> (node_modules/.pnpm/msw@2.4.7_typescript@4.5.4/node_modules/msw/src/core/utils/cookieStore.ts:5:8)

UPDATE: This now worked for me after upgrading the undici:

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

Note the ReadableStream and the TransformStream that are imported from '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

[martinnajjar12]

I needed also to import TransformStream from node:stream/web

[KieraDOG]

msw.js have created https://github.com/mswjs/jest-fixed-jsdom to provide a Jest configuration that already includes as much as for the needed "fixes" as possible

[ajay-l1x]

In my case with node version 18 Issue is resolved, try node v18 or 18+

[kemeny]

To understand, we have the same issue in one of our projects, but in another, we are running the same environment configurations and dependencies. It works without the use of the declaration of ReadeableStream.

[mattlean]

I think I ran into this issue too and I have two projects that are using similar configurations with very few differences. Both projects are using the following:

• msw@^2.2.2
• undici@^5.22.0
• jest@^29.5.0

I think the difference that is triggering the issue is Jest's testEnvironment option. The project that is set to jest-environment-node works just fine, but the project that is set to jsdom is encountering the error.