配置Babel在Jest测试时编译node_modules中的指定包

我之前也碰到过一模一样的情况——Webpack里配置好了能编译node_modules里的特殊模块，但Jest跑测试时就报错，因为Jest不依赖Webpack，得单独给Babel和Jest做适配配置。

核心问题拆解 #

Babel默认会跳过node_modules下所有文件的编译，Jest也默认不对node_modules里的文件做Babel转换，所以我们得同时修改这两个工具的配置，让它们都处理special-module。

第一步：修改Babel配置（.babelrc 或 babel.config.json） #

不要用ignore字段（那是用来排除文件的），反而要调整exclude规则，让Babel不排除node_modules/special-module。用负向预查的正则就能实现：

如果是.babelrc：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"], // 你的预设，按需调整
  "exclude": [
    /node_modules\/(?!special-module)/
  ]
}

如果是项目级的babel.config.json（更推荐，因为它会作用于所有文件包括node_modules内的）：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "exclude": [/node_modules\/(?!special-module)/]
}

这个正则的意思是：排除node_modules下除了special-module之外的所有内容，相当于给这个模块开了“编译白名单”。

第二步：修改Jest配置 #

Jest默认会忽略node_modules里的文件，不进行转换，所以得在Jest配置里把special-module从忽略列表中移除。

如果是单独的jest.config.js：

module.exports = {
  // 其他配置...
  transformIgnorePatterns: [
    "/node_modules/(?!special-module)/"
  ]
};

如果是在package.json里的Jest字段：

{
  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!special-module)/"
    ]
  }
}

验证一下 #

配置完之后，重新跑Jest测试，应该就能正常编译special-module里的JSX代码了。如果还是有问题，可以检查一下Babel预设是否包含了@babel/preset-react（用来编译JSX），确保没有遗漏必要的预设。

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