React项目测试时Jest导入SVG组件报Unexpected token错误

报错核心原因：Jest运行在Node环境下，默认仅能解析JavaScript代码，不支持webpack等构建工具提供的SVG转React组件的导入能力。直接读取SVG文件时遇到开头的<svg>标签，就会触发Unexpected token '<'语法错误。

操作步骤 #

• 修改package.json中的Jest配置，新增*moduleNameMapper*规则拦截SVG导入，替换为自定义mock模块，修改后的完整配置参考：

"jest": {
    "verbose": true,
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "setupFiles": [
      "<rootDir>/src/setupTests.js"
    ],
    "moduleNameMapper": {
      // 拦截svg导入，可按需扩展其他静态资源规则
      "\\.svg$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(png|jpg|jpeg|gif)$": "<rootDir>/__mocks__/fileMock.js"
    }
  }

• 在项目根目录新建__mocks__文件夹，在文件夹内新建fileMock.js文件，写入兼容现有导入语法的mock逻辑：

// 兼容 import { ReactComponent as bestSeller } from 'xxx.svg' 的具名导入
export const ReactComponent = () => 'MockSVGIcon';
// 兼容默认导入SVG路径的使用场景
export default 'test-file-stub';

• 修复版本不匹配问题。当前使用的babel-jest@24.7.1和jest@26.6.3大版本差异过大，容易引发其他转换异常，安装与Jest大版本一致的babel-jest即可：

npm install --save-dev babel-jest@26.6.3

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