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

Question

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

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

我尝试过将 Karma 与 Jest 一起运行，因为在浏览器中进行调试的 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
    }

包.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"]
}

Answer 1

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

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

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