Node v20.3.1+Jest29.7.0运行测试报extend未定义类型错误求解

问题背景 #

使用Node.js v20.3.1和Jest 29.7.0进行React组件单元测试，运行Login组件测试用例时触发错误：TypeError: Cannot read properties of undefined (reading 'extend')，错误指向setupTests.js中引入的@testing-library/jest-dom/jest-globals。

环境信息 #

• Node.js: v20.3.1
• Jest: 29.7.0

相关配置与代码 #

jest.config.js #

module.exports = {
  roots: ["<rootDir>/src/__test__"],
 
  transform: {
    "^.+\.(js|jsx)$": "babel-jest",
  },

 
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],

  testMatch: ["**/*.test.(js|jsx)"],
  // testRegex: "(/__test__/.*|(\.|/)(test|spec))\.jsx?$",
  moduleFileExtensions: ["js", "jsx", "tsx", "ts", "json", "node"],
  snapshotSerializers: ["enzyme-to-json/serializer"],
  setupFiles: ["<rootDir>/src/setupTests.js"],
  reporters: ["default", "jest-junit"],

  // 无需测试icons文件夹中的静态JSX，排除它们
  coveragePathIgnorePatterns: ["node_modules", "src/lang"],
  moduleNameMapper: {
    ".+\/(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
      "<rootDir>/src/__mocks__/files",
  },
};

setupTests.js #

import "@testing-library/jest-dom/jest-globals";
import "@testing-library/jest-dom/extend-expect";
import "@testing-library/jest-dom";

Login组件测试用例 #

import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, screen, fireEvent } from "@testing-library/react";
import { Login } from "../pages/Login/Login";

describe("Testing Login Component", () => {
  it("renders without errors", () => {
    render(<Login />);
    // 检查组件是否无错误渲染
    expect(screen.getByText("Login")).toBeInTheDocument();
  });
});

错误信息 #

FAIL  src/__test__/Login.test.js
● Test suite failed to run

TypeError: Cannot read properties of undefined (reading 'extend')

  1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
  2 | // allows you to do things like:
> 3 | // expect(element).toHaveTextContent(/react/i);
    | ^
  4 | // learn more: https://github.com/testing-library/jest-dom
  5 | // In your own jest-setup.js
  6 | import "@testing-library/jest-dom/jest-globals";

  at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/jest-globals.js:18:16)
  at Object.<anonymous> (src/setupTests.js:3:1)

解决方法 #

1. 修复Jest配置中的重复初始化 #

jest.config.js中同时配置了setupFiles和setupFilesAfterEnv指向同一个setupTests.js，会导致jest-dom在Jest环境未完全初始化时加载，引发错误。删除setupFiles配置项，只保留setupFilesAfterEnv：

// 移除这一行
// setupFiles: ["<rootDir>/src/setupTests.js"],

2. 简化setupTests.js的导入 #

@testing-library/jest-dom已包含jest-globals和extend-expect的全部功能，重复导入会引发冲突。修改setupTests.js为：

import "@testing-library/jest-dom";

3. 移除测试用例中的重复导入 #

测试文件无需重复导入@testing-library/jest-dom/extend-expect，setupTests.js已全局注入所有匹配器，直接删除该行即可。

4. 确保jest-dom版本与Jest兼容 #

执行以下命令安装与Jest 29.x兼容的最新版jest-dom：

npm install @testing-library/jest-dom@latest --save-dev
# 或使用yarn
yarn add @testing-library/jest-dom@latest --dev

修改后的代码示例 #

修改后的jest.config.js #

module.exports = {
  roots: ["<rootDir>/src/__test__"],
 
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest",
  },

 
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],

  testMatch: ["**/*.test.(js|jsx)"],
  moduleFileExtensions: ["js", "jsx", "tsx", "ts", "json", "node"],
  snapshotSerializers: ["enzyme-to-json/serializer"],
  reporters: ["default", "jest-junit"],

  coveragePathIgnorePatterns: ["node_modules", "src/lang"],
  moduleNameMapper: {
    ".+\\/(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
      "<rootDir>/src/__mocks__/files",
  },
};

修改后的setupTests.js #

import "@testing-library/jest-dom";

修改后的测试用例 #

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

describe("Testing Login Component", () => {
  it("renders without errors", () => {
    render(<Login />);
    expect(screen.getByText("Login")).toBeInTheDocument();
  });
});

内容的提问来源于stack exchange，提问作者Mohammad Sohail