使用绝对路径时Jest测试失败，无法加载SVG图片

问题根源 #

你遇到的核心问题是Jest的SVG文件处理配置逻辑错误，混淆了moduleNameMapper和transform两个配置项的作用：

• 你把jest-svg-transformer放在了moduleNameMapper中，但这个配置项仅用于路径别名映射，而非处理非JS/TS文件的转换逻辑。
• 使用绝对路径别名引入SVG时，Jest会先解析别名得到真实文件路径，但因为没有正确配置SVG转换器，导致无法解析该文件，测试失败；相对路径能正常工作，是因为Jest处理相对路径时触发了隐式的默认文件处理逻辑。

修复步骤 #

1. 调整Jest配置，修正SVG处理逻辑 #

将SVG的转换规则从moduleNameMapper移到transform配置项中——这是Jest指定非JS/TS文件转换器的正确位置：

module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@api(.*)$': '<rootDir>/src/api$1',
    '^@assets(.*)$': '<rootDir>/src/assets$1',
    '^@components(.*)$': '<rootDir>/src/components$1',
    '^@hooks(.*)$': '<rootDir>/src/hooks$1',
    '^@interfaces(.*)$': '<rootDir>/src/interfaces$1',
    '^@layouts(.*)$': '<rootDir>/src/layouts$1',
    '^@pages(.*)$': '<rootDir>/src/pages$1',
    '^@routes(.*)$': '<rootDir>/src/routes$1',
    '^@store(.*)$': '<rootDir>/src/store$1',
    '^@utils(.*)$': '<rootDir>/src/utils$1',
    // 移除原有的SVG规则
  },
  transform: {
    // 配置SVG文件使用jest-svg-transformer转换
    '^.+\\.svg$': 'jest-svg-transformer',
    // 确保JS/TS/JSX/TSX文件使用babel-jest转换
    '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
  },
  setupFilesAfterEnv: ['./jest.setup.ts'],
};

2. 安装必要的Babel依赖（未安装时执行） #

如果项目未配置Babel，需要安装相关依赖让Jest正确转换React和TypeScript代码：

npm install --save-dev babel-jest @babel/preset-env @babel/preset-react @babel/preset-typescript

3. 配置Babel（根目录新建babel.config.js） #

添加Babel预设，确保Jest能正常编译React和TypeScript代码：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
};

可选替代方案：使用jest-transform-stub #

如果不需要对SVG进行复杂转换，仅需让Jest将SVG模块导出为占位路径，可以用jest-transform-stub替代jest-svg-transformer：

1. 安装依赖：npm install --save-dev jest-transform-stub
2. 修改Jest的transform配置：

transform: {
  '^.+\\.svg$': 'jest-transform-stub',
  '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
},

验证 #

修改完成后重新执行测试，使用@assets/images/privacy.svg的绝对路径引入SVG即可正常通过测试。

内容的提问来源于stack exchange，提问作者Ignacio-Diaz