为什么Jest单元测试调试时Chrome检查器无法在断点处停住？

报错关联说明 #

你看到的typescript.js.map缺失报错，是Chrome DevTools尝试加载TypeScript编译器本身的源码映射文件导致，并非直接导致业务代码断点不生效的核心原因，但该报错可以侧面反映出项目的源码映射配置存在适配问题，间接影响调试体验。

版本兼容问题确认 #

你当前使用的react-scripts@2.1.8最高仅支持TypeScript 3.x版本，和你安装的typescript@4.3.5存在明显的编译适配问题，这是导致调试异常的核心诱因：旧版本react-scripts内置的ts转译、Jest配置无法识别TS 4.x的语法规则，会出现源码映射偏移、断点位置不匹配的问题。

分步修复方案 #

方案1：最小改动适配（推荐优先尝试） #

• 修改package.json中的调试脚本，补充源码映射和运行环境参数：

"scripts": {
  "test:debug": "react-scripts --inspect test --runInBand --no-cache --sourceMaps=all --env=jsdom"
}

• 检查项目根目录的tsconfig.json，在compilerOptions节点下新增/修改以下配置：

"compilerOptions": {
  "sourceMap": true,
  "inlineSources": true
}

• 临时修复debugger不生效问题：如果断点还是无法命中，可在debugger;语句前添加一行无意义的打印逻辑console.log('force break')，避免旧版本Jest将debugger语句误判为死代码优化掉。

方案2：修复版本不兼容问题 #

如果方案1无法解决问题，可通过降级TypeScript版本适配旧版react-scripts：

• 执行命令降级TS到适配版本：yarn add typescript@3.9.10 -D
• 删除node_modules和锁文件后重新安装依赖，再启动调试即可。

方案3：保留TS版本的兼容方案 #

如果必须使用TS 4.x版本，无需eject项目，可通过工具覆盖内置配置：

• 安装配置覆盖工具：yarn add react-app-rewired customize-cra -D
• 项目根目录新建config-overrides.js文件，添加Jest适配配置
• 将package.json中scripts里的react-scripts替换为react-app-rewired即可。

可选的报错屏蔽方案 #

如果不需要调试TypeScript编译器源码，可直接在Chrome DevTools的设置页面，取消勾选「Enable JavaScript source maps」选项，即可屏蔽typescript.js.map缺失的报错，不会影响业务代码的调试。

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