Vite+React项目中Jest执行测试遇语法错误求助

问题原因 #

query-string目前是纯ES模块，而Jest默认会将第三方模块当作CommonJS处理，不会转译它们的ES语法，因此触发了"Cannot use import statement outside a module"错误。

解决步骤 #

1. 安装必要的Babel依赖 #

首先安装Babel相关工具，用于转译ES模块语法：

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

2. 创建Babel配置文件 #

在项目根目录新建babel.config.js，写入以下配置：

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

3. 配置Jest指定转译目标模块 #

在项目根目录新建jest.config.js，添加规则让Jest转译query-string：

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest'
  },
  transformIgnorePatterns: [
    // 只对query-string进行转译，其他node_modules模块保持默认处理
    '/node_modules/(?!query-string)/'
  ]
};

4. 验证测试命令 #

你的package.json测试命令可保持不变：

"test": "jest --watchAll --detectOpenHandles"

重新运行测试后，Jest就能正常解析query-string的import语句了。

如果问题仍存在，可以排查：

• 确认query-string版本为最新，或确实是ES模块格式
• 检查Jest版本是否为28及以上，确保兼容性

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