React项目Jest单元测试报SyntaxError: Unexpected token 'export'求助

问题原因 #

报错指向query-string模块的import语句，本质是Jest默认不转译node_modules中的ES模块包，而新版query-string采用纯ES模块输出，导致Jest无法识别其export语法。

具体解决方案 #

1. 修改jest.config.js配置 #

关键是让Jest允许Babel转译query-string模块：

module.exports = {
  setupFilesAfterEnv: ['./setup-jest.js'],
  testEnvironment: 'jsdom',
  // 用babel-jest处理JS/JSX文件
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  // 排除node_modules中除query-string外的包，仅转译query-string
  transformIgnorePatterns: [
    '/node_modules/(?!query-string)/',
  ],
  moduleFileExtensions: ['js', 'jsx'],
  // 若项目有webpack别名，需在这里同步配置
  // moduleNameMapper: {
  //   '^@/(.*)$': '<rootDir>/src/$1',
  // }
};

2. 调整babel.config.js配置 #

确保Babel能正确转译ES模块为Jest兼容的CommonJS：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: { node: 'current' }, // 适配当前Node版本的Jest环境
      modules: 'auto', // 自动根据环境转换模块语法
    }],
    '@babel/preset-react', // 转译React JSX语法
  ],
  plugins: ['@babel/plugin-transform-modules-commonjs'], // 强制转换ES模块为CommonJS
};

3. 检查并安装依赖 #

确保package.json的devDependencies包含以下依赖（版本号可按需调整）：

"devDependencies": {
  "@babel/core": "^7.22.0",
  "@babel/preset-env": "^7.22.0",
  "@babel/preset-react": "^7.22.0",
  "babel-jest": "^29.5.0",
  "jest": "^29.5.0",
  "jest-environment-jsdom": "^29.5.0"
}

若缺失，执行安装命令：

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

4. 重新运行测试 #

执行测试命令验证：

npm test

额外排查点 #

• 若项目使用webpack路径别名，需在jest.config.js的moduleNameMapper中同步配置，避免模块解析错误
• 检查setup-jest.js是否加载了未转译的模块，若有需调整加载顺序或转译对应模块
• 可尝试锁定query-string的兼容版本（如^8.1.0），避免版本差异导致的转译问题

内容的提问来源于stack exchange，提问作者Víctor Smith