编译TypeScript需.js导入扩展名与Jest无扩展名要求的配置冲突问题

我复制了某项目的TypeScript、Jest和Babel配置后，碰到了导入扩展名的冲突：

• 用当前tsconfig.json时，导入必须加.js扩展名才能跑通，省略就报错
• 但用Jest+Babel这套配置时，导入不能加.js，否则直接失效

现有配置 #

tsconfig.json #

{
  "lib": ["es5", "es6", "es7", "esnext", "dom"],
  "target": "es2018",
  "esModuleInterop": true,
  "moduleResolution": "node"
}

Jest配置 #

{
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "test/.*\\.test\\.ts$",
  "moduleFileExtensions": ["ts", "js", "json", "node"]
}

babel.config.js #

module.exports = { presets: ["@babel/preset-env"] };

解决办法 #

核心是让TS的模块解析逻辑和Jest/Babel对齐，同时兼顾ES模块的规范要求。

1. 修改TypeScript配置 #

更新tsconfig.json，添加适配ES模块的配置项：

{
  "lib": ["es5", "es6", "es7", "esnext", "dom"],
  "target": "es2018",
  "esModuleInterop": true,
  "moduleResolution": "bundler", // 用bundler模式适配现代构建工具
  "module": "ESNext",
  "allowImportingTsExtensions": true, // 允许导入.ts后缀
  "moduleSuffixes": [".ts", ".js"], // 解析时优先查找.ts文件，再匹配.js
  "noEmit": true // 依赖Babel/ts-jest转译时，关闭TS自身的编译输出
}

2. 调整Jest配置 #

让Jest能识别带.js后缀的TS文件，自动映射路径：

{
  "transform": {
    "^.+\\.(ts|tsx|js)$": "ts-jest" // 同时处理带.js后缀的文件
  },
  "testRegex": "test/.*\\.test\\.ts$",
  "moduleFileExtensions": ["ts", "js", "json", "node"],
  "moduleNameMapper": {
    "^(\\.\\.?\\/.+)\\.js$": "$1" // 移除导入路径中的.js后缀，匹配对应的TS文件
  }
}

3. 优化Babel配置 #

添加TS预设，让Babel直接处理TS语法：

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
};

配置原理说明 #

• TS的bundler解析模式支持省略扩展名，moduleSuffixes让TS优先匹配.ts文件，同时兼容ES模块要求的.js导入写法
• Jest的moduleNameMapper自动移除导入里的.js后缀，确保ts-jest能找到对应的TS源文件
• Babel添加TS预设后，转译逻辑和Jest对齐，避免因后缀差异出现解析错误

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