在 Visual Studio Code 中使用 Jest 调试 Angular 测试答案

【问题标题】：Debugging Angular Tests with Jest in Visual Studio Code在 Visual Studio Code 中使用 Jest 调试 Angular 测试
【发布时间】：2021-11-26 01:13:27
【问题描述】：

我们的项目目前正在使用 jest 进行 Angular 测试。我们使用 jest-preset-angular，它被配置为在 Visual Studio Code 中以调试模式运行。调试工作除了它首先将 spec.ts 文件转换为 JavaScript。这意味着断点通常不在我想要的位置，因为文件已从 TypeScript 转换为 JavaScript。

如何配置我的项目，以便我可以在 Visual Studio Code 中将测试作为 Typescript 进行调试？

我曾尝试在 Jest 旁边运行 Karma，因为在浏览器中进行调试的 Karma 体验要容易得多。但是，测试中有很多 Jest 依赖项，这也是一个挑战。

launch.json
    {
      "name": "Tests",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
      "stopOnEntry": false,
      "args": ["-i", "-o"],
      "cwd": "${workspaceRoot}",
      "preLaunchTask": null,
      "runtimeExecutable": null,
      "env": {
        "NODE_ENV": "test"
      },
      "console": "integratedTerminal",
      "outFiles": ["${workspaceRoot}/dist/**/*"],
      "sourceMaps": true
    }

package.json

  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setupJest.ts"
    ],
    "moduleDirectories": [
      "node_modules",
      "./"
    ],
    "testResultsProcessor": "jest-teamcity-reporter",
    "testMatch": [
      "**/app/**/*.spec.ts"
    ]

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "types": ["jest", "node"]
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

【问题讨论】：

标签： angular typescript visual-studio-code jestjs karma-runner

【解决方案1】：

我终于在 Micha Pierzchala 的一篇文章中看到了一个建议，该文章链接到 https://jestjs.io/docs/testing-frameworks#angular。这篇文章推荐 IDE 集成，VS Code 的集成是 vscode-jest。这正是我一直在寻找的，它为您的 TypeScript 代码提供了绝佳的调试体验。

我不需要更改我的 jest 配置。我只是将此扩展添加到我的 VS Code 工作区。

编辑：我发现 vscode-jest 有很多错误，因此我切换到 vscode-jest-runner。使用此扩展程序，您可以从右键单击上下文菜单启动测试。它在使您的 TypeScript 代码的调试体验更加愉快方面具有相同的结果。

【讨论】：