Jest框架导入jQuery时出现“Unexpected identifier”错误如何解决？

我之前也碰到过一模一样的问题，折腾了好一会儿才搞定。既然你已经确认了路径和node_modules没问题，那咱们可以从这几个方向排查：

1. 调整Jest的全局挂载方式，改用setupFilesAfterEnv #

直接在Jest配置文件里写导入代码容易出问题，因为Jest初始化的时机不对。建议把全局挂载jQuery的逻辑单独放在一个setup文件里：

• 新建一个jest.setup.js文件，内容如下：

  import $ from 'jquery';
  global.$ = global.jQuery = $;
  

• 在你的jest.config.js里配置这个文件：

  module.exports = {
    // 其他配置...
    setupFilesAfterEnv: ['./jest.setup.js']
  };
  

这样Jest会在测试环境准备好之后再执行挂载逻辑，避免初始化顺序导致的错误。

2. 尝试用require替代import导入jQuery #

有些版本的jQuery对ES模块的支持不算完美，换成CommonJS的导入方式可能会解决问题：
把setup文件里的代码改成：

const $ = require('jquery');
global.$ = global.jQuery = $;

如果你的项目是ES模块类型（package.json里有"type": "module"），可以在jest.config.js里加上module.exports = { moduleFileExtensions: ['js', 'json'], transform: {} };，或者暂时去掉"type": "module"试试。

3. 检查Babel转译配置 #

Jest依赖Babel来处理ES模块，如果你的Babel配置没覆盖到测试文件的转译，就会出现语法错误：

• 确保安装了@babel/preset-env和babel-jest：

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

• 在.babelrc或babel.config.js里添加如下配置：

  {
    "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
  }
  

• 同时在jest.config.js里指定transform：

  module.exports = {
    transform: {
      '^.+\\.jsx?$': 'babel-jest'
    }
  };
  

这样能确保Jest用Babel转译所有JS文件，包括jQuery的模块代码。

4. 检查jQuery版本兼容性 #

如果以上方法都不行，可能是你用的jQuery版本和Jest版本不兼容。比如某些新版本的jQuery默认输出ES模块，而旧版Jest对ES模块的支持有限。可以试试降级到jQuery 3.x的稳定版本（比如3.6.4），然后再测试。

按照这些步骤一步步试，应该能解决这个错误。

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