如何设置 VS Code 以使用 Typescript 调试 Jest？

Question

当我调试我的测试时，断点没有显示在正确的位置。它们不受约束。在 Typescript 文件中设置断点会导致调试器停止在相应 Javascript 代码中完全不同的行上。只有在调试器中执行 jest 时才会出现此问题。使用相同的启动配置运行应用程序代码（不是测试）让我可以正常使用断点。

我希望能够在运行测试时从 VS 代码调试器设置断点并单步执行 Typescript 文件。

项目结构：

    .
    ├── src   
    │   ├── test
    │   |     └── example.test.ts
    │   |     └── jest.config.ts
    │   └── example.ts
    ├── tsconfig.json

VS 代码启动.json：

  "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/**"]
    }
  ]
}

TS 配置：

  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "declarationMap": true,
    "sourceMap": true,
    "composite": true,
    "outDir": "build",
    "moduleResolution": "node",
    "typeRoots": ["node_modules/@types", "types"],
    "types": ["node", "jest"],
    "esModuleInterop": true
  },
  "exclude": ["node_modules", "build"]
}

其他信息： 我在测试之前运行 tsc 命令并且 /build 文件夹看起来不错。似乎没有找到源映射，但我已经检查了 .js.map 文件，它们看起来是正确的。值得注意的是，jest 的默认覆盖范围提供程序能够将覆盖范围映射回 .ts 文件。所以，我认为这是一个 vs 代码启动配置问题。

这是项目的最小版本。我的要求限制我使用 tsc 然后 jest，而不仅仅是使用 ts-jest 到 JIT 转换。

Answer 1

当您使用 VSCode 时，我建议您研究一下这个扩展 - Jest Run It。它让你运行和调试测试用例。您可以在测试用例中添加断点并进行调试。您可以在此处查看扩展名：Jest Run It。在 VSCode 编辑器的扩展部分中搜索它。