配置Jest+Babel进行React组件测试时遇ES模块导入报错求助

1. 确保依赖安装完整 #

先确认已安装必要的Babel和Jest相关包：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-jest jest react-test-renderer

2. 调整Babel配置 #

修改你的babel.config.json，添加modules选项明确转译目标为CommonJS（适配Jest默认模块系统），同时保留React转译规则：

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        },
        "modules": "commonjs"
      }
    ],
    "@babel/preset-react"
  ]
}

3. 配置Jest转译规则 #

在项目根目录创建jest.config.js，指定Babel处理JS/JSX文件，并设置React测试所需的浏览器环境：

module.exports = {
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest'
  },
  moduleFileExtensions: ['js', 'jsx'],
  testEnvironment: 'jsdom',
  transformIgnorePatterns: ['/node_modules/(?!@babel|react)']
};

4. 处理"type": "module"的冲突问题 #

如果你必须保留package.json中的"type": "module"，需要额外配置Jest支持ESM：

• 将jest.config.js重命名为jest.config.mjs，并修改为ESM格式：

export default {
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest'
  },
  moduleFileExtensions: ['js', 'jsx'],
  testEnvironment: 'jsdom',
  extensionsToTreatAsEsm: ['.js', '.jsx'],
  transformIgnorePatterns: ['/node_modules/(?!@babel|react)']
};

• 在package.json的scripts中指定Jest配置文件：

"scripts": {
  "test": "jest --config jest.config.mjs"
}

验证测试运行 #

创建一个简单的React组件测试文件（比如App.test.jsx），确认报错消失：

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders app component', () => {
  render(<App />);
  expect(screen.getByText(/hello/i)).toBeInTheDocument();
});

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