如何配置TypeScript/ts-jest优先导入.ts文件而非同名.js文件？

场景说明 #

测试文件示例 #

// fileA.spec.ts
import fileA from "services/fileA"

// 测试逻辑...

构建后文件结构 #

src
- services
-- fileA.ts
-- fileA.js --> 构建脚本生成的文件
-- fileA.spec.ts

问题现象 #

生成JS文件前运行Jest测试一切正常，但生成JS文件后，测试会优先导入对应的JS文件，导致测试报错。需要配置TypeScript或ts-jest，让导入解析时优先选择TS文件，忽略生成的JS文件。

当前配置文件 #

tsconfig.json #

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "scripts",
    "lib": [ "dom", "es7" ],
    "module": "ES2015",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "noEmitOnError": true,
    "noImplicitAny": true,
    "target": "es5",
    "sourceMap": true,
    "paths": {
      "config/*": ["config/*"],
      "interfaces/*": ["interfaces/*"],
      "modules/*": ["modules/*"],
      "services/*": ["services/*"],
      "third-party/*": ["third-party/*"],
      "vue-components/*": ["vue-components/*"]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.vue"
  ]
}

jest.config.js #

const { pathsToModuleNameMapper } = require('ts-jest')
const { compilerOptions } = require('./tsconfig')

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  testEnvironment: 'jsdom',
  roots: ['<rootDir>'],
  moduleDirectories: ["node_modules", "<rootDir>"],
  modulePaths: [compilerOptions.baseUrl],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
  moduleFileExtensions: ["js", "ts", "json", "vue"],
  transform: {
    // 用ts-jest处理*.ts文件
    "^.+\\.ts$": "ts-jest",
    // 用vue-jest处理*.vue文件
    ".*\\.vue$": "vue-jest"
  },
  testRegex: [
    "**/*.spec.ts",
  ],
  setupFilesAfterEnv: ["./jest-setup.ts"]
};

解决方案 #

1. 调整Jest的文件扩展名优先级 #

问题核心在于jest.config.js中moduleFileExtensions的顺序，Jest会按数组顺序查找文件。将ts移到js前面，就能优先选择TS文件：

moduleFileExtensions: ["ts", "js", "json", "vue"],

2. 让TypeScript忽略生成的JS文件（可选） #

在tsconfig.json中添加exclude配置，避免TypeScript编译时处理生成的JS文件，减少潜在冲突：

"exclude": [
  "**/*.js",
  "node_modules"
]

3. 强制模块映射指向TS文件（可选） #

如果上述调整仍未解决问题，可以在jest.config.js的moduleNameMapper中添加规则，明确指定services/*的导入路径对应TS文件：

moduleNameMapper: {
  ...pathsToModuleNameMapper(compilerOptions.paths),
  "^services/(.*)$": "<rootDir>/scripts/services/$1.ts"
},

这些配置修改后，Jest在运行测试时会优先加载TS源文件，不再被生成的JS文件干扰。

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