如何让Jest识别import语句中的Webpack Loader？

这个问题我之前也碰到过，核心原因很简单：Webpack支持loader!module这种inline loader语法，但Jest作为测试运行器，根本不认识这种写法——它会把整个babel-loader!animateplus当成模块名称去查找，自然找不到对应的模块文件，所以才会报错。

下面给你两个可行的解决思路，优先推荐第一种：

1. 移除Inline Loader，改用Webpack配置统一处理 #

这是最规范的做法，能避免代码和Webpack的强耦合：

• 先把你的导入语句改成常规形式：

  import animate from 'animateplus';
  

• 然后在你的webpack.config.js里添加对应的loader规则，让Webpack自动用babel-loader处理animateplus模块：

  module.exports = {
    // ...其他配置
    module: {
      rules: [
        // 匹配animateplus模块，用babel-loader处理
        {
          test: /animateplus/,
          use: 'babel-loader'
        },
        // 如果是所有JS文件都需要babel转译，也可以写成：
        // {
        //   test: /\.js$/,
        //   exclude: /node_modules/,
        //   use: 'babel-loader'
        // }
      ]
    }
  };
  

这样Webpack打包时依然会用babel-loader处理该模块，同时Jest导入时也能正常识别模块。

2. 给Jest配置模块名映射（适合必须保留Inline Loader的场景） #

如果因为某些特殊原因必须保留inline loader写法，可以通过Jest的moduleNameMapper配置来做映射：

• 在你的jest.config.js里添加如下配置：

  module.exports = {
    // ...其他配置
    moduleNameMapper: {
      // 把带loader的模块路径映射到实际模块
      '^babel-loader!animateplus$': 'animateplus'
    }
  };
  

Jest在解析import animate from 'babel-loader!animateplus';时，会自动把babel-loader!animateplus替换成animateplus去查找模块，这样就能解决报错问题。

额外注意：确保Jest能处理Babel转译 #

不管用哪种方法，都要保证Jest能正确转译ES模块语法。你需要在项目根目录的.babelrc或者babel.config.js里配置合适的preset，比如：

{
  "presets": ["@babel/preset-env"]
}

同时确保已经安装了@babel/core、@babel/preset-env、babel-jest这些依赖包。

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