React项目Jest测试报错：SVGPathElement未定义的解决方案咨询

你遇到的ReferenceError: SVGPathElement is not defined问题，本质是Jest默认使用的jsdom测试环境在旧版本中未提供完整的SVG内置类支持。以下是无需手动逐个定义这些类的解决方案：

方案1：升级Jest/jsdom到支持完整SVG的版本 #

新版jsdom（v16及以上）已经原生支持所有SVG相关内置类（包括SVGPathElement、SVGPolylineElement等）。根据你的项目类型选择升级方式：

• 独立使用Jest的项目：

npm install jest@latest jsdom@latest --save-dev

• Create React App项目：直接升级react-scripts（新版已包含支持SVG的jsdom）：

npm install react-scripts@latest --save

升级完成后，Jest测试环境会自动提供这些SVG类，无需额外配置。

方案2：用svgdom库批量注入SVG类 #

如果无法升级依赖，可借助svgdom库快速为测试环境添加完整的SVG支持：

1. 安装依赖：

npm install svgdom --save-dev

2. 创建测试初始化文件（如src/setupTests.js），写入以下代码：

import { createWindow } from 'svgdom';

const svgWindow = createWindow();
// 将svgdom提供的window属性挂载到全局作用域
Object.assign(global, svgWindow);
global.document = svgWindow.document;

3. 在Jest配置文件（jest.config.js）中指定该初始化文件：

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  // 保留其他已有配置
};

这样所有SVG相关的内置类会被自动注入到测试环境，和浏览器环境保持一致。

方案3：自定义Jest测试环境（按需控制） #

如果需要精细控制注入的SVG类，可以自定义Jest测试环境：

1. 创建自定义环境文件（如jest-environment-svg.js）：

const JSDOMEnvironment = require('jest-environment-jsdom').default;

class SVGEnabledEnvironment extends JSDOMEnvironment {
  constructor(config, context) {
    super(config, context);
    // 注入所需的SVG类
    this.global.SVGPathElement = this.window.SVGPathElement;
    this.global.SVGPolylineElement = this.window.SVGPolylineElement;
    // 可按需添加其他SVG类
  }
}

module.exports = SVGEnabledEnvironment;

2. 在Jest配置中指定该环境：

module.exports = {
  testEnvironment: '<rootDir>/jest-environment-svg.js',
  // 保留其他已有配置
};

内容的提问来源于stack exchange，提问作者Mohamad Mehdi Rajaei