部署JEST测试THREE.js OrbitControls时出现ENOENT错误

问题根源 #

Jest的模块解析机制和Webpack/Vite这类构建工具存在差异——即便项目编译运行正常，Jest可能无法正确识别Three.js examples/jsm目录下的ES模块路径，导致抛出文件找不到的错误。

可行解决方案 #

1. 配置Jest路径映射 #

在项目的jest.config.js（或jest.config.ts）中添加moduleNameMapper，明确指定OrbitControls的文件路径（需带上.js后缀，Jest解析ES模块时需要明确后缀）：

module.exports = {
  // 保留原有配置
  moduleNameMapper: {
    '^three/examples/jsm/controls/OrbitControls$': '<rootDir>/node_modules/three/examples/jsm/controls/OrbitControls.js'
  }
};

2. 开启Jest对ES模块的支持 #

如果项目使用ES模块而非CommonJS，需在Jest配置中添加ES模块支持，并配合Babel处理：

module.exports = {
  // 其他配置
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
  },
  extensionsToTreatAsEsm: ['.js', '.jsx', '.ts', '.tsx']
};

同时确保babel.config.js中配置了@babel/preset-env等支持ES模块的预设。

3. 重新安装依赖修复文件缺失 #

偶尔依赖安装会出现文件不完整的情况，可尝试清理后重新安装：

rm -rf node_modules package-lock.json
npm install

或者单独重新安装Three.js：

npm install three --save

4. 用路径别名简化导入（可选） #

在项目的tsconfig.json/jsconfig.json中配置路径别名，同时同步到Jest的moduleNameMapper：

{
  "compilerOptions": {
    "paths": {
      "@three/OrbitControls": ["node_modules/three/examples/jsm/controls/OrbitControls.js"]
    }
  }
}

Jest配置中对应添加：

moduleNameMapper: {
  '^@three/OrbitControls$': '<rootDir>/node_modules/three/examples/jsm/controls/OrbitControls.js'
}

之后导入语句可改为import { OrbitControls } from '@three/OrbitControls';，降低路径解析出错概率。

内容的提问来源于stack exchange，提问作者David M. Ospina Eslava