使用vite-plugin-svgr生成的SVG组件在Jest测试中渲染失败求助

数据老陈

2026-6-25

解决Vite + vite-plugin-svgr下Jest测试SVG组件导入的问题

问题根源

Jest 默认不会解析模块导入中的查询参数（比如 ?react），直接在 transform 中配置的正则无法匹配到 *.svg?react 这类导入，导致模块找不到；另外，即使匹配到，若没有正确将SVG转为React组件，也会出现「type无效，预期字符串/类/函数，实际得到object」的错误。

可行解决方案

方案一：用 `moduleNameMapper` 配合 `jest-transformer-svg`

修改你的 jest.config.js，通过 moduleNameMapper 先处理带 ?react 的SVG导入，将其映射到 jest-transformer-svg：

module.exports = {
  // 保留你已有的其他配置（比如testEnvironment、transformIgnorePatterns等）
  moduleNameMapper: {
    // 处理带?react后缀的SVG导入
    '^.+\\.svg\\?react$': 'jest-transformer-svg',
    // 可同时处理普通SVG（如果有的话）
    '^.+\\.svg$': '<rootDir>/__mocks__/svgMock.js'
  },
  transform: {
    // 确保JS/TSX文件的转译配置正常
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
  }
};

方案二：自定义SVG组件Mock（更灵活可控）

如果不想依赖第三方transformer，可以自己写一个Mock组件：

在项目根目录创建 __mocks__/svgReact.js 文件：

import React from 'react';

// 返回一个简单的SVG组件，可添加testid方便测试
export default function MockSvgReactComponent(props) {
  return <svg {...props} data-testid="mock-svg-component" />;
}

修改 jest.config.js 的 moduleNameMapper：

module.exports = {
  // 其他配置...
  moduleNameMapper: {
    '^.+\\.svg\\?react$': '<rootDir>/__mocks__/svgReact.js'
  }
};

额外配置（TypeScript项目）

如果是TS项目，需要在 src/types 目录下创建 svg.d.ts 补充类型声明，避免TS报错：

declare module '*.svg?react' {
  import React from 'react';
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}