[英]React/TypeScript testing failed. "Consider using the "jsdom" test environment."
我有一個非常簡單的 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
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
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"
}
}
為了使用 jsdom 你需要添加
testEnvironment: 'jsdom',
到你的jest.config.js
編輯:您可能還需要將其添加為依賴項。
testEnvironment: 'jsdom'
添加到jest.config.js
。 這解決了 jsdom 錯誤。jest-environment-jsdom
作為開發依賴項(無論出於何種原因,添加jsdom
沒有幫助)。 這解決了全局錯誤。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.