TypeScript迁移后Jest运行测试报TypeError: debug is not a function如何解决

解决方案 #

• 统一Jest生态依赖版本
  当前使用的Jest主版本为26.6.3，但ts-jest、babel-jest版本为27.x，大版本不兼容会直接导致模块加载异常。请将两个transform工具降级到和Jest匹配的26.x版本：

npm install ts-jest@26.x babel-jest@26.x --save-dev

• 调整fetch-mock导入写法
  TS环境下默认导入CommonJS模块时可能出现解析异常，将默认导入改为全量导入即可：

// 替换原来的 import fetchMock from 'fetch-mock'
import * as fetchMock from 'fetch-mock'

同时检查tsconfig.json中是否开启了以下配置，保证CommonJS模块导入兼容：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

• 修正Jest配置错误
  当前Jest配置存在几处可优化的问题：

  1. 正则错误：transform中匹配ts/tsx的正则末尾加了不必要的?，会错误匹配无后缀的文件，改为：^.+\.(ts|tsx)$
  2. 移除moduleDirectories中的根目录.配置，避免导入时优先级异常，优先读取node_modules下的依赖包
  3. 如果已经新增了ts/tsx测试用例，需要同步修改testRegex匹配ts后缀的文件：./test/.*\.(js|jsx|ts|tsx)$

• 避免fetch-mock重复导入
  如果同时安装了fetch-mock和fetch-mock-jest，请只保留其中一个的导入：如果使用fetch-mock-jest，直接导入该包即可，不需要再单独导入fetch-mock，避免实例冲突。

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