Jest测试运行时报ReferenceError: SVG is not defined错误如何解决？

@svgdotjs/svg.draggable.js 和 @svgdotjs/svg.filter.js 两个插件的初始化逻辑默认依赖全局作用域下的 SVG 对象，Jest 运行在 Node 环境时默认不会挂载该全局变量，加载插件时找不到对应对象就会抛出引用错误。

• 方案1：直接调整测试文件引入逻辑
  调整导入顺序，先导入 SVG 核心对象并挂载到全局，再导入对应的组件或者插件：

  // 第一步：导入SVG核心
  import { SVG, Container } from '@svgdotjs/svg.js';
  // 第二步：挂载到全局供插件识别
  (globalThis as any).SVG = SVG;
  // 第三步：再导入你的组件
  import YourComponent from './your-component-path';
  

• 方案2：配置Jest全局初始化（多测试场景推荐）
  如果你有多个测试文件都用到了相关组件，可以把全局挂载逻辑放到Jest启动配置中，不用每个测试文件重复编写：

  1. 打开 jest.config.js 配置文件，添加 setupFilesAfterEnv 配置项：

  module.exports = {
    // 其他原有配置保持不变
    setupFilesAfterEnv: ['<rootDir>/src/jest.setup.ts']
  }
  

  2. 在配置中指定的 jest.setup.ts 文件中添加以下代码：

  import { SVG } from '@svgdotjs/svg.js';
  // 提前把SVG挂载到全局
  (globalThis as any).SVG = SVG;
  // 提前引入所有需要的插件
  import '@svgdotjs/svg.draggable.js';
  import '@svgdotjs/svg.filter.js';
  

• 方案3：适配ESM转译（上述方案执行后仍报错时使用）
  部分版本Jest默认不会转译node_modules下的ESM格式包，而@svgdotjs系列包采用ESM规范编写，此时需要在jest.config.js中添加转译豁免配置：

  module.exports = {
    // 其他原有配置保持不变
    transformIgnorePatterns: [
      'node_modules/(?!@svgdotjs/)'
    ]
  }
  

内容的提问来源于stack exchange，提问作者Roman A.