React项目使用Jest测试时出现SVG模块找不到的错误求助

1. 修复绝对路径的Jest识别问题 #

你在src/assets.js里用了根路径开头的导入/assets/icons/AscendingIcon.svg，这种绝对路径依赖项目构建工具的路径别名配置，但Jest默认不识别该配置，需要单独添加路径映射：

• 在项目根目录新建或修改jest.config.js，添加moduleNameMapper配置：

module.exports = {
  // 保留其他已有配置
  moduleNameMapper: {
    '^/assets/(.*)$': '<rootDir>/assets/$1',
  },
};

<rootDir>是Jest内置变量，指向项目根目录，确保你的assets文件夹确实在根目录下（对应你给出的/assets/icons/AscendingIcon.svg路径）。

2. 让Jest支持SVG模块解析 #

Jest本身无法处理SVG这类非JS模块，有两种解决方式：

方案一：用Mock替代SVG文件 #

在jest.config.js的moduleNameMapper里补充SVG的mock规则：

module.exports = {
  // 其他配置
  moduleNameMapper: {
    '^/assets/(.*)$': '<rootDir>/assets/$1',
    '\\.svg$': '<rootDir>/__mocks__/svgMock.js',
  },
};

然后在项目根目录新建__mocks__/svgMock.js，内容根据你的SVG使用方式选择：

// 如果只是导入资源路径，返回字符串即可
module.exports = 'SVG_MOCK_PATH';

// 如果是把SVG作为React组件导入（比如用@svgr/webpack），返回空组件
// module.exports = () => null;

方案二：用转换器处理SVG #

如果项目用@svgr/webpack将SVG转为React组件，可安装转换器处理：

• 安装依赖：npm install jest-transform-stub --save-dev
• 在jest.config.js里配置transform：

module.exports = {
  // 其他配置
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.svg$': 'jest-transform-stub',
  },
  moduleNameMapper: {
    '^/assets/(.*)$': '<rootDir>/assets/$1',
  },
};

3. 验证目录结构匹配 #

确认你的项目目录结构符合预期，正确结构示例：

项目根目录
├── assets
│   └── icons
│       └── AscendingIcon.svg
├── src
│   └── assets.js
└── jest.config.js

如果assets文件夹实际在src目录下，需把路径映射改为'^/assets/(.*)$': '<rootDir>/src/assets/$1'，同时调整src/assets.js里的导入路径。

4. 清除Jest缓存 #

缓存可能导致配置不生效，运行命令清除缓存：

jest --clearCache

完成以上步骤后重新运行测试，即可解决模块找不到的问题。

内容的提问来源于stack exchange，提问作者nidhi sharma