Jest 测试套件失败并显示消息“未定义自我”

Question

我最近将 typescript 版本从 3.7 升级到 4.2 并且测试代码在导入模块时存在一些问题，因此所有测试套件甚至在开始之前就失败了。

我在 typescript 中使用 jest，但测试套件无法运行，原因是：

● Test suite failed to run

ReferenceError: self is not defined

   6 | import "whatwg-fetch"; // Polyfill to use fetch (and Headers, Request) inside of node
   7 |
>  8 | import "mutationobserver-shim"; // Polyfill for the MutationObserver class
     | ^
   9 |
  10 | import memoize from "memoize-one";
  11 | // import "isomorphic-fetch";

  at node_modules/whatwg-fetch/dist/fetch.umd.js:8:40
  at Object.<anonymous>.support.searchParams (node_modules/whatwg-fetch/dist/fetch.umd.js:2:66)
  at Object.<anonymous> (node_modules/whatwg-fetch/dist/fetch.umd.js:5:2)
  at Object.<anonymous> (src/test/setup.ts:8:1)

开发依赖项如下所示：

package.json

"devDependencies": {
    "@jest/types": "^27.0.6",
    "@svgr/webpack": "^5.4.0",
    "@types/base64-js": "^1.3.0",
    "@types/content-disposition": "^0.5.2",
    "@types/core-js": "^2.5.3",
    "@types/deep-equal": "1.0.1",
    "@types/detect-it": "^2.1.0",
    "@types/draft-js": "0.11.1",
    "@types/enzyme": "^3.9.1",
    "@types/enzyme-adapter-react-16": "^1.0.5",
    "@types/enzyme-to-json": "^1.5.3",
    "@types/htmlparser2": "3.10.0",
    "@types/isomorphic-fetch": "^0.0.35",
    "@types/jest": "^26.0.24",
    "@types/js-beautify": "^1.8.2",
    "@types/jsdom": "^12.2.3",
    "@types/jsonwebtoken": "^8.3.2",
    "@types/lodash": "^4.14.160",
    "@types/memoize-one": "5.1.2",
    "@types/node": "^10.17.28",
    "@types/query-string": "^6.3.0",
    "@types/react": "*",
    "@types/react-dom": "16.9.10",
    "@types/react-html-parser": "^2.0.1",
    "@types/react-redux": "^7.1.7",
    "@types/recharts": "1.8.14",
    "@types/redux-mock-store": "^1.0.2",
    "@types/showdown": "1.7.3",
    "@types/smoothscroll-polyfill": "0.3.1",
    "@types/uuid": "3.4.4",
    "@types/webpack": "^4.41.21",
    "@types/webpack-dev-server": "^3.1.4",
    "@types/whatwg-fetch": "0.0.33",
    "copy-webpack-plugin": "^5.1.1",
    "cssnano": "^4.1.10",
    "enzyme": "3.9.0",
    "enzyme-adapter-react-16": "^1.15.3",
    "enzyme-to-json": "3.3.5",
    "escape-string-regexp": "2.0.0",
    "git-revision-webpack-plugin": "3.0.3",
    "hasha": "5.0.0",
    "html-webpack-plugin": "^3.2.0",
    "isomorphic-fetch": "^3.0.0",
    "jest": "^27.0.6",
    "jest-date-mock": "^1.0.8",
    "jest-junit-reporter": "^1.1.0",
    "jest-localstorage-mock": "^2.4.3",
    "js-beautify": "^1.13.0",
    "jsdom": "16.7.0",
    "jsdom-global": "3.0.2",
    "mutationobserver-shim": "^0.3.7",
    "ncp": "^2.0.0",
    "npm-run-all": "4.1.5",
    "postcss-preset-env": "^6.6.0",
    "preload-webpack-plugin": "^3.0.0-beta.4",
    "react-test-renderer": "17.0.2",
    "redux-mock-store": "^1.5.4",
    "redux-saga-test-plan": "^4.0.0-rc.3",
    "reflect-metadata": "0.1.13",
    "rimraf": "^2.6.3",
    "semver-extra": "2.0.1",
    "stylus": "^0.54.8",
    "testcafe": "^1.14.2",
    "testcafe-react-selectors": "^3.1.0",
    "testcafe-reporter-jenkins": "^1.0.1",
    "ts-jest": "^27.0.4",
    "ts-loader": "^9.2.5",
    "tslint": "^5.20.1",
    "typescript": "4.2.3",
    "url-pattern": "^1.0.3",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.10.1",
    "write-file-atomic": "2.4.1"
}

测试配置时出现错误：

jest.config.js

setupFiles: [
"jest-localstorage-mock",
"./src/test/setup.ts"],

我运行以下设置脚本，它会导入导致错误的库：

setup.ts

import "core-js";
import "whatwg-fetch"; // Polyfill to use fetch (and Headers, Request) inside of node
import "mutationobserver-shim"; // Polyfill for the MutationObserver class
import memoize from "memoize-one";

我不知道这个错误的原因和来源。在 VS 代码中，我得到了 npm 安装 mutationobserver-shim 类型的建议，但似乎没有。

Answer 1

我使用了错误的测试环境，解决方法是这一行：

jest.config.js

testEnvironment: "jsdom"

来源：https://jestjs.io/docs/configuration#testenvironment-string