React/TypeScript 测试失败。 “考虑使用‘jsdom’测试环境。”答案

【问题标题】：React/TypeScript testing failed. "Consider using the "jsdom" test environment."React/TypeScript 测试失败。 “考虑使用‘jsdom’测试环境。”
【发布时间】：2022-01-03 18:50:58
【问题描述】：

我有一个非常简单的 React/TypeScript 应用程序，我正在尝试学习如何实现测试。我正在使用 React 测试库和 Jest。这是一个非常简单的产品页面，我只是想测试一下“Welcome to our product page”是否已呈现。

当我运行测试时，我收到以下错误消息：The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment. ReferenceError: document is not defined。

我在 Stack Overflow 上查看了类似问题中的所有解决方案，但没有任何效果。我尝试添加

/**
 * @jest-environment jsdom
*/

到测试文件的顶部，但这只会产生不同的错误消息：ReferenceError: global is not defined。

如果有任何帮助，我将不胜感激。以下是我的代码：

ProductPage.test.tsx

import React from "react";
import { render, screen } from "@testing-library/react";
import ProductPage from "../ProductPage";

describe("<ProductPage />", () => {
  test("should display the product page", () => {
    render(<ProductPage />);
    expect(
        screen.getByText(/Welcome to our product page/)
    ).toBeInTheDocument();
  });
});

jest.config.js

module.exports = {              
  roots: ["<rootDir>/src"],          

  transform: {
    "^.+\\.tsx?$": "ts-jest",
    "^.+\\.svg$": "<rootDir>/svgTransform.js",
    "^.+\\.css$": "<rootDir>/cssTransform.js"
  },       
  
  setupFilesAfterEnv: [        
    "@testing-library/jest-dom/extend-expect"
  ],    

  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",    

  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

package.json

{
  "name": "product-page",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.4.17",
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-typescript": "^7.16.0",
    "@emotion/react": "^11.6.0",
    "@emotion/styled": "^11.6.0",
    "@mui/material": "^5.1.1",
    "@mui/system": "^5.1.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^27.0.2",
    "@types/node": "^16.11.7",
    "@types/react": "^17.0.35",
    "@types/react-dom": "^17.0.11",
    "babel-jest": "^27.3.1",
    "graphql": "^16.0.1",
    "jest": "^27.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "ts-jest": "^27.0.7",
    "typescript": "^4.4.4",
    "web-vitals": "^1.0.1"    
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "test:watch": "jest --watch",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "ts-node": "^10.4.0"
  }
}

【问题讨论】：

标签： javascript reactjs typescript testing jestjs

【解决方案1】：

为了使用jsdom你需要添加

testEnvironment: 'jsdom',

致您的jest.config.js

编辑：您可能还需要将其添加为依赖项。

【讨论】：

抱歉，我是测试新手。我是否只需将其添加到 jest.config.js 文件中的任何位置？对于开发依赖项，我是否只需在package.json 文件中的dependencies 下添加"testEnvironment": "jsdom"？我做了上述两个，但我仍然得到`ReferenceError：未定义全局`
您只需将其添加到您的 jest.config.js 中，例如 testRegex 之后...
我的意思是，也许您在 node_moldules 中的（开发）依赖项中没有 jsdom，在这种情况下，您必须将其添加为 devDependency npm install --dev jsdom 或 yarn add jsdom
谢谢。我将它添加到 jest.config 并将 jsdom 添加为开发依赖项。仍然收到ReferenceError: global is not defined :(
谢谢。安装 jsdom 没有帮助，但安装 jest-environment-jsdom 有帮助。现在我的测试实际运行了。我仍然收到错误消息，但它现在与其他问题有关。

【解决方案2】：

将testEnvironment: 'jsdom' 添加到jest.config.js。这解决了 jsdom 错误。
将jest-environment-jsdom 添加为开发依赖项（无论出于何种原因，添加jsdom 都没有帮助）。这解决了全局错误。

【讨论】：