如何在Jest中使用expose-loader？解析含其导入的文件时报模块未找到错误

这个问题我碰到过好多次了——Jest本身并不识别Webpack的loader语法，它会把expose-loader?PIXI!phaser-ce/build/custom/pixi整个字符串当成完整的模块路径去查找，这自然找不到对应的模块嘛！下面给你几个实用的解决办法：

方案1：用Jest的moduleNameMapper映射loader语法 #

修改你的Jest配置文件（比如jest.config.js），添加正则映射，把带loader的导入转换成实际的模块路径：

module.exports = {
  // 其他配置...
  moduleNameMapper: {
    // 匹配expose-loader语法，提取出实际模块路径
    '^expose-loader\\?([^!]+)!(.+)$': '$2'
  }
};

这个正则会把expose-loader?PIXI!phaser-ce/build/custom/pixi替换成phaser-ce/build/custom/pixi，Jest就能正确找到对应的模块了。

方案2：手动Mock带loader的导入模块 #

如果你的测试场景不需要PIXI被暴露到全局，或者需要自定义mock内容，可以在测试文件顶部直接mock这个导入：

jest.mock('expose-loader?PIXI!phaser-ce/build/custom/pixi', () => {
  // 这里可以返回你需要的mock对象，或者直接导入原始模块
  return require('phaser-ce/build/custom/pixi');
});

这样Jest在解析这个导入时，会直接使用你定义的mock内容，跳过loader语法的解析。

方案3：拆分Webpack专属逻辑 #

把需要用expose-loader处理的代码单独抽成一个文件，比如创建src/pixi-setup.js：

// pixi-setup.js
import 'expose-loader?PIXI!phaser-ce/build/custom/pixi';

然后在index.js里导入这个文件：

// index.js
import './pixi-setup';

之后在Jest配置里，你可以选择mock这个pixi-setup.js文件，或者在测试环境下直接导入原始的PIXI模块，避免Jest接触到loader语法。

额外注意 #

• 确保phaser-ce已经正确安装在你的项目依赖中（运行npm install phaser-ce --save确认）
• 如果用了方案1，要检查正则表达式是否匹配你的导入格式，避免误匹配其他模块

内容的提问来源于stack exchange，提问作者a--m