Vue3+TypeScript单元测试报错Unable to require `.d.ts`问题求助

可行解决方案 #

方案一：配置jest转译指定node_modules依赖（优先推荐） #

该报错核心原因是jest默认不会处理node_modules目录下的TypeScript源码文件，你引入的fake-utils-lib源码属于node_modules下的未编译TS文件，才会触发.d.ts加载错误。
只需要修改你的jest配置文件（通常为jest.config.js，如果是vue-cli项目也可以写在vue.config.js的jest字段下），调整transformIgnorePatterns配置，将需要转译的依赖包排除在忽略列表外：

module.exports = {
  // 保留你原有的其他配置
  transformIgnorePatterns: [
    '/node_modules/(?!fake-utils-lib)/'
  ]
}

如果有多个需要转译的依赖，用|分隔包名即可，比如/node_modules/(?!fake-utils-lib|other-lib)/。
该方案不需要修改业务代码，无额外副作用，适合必须引入依赖源码的场景。

方案二：引入依赖的编译后产物 #

如果fake-utils-lib是第三方公共包，通常已经提供了编译好的JS文件和类型声明，你可以直接引入包根目录，而不是引入src下的源码：
将原代码里的导入语句

import { FakeUtil } from "fake-utils-lib/src/fake-util";

修改为

import { FakeUtil } from "fake-utils-lib";

即可，不需要修改任何构建配置。

方案三：修复isolatedModules配置的语法报错 #

如果你想继续使用isolatedModules配置，只需要配套开启babel转译支持新语法即可解决可选链等语法的报错问题：

1. 先安装必要的babel依赖：

npm install @babel/preset-env @babel/preset-typescript --save-dev

2. 修改jest配置里的ts-jest配置，开启babel支持：

module.exports = {
  // 其他原有配置
  globals: {
    "ts-jest": {
      isolatedModules: true,
      babelConfig: true
    }
  }
}

3. 项目根目录新增babel.config.js配置：

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

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