React项目Jest测试报错：JSX语法未启用及SVG导入问题

问题背景 #

在React项目中运行Jest测试渲染组件时，先后遇到两个报错：

1. 初始报错：Support for the experimental syntax 'jsx' isn't currently enabled，报错指向测试文件中的<Login/>语法，尽管已配置@babel/preset-react但无效。
2. 添加.babelrc配置["@babel/preset-env", "@babel/preset-react"]后，出现SVG导入报错：SyntaxError: Unexpected token '<'，指向SVG导入语句。

解决方案 #

1. 修复JSX语法支持问题 #

你的babel.config.js存在两处关键错误，导致JSX转换失效：

• presets数组嵌套错误：@babel/preset-env和@babel/preset-react被包裹在同一个子数组中，使得@babel/preset-react未被正确识别为独立预设。
• plugins重复定义：后面的plugins数组覆盖了前面的配置，且手动添加的@babel/plugin-transform-react-jsx与@babel/preset-react冲突（后者已包含JSX转换逻辑）。

修正后的babel.config.js：

module.exports = {
  presets: [
    [
      "@babel/preset-env", 
      {
        targets: {
          node: "current"
        }
      }
    ],
    "@babel/preset-react" // 作为独立预设项配置
  ],
  plugins: [
    [
      "@babel/plugin-transform-runtime", 
      {
        regenerator: true
      }
    ],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-syntax-dynamic-import"
  ]
};

同时删除手动添加的.babelrc文件，避免与babel.config.js的配置冲突，保持项目Babel配置的统一性。

2. 修复SVG导入报错问题 #

Jest默认无法解析SVG等静态资源文件，可通过以下两种方案解决：

方案一：Mock SVG文件

在jest.config.js中添加moduleNameMapper配置，将SVG导入映射到mock文件：

module.exports = {
  coverageProvider: "v8",
  setupFiles: [
    "./jest.setup.js"
  ],
  testEnvironment: "jsdom",
  moduleNameMapper: {
    "\\.(svg)$": "<rootDir>/__mocks__/svgMock.js"
  }
};

在项目根目录创建__mocks__/svgMock.js文件，内容如下：

module.exports = "SVG_MOCK";

方案二：使用转换器处理静态资源

先安装依赖：

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

然后修改jest.config.js，添加transform配置：

module.exports = {
  coverageProvider: "v8",
  setupFiles: [
    "./jest.setup.js"
  ],
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest",
    "^.+\\.(svg|png|jpg|gif)$": "jest-transform-stub"
  }
};

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