如何解决Jest测试中‘未启用实验性语法jsx’的报错？

问题场景 #

在React-TypeScript项目中使用Jest结合React Testing Library执行单元测试时，测试包含.svg格式图片的.tsx文件，运行命令 npm run test <filename.spec.tsx> 触发如下报错：

Support for experimental syntax 'jsx' isn't currently enabled

当前配置文件 #

jest.config.ts #

export default {
  preset: '../../../jest.preset.js',
  transform: {
    '^.+\\.[tj]sx?$': 'babel-jest',
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  coverageDirectory: '../../../coverage/libs/shared/dashboard-widgets',
};

package.json devDependencies 片段 #

...
"devDependencies": {
    "@babel/core": "7.12.13",
    "@babel/plugin-transform-modules-commonjs": "^7.21.2",
    "@babel/preset-flow": "^7.18.6",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.0",
...

解决方案 #

1. 完善Babel配置 #

确保项目根目录存在.babelrc或babel.config.js，并正确配置React和TypeScript预设，示例配置如下：

{
  "presets": [
    "@babel/preset-typescript",
    ["@babel/preset-react", { "runtime": "automatic" }],
    "@babel/preset-flow"
  ],
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

2. 配置Jest处理SVG文件 #

Jest默认无法解析SVG文件，需通过moduleNameMapper配置mock SVG：
在jest.config.ts中添加：

export default {
  // 原有配置...
  moduleNameMapper: {
    '\\.svg$': '<rootDir>/__mocks__/svgMock.js'
  }
};

然后在项目中创建__mocks__/svgMock.js文件，内容如下：

module.exports = 'SVG_MOCK';
// 或返回React组件：
// module.exports = () => <span>SVG Mock</span>;

3. 统一Babel版本 #

当前@babel/core版本（7.12.13）与其他预设版本（7.18+）差距较大，可能存在兼容性问题，建议升级@babel/core到与预设相近的版本：

npm install @babel/core@^7.21.0 --save-dev

4. 验证transform配置 #

确保jest.config.ts中的transform规则正确覆盖.tsx文件，当前配置'^.+\\.[tj]sx?$': 'babel-jest'是正确的，无需修改，但需保证Babel能正确处理该类型文件。

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