在 Visual Studio 代码中使用 Jest 调试 Angular 测试

Question

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

如何配置我的项目，以便我可以在 Visual Studio 代码中将我的测试调试为 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
    }

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

Answer 1

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

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

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

在 Visual Studio 代码中使用 Jest 调试 Angular 测试

Debugging Angular Tests with Jest in Visual Studio Code

typescript

karma-runner

jestjs

visual-studio-code

angular