使用Babel env预设的ES6项目：Webpack可编译但Jest无法运行

我之前也碰到过一模一样的情况——Webpack能正常编译跑起来，但Jest一执行就报错，核心问题就是Jest默认会忽略转译node_modules目录下的代码，但如果你的项目依赖了用未转译ES6语法编写的包，再加上Babel env预设没针对Node环境做适配，就会导致Jest无法解析这些代码。下面是具体的解决步骤：

1. 安装必要依赖 #

首先确保你装了Jest和Babel相关的核心工具，没装的话执行：

yarn add --dev jest babel-jest @babel/core @babel/preset-env

2. 配置Babel适配Jest的Node环境 #

Jest是运行在Node.js环境中的，所以你的Babel env预设需要针对当前Node版本做编译配置。可以创建/修改你的Babel配置文件（比如babel.config.json或者.babelrc）：

方式一：统一配置（适合简单项目） #

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current" // 告诉Babel针对当前运行的Node版本编译
      }
    }]
  ]
}

方式二：区分环境（适合Webpack+Jest共存的项目） #

如果你的Webpack需要针对浏览器编译，Jest需要针对Node编译，可以用Babel的env字段做环境区分：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "web": "last 2 versions" // Webpack用这个配置编译浏览器代码
      }
    }]
  ],
  "env": {
    "test": {
      "presets": [
        ["@babel/preset-env", {
          "targets": {
            "node": "current" // Jest运行时用这个Node专属配置
          }
        }]
      ]
    }
  }
}

3. 配置Jest处理需要转译的node_modules包 #

默认情况下Jest会跳过所有node_modules的转译，所以如果有某个依赖包是用ES6写的（比如一些小众库或者未打包的组件），你需要让Jest例外处理它。

方法一：在package.json中添加Jest配置 #

{
  // ... 你原有的package.json内容
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest" // 告诉Jest用babel-jest处理JS/JSX文件
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!your-es6-dependency|another-es6-dep)" // 负向预查：除了这些包，其他node_modules都忽略转译
    ]
  }
}

方法二：单独创建jest.config.js文件 #

如果你的Jest配置比较复杂，建议单独建文件：

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },
  transformIgnorePatterns: [
    '/node_modules/(?!your-es6-dependency|another-es6-dep)',
  ],
};

4. 验证配置 #

最后修改你的package.json中的scripts，添加Jest执行命令：

{
  "scripts": {
    // ... 原有的build等命令
    "test": "jest"
  }
}

执行yarn test，应该就能正常跑起来了！

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