Jest能否处理带问号的导入？SVG?url导入配置失效求助

架构老林

2026-6-27

解决Jest中SVG?url导入的模块找不到问题

你遇到的问题是Jest无法识别带?url查询参数的SVG导入，原因是Jest默认会把查询参数当作模块名称的一部分，而你之前的transform正则没有正确匹配这种格式。下面是两种可行的解决方法：

方法一：使用moduleNameMapper映射

moduleNameMapper是Jest专门用来处理模块路径映射的配置，比transform更适合处理带查询参数的模块：

确保已经安装jest-transform-stub：

npm install jest-transform-stub --save-dev

修改jest.config.ts：

export default {
  // 保留你原有的其他配置（比如testEnvironment、roots等）
  moduleNameMapper: {
    // 匹配所有带?url后缀的SVG文件
    '\\.svg\\?url$': 'jest-transform-stub',
    // 其他静态资源的映射可以统一放在这里
    '\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },
  // 确保JS/TS文件的正常转换
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
};

方法二：修正transform的正则表达式

如果你更倾向于用transform处理，需要调整正则来准确匹配带?url的SVG：

修改jest.config.ts中的transform规则：

export default {
  // 其他配置...
  transform: {
    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    // 单独匹配带?url的SVG
    '^.+\\.svg\\?url$': 'jest-transform-stub',
    // JS/TS文件转换
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
};