升级 Jest 后出现“ReferenceError：TextEncoder 未定义”

Question

我目前正在弹出一个相当大的 create-react-app 项目。与此同时，我还将 Jest 的版本从

~27

更新为

~29

。 v28 中有一个重大更改，需要我手动安装

jest-environment-jsdom

。完成此操作后，我在其中一项测试中出现错误。

ReferenceError: TextEncoder is not defined

此错误来自内部

react-dom/server

，我正在将其导入到其中一个生产文件中。

问题是

TextEncoder

在浏览器中全局存在，但需要从Node.JS中的

utils

导入。

react-dom/server

有 2 个不同的输出文件，一个用于浏览器，一个用于 Node.JS，如果导入正确的文件，就可以解决这个问题。自 Jest 更新以来，此导入已错误解决。 Jest 导入浏览器文件，而不是节点文件。在更新之前，Jest 正确解决了导入问题。

我知道做类似的事情

global.TextEncoder = require("utils").TextEncoder;

可以，但我想知道是否有一个不那么麻烦的解决方案。在我看来，自 Jest 更新以来这是必要的方式，这似乎令人难以置信。

更多信息：
笑话版本：29.7.0

自从弹出后，我的

package.json

包含这个

jest

部分：

"jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.ts"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom"
    "transform": {
      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
      "^uuid$": "<rootDir>/node_modules/uuid/dist/umd/uuid.min.js"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ],
    "resetMocks": true,
    "globalSetup": "./src/global-setup.js"
  },

Answer 1

按照此包的 示例，您可以在

jest.setup.ts

或

jest.setup.js

文件中包含以下内容：

if (
  typeof globalThis.TextEncoder === "undefined" ||
  typeof globalThis.TextDecoder === "undefined"
) {
  const utils = require("util");
  globalThis.TextEncoder = utils.TextEncoder;
  globalThis.TextDecoder = utils.TextDecoder;
  globalThis.Uint8Array = Uint8Array;
}

否则您可以直接安装并导入包。