Jest测试React组件时imports-loader模块找不到问题求助

这个问题我踩过坑！本质是Jest不认识webpack那种带imports-loader?xxx!前缀的import语法，给你几个实用的解决办法，按优先级推荐：

方案1：改用webpack的ProvidePlugin（最推荐，一劳永逸） #

如果你的项目本身就用webpack，直接用全局注入的方式替代imports-loader，既能简化代码，又能彻底避免Jest的解析问题：

• 第一步：修改webpack配置文件，添加ProvidePlugin来全局暴露jQuery：

const webpack = require('webpack');

module.exports = {
  // ...其他已有配置
  plugins: [
    // 新增这个插件
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

• 第二步：把代码里那个特殊的import改成普通写法：

// 原来的写法：
// import 'imports-loader?jQuery=jquery!bootstrap/js/tooltip'

// 改成：
import 'bootstrap/js/tooltip';

• 第三步：给Jest配置全局jQuery。新建一个jest.setup.js文件：

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

然后在Jest配置（jest.config.js或者package.json的jest字段）里指定这个setup文件：

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

方案2：用Jest的moduleNameMapper映射路径 #

如果不想改webpack配置，直接让Jest把带loader的路径映射成实际模块：

• 第一步：确保已经安装jquery和bootstrap：

npm install jquery bootstrap --save

• 第二步：在Jest配置里添加moduleNameMapper规则：

module.exports = {
  // ...其他配置
  moduleNameMapper: {
    // 匹配带imports-loader前缀的路径，替换成实际模块
    '^imports-loader\\?jQuery=jquery!(.*)$': '<rootDir>/node_modules/$1'
  }
};

• 第三步：同样需要按方案1的第三步，在Jest的setup文件里注入全局jQuery，否则bootstrap的tooltip会找不到依赖。

方案3：让Jest用webpack解析模块（适合复杂场景） #

如果你的webpack配置特别复杂，不想单独适配Jest，可以用jest-webpack-resolver让Jest直接用webpack的规则解析模块：

• 第一步：安装依赖：

npm install jest-webpack-resolver --save-dev

• 第二步：在Jest配置里指定resolver：

module.exports = {
  // ...其他配置
  resolver: 'jest-webpack-resolver'
};

这个方法能自动处理所有webpack的loader语法，但缺点是会让测试速度变慢，适合webpack配置复杂、其他方案不好适配的情况。

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