React项目配置Jest报错：无法在模块外使用import语句

1. 安装必要依赖 #

执行以下命令安装Babel转译工具及Jest相关依赖：

npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react jest-environment-jsdom

2. 配置babel.config.js #

确保Babel能正确转译ES模块和React语法，修改配置文件如下：

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-react'
  ]
};

3. 调整jest.config.cjs #

在Jest配置中指定转译规则、运行环境及模块解析逻辑：

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
  },
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  moduleNameMapper: {
    // 同步Vite中的路径别名（比如@），根据实际项目配置调整
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'] // 可选，用于配置React Testing Library等工具
};

4. 检查package.json配置 #

• 若package.json中设置了"type": "module"，确保Jest配置文件后缀为.cjs（你当前已满足该要求）。
• 配置测试命令：

{
  "scripts": {
    "test": "jest"
  }
}

5. 测试用例示例 #

确保测试用例的导入语法规范，示例如下：

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

test('组件渲染正常', () => {
  render(<MyComponent />);
  expect(screen.getByText('Hello')).toBeInTheDocument();
});

常见问题排查 #

• 若仍存在未转译的第三方依赖报错，可在jest.config.cjs中添加transformIgnorePatterns排除特定包：

transformIgnorePatterns: ['/node_modules/(?!(需要转译的包名)/)']

• 确保测试文件后缀为.test.jsx或.spec.jsx，保证Jest能正确识别。

内容的提问来源于stack exchange，提问作者sp-sathish