如何配置VS Code调试Typescript项目Jest测试解决断点错位问题

1. 调整VS Code launch.json配置 #

新增sourceMaps显式启用源码映射，添加sourceMapPathOverrides匹配编译目录与源码目录的对应关系，修改后完整配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Unit Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--config",
        "${workspaceRoot}/build/src/test/jest.config.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229,
      "outFiles": ["${workspaceFolder}/build/**/*.js", "!**/node_modules/**"],
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "${workspaceFolder}/build/*": "${workspaceFolder}/*"
      }
    }
  ]
}

2. 校验Jest配置 #

确认src/test/jest.config.ts中开启了sourcemap支持，同时测试文件匹配规则指向编译后的js文件：

export default {
  // 保留原有配置项
  sourceMap: true,
  testMatch: ["<rootDir>/test/**/*.test.js"]
}

3. 验证生效 #

清空build目录后重新执行tsc全量编译，再启动调试即可在Typescript源码文件上正常触发断点、单步执行。

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