Jest无法找到graphql-request模块，求跨环境理想修复方案

问题背景 #

ES6 JavaScript Webpack项目中使用graphql-request@5.2.0，项目运行正常，但执行yarn test（Jest@26.6.3）时出现模块找不到的错误：

Cannot find module 'graphql-request' from 'xyx/abc.js'

    Require stack:
      xyx/abc.js
      tests/abc.test.js

at Resolver.resolveModule (node_modules/jestresolve/build/index.js:306:11)
      at Object.<anonymous> (src/abc.js:2:1)
      at Object.<anonymous> (tests/abc.test.js:1:44)

临时修改node_modules/graphql-request/package.json添加main字段可解决本地问题，但该方案无法在其他构建环境复用。

根本原因 #

graphql-request从v5版本开始改为纯ESM（ECMAScript模块）包，而Jest@26对ESM的支持存在缺陷，无法正确解析纯ESM包的入口文件，导致模块查找失败。

理想修复方案 #

方案1：升级Jest到支持ESM的版本 #

Jest从v28开始大幅优化了对ESM的支持，升级后可直接适配纯ESM包：

1. 升级Jest及相关依赖：

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

2. 在项目根目录创建或修改jest.config.js，添加ESM适配配置：

module.exports = {
  testEnvironment: 'node',
  extensionsToTreatAsEsm: ['.js'],
  transform: {},
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1'
  }
};

3. 确保项目package.json中已声明"type": "module"（如果你的项目是ESM模式）。

方案2：在现有Jest@26环境下通过Babel转换ESM包 #

如果无法升级Jest，可通过Babel将graphql-request转换为CommonJS格式供Jest解析：

1. 安装Babel相关依赖：

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

2. 创建babel.config.js：

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }]
  ]
};

3. 修改jest.config.js，配置Babel转换规则，不对graphql-request做忽略：

module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/(?!graphql-request)/'
  ]
};

这样Jest会通过Babel将graphql-request的ESM代码转换为CommonJS，从而正确找到模块。

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