Vite+React+Ts环境下Jest无法识别.svg?react模块的问题

核心原因 #

Jest 默认不解析模块路径中的 URL 查询参数（比如?react后缀），而vite-plugin-svgr通过该后缀将 SVG 转换为 React 组件，导致 Jest 无法找到对应的模块。

解决方案 #

1. 配置 Jest 的模块映射（关键步骤） #

修改jest.config.js中的moduleNameMapper，添加对带?react后缀 SVG 文件的匹配规则，将其映射到 mock 文件：

module.exports = {
  // 其他配置...
  moduleNameMapper: {
    // 专门匹配带?react的SVG文件
    '^.+\\.svg\\?react$': '<rootDir>/src/__mocks__/svg-react.mock.js',
    // 可选：处理普通SVG（如果项目中有不带?react的SVG导入）
    '^.+\\.(svg|png|jpg|jpeg)$': '<rootDir>/src/__mocks__/file.mock.js',
  },
};

2. 创建对应的 SVG Mock 文件 #

在src/__mocks__目录下创建svg-react.mock.js，导出一个简易的 React 组件作为占位：

import React from 'react';

// 模拟SVG组件，可根据测试需求调整
const MockSvgReactComponent = () => <span data-testid="mock-svg">Mock SVG</span>;

export default MockSvgReactComponent;

如果需要处理普通 SVG（不带?react），可创建file.mock.js：

module.exports = 'mock-file-path';

3. 确保 TypeScript 类型支持 #

在项目的vite-env.d.ts或自定义类型文件中，添加*.svg?react的类型定义（若未通过vite-plugin-svgr自动引入）：

/// <reference types="vite-plugin-svgr/client" />

// 或手动定义：
declare module '*.svg?react' {
  import React from 'react';
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

4. 验证配置 #

重新运行 Jest 测试，确认Cannot find module './brand.svg?react'错误消失。

补充说明 #

CRA 内部已集成了对svgr的 Jest 适配逻辑，因此无需额外配置；而 Vite + Jest 组合需要手动处理 URL 查询参数的模块解析规则，这是两者的核心差异点。

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