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

Question

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

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

项目结构：

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

VS Code launch.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 code 启动配置问题。

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

Answer 1

由于您的测试是用 jest+typescript 编写的，我建议您遵循以下设置：

launch.json

        {
            "name": "Jest file",
            "type": "pwa-node",
            "request": "launch",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/jest",
            "args": [
                "${fileBasenameNoExtension}",
                "--runInBand",
                "--watch",
                "--coverage=false",
                "--no-cache"
            ],
            "cwd": "${workspaceRoot}",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "sourceMaps": true,
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        },

在

package.json

上验证这些库

  "devDependencies": {
    "@types/jest": "^26.0.24",
    "jest": "^27.0.6",
    "ts-jest": "^27.0.3",
    "ts-node": "^10.2.1",
    "ts-node-dev": "^1.1.8",
    "typescript": "^4.3.5",
  }

此配置应该让您可以很好地调试 jest-ts 文件，同时使用

Jest file

调试配置文件

Answer 2

当您使用 VSCode 时，我建议您研究一下这个扩展 -

Jest Run It

。它允许您运行和调试测试用例。您可以在测试用例中添加断点并进行调试。您可以在此处查看扩展：Jest Run It。在 VSCode 编辑器的扩展部分中搜索它。

Answer 3

在 Monorepos 中调试 Jest 测试 [2024 年 11 月]

我刚刚测试过，这适用于 monorepo 设置和预期的断点：

{
  "name": "Jest my-package CURRENT FILE",
  "type": "node",
  "request": "launch",
  "runtimeArgs": [
    "--inspect-brk",
    "${workspaceRoot}/node_modules/jest/bin/jest.js",
    "--config",
    "${workspaceRoot}/packages/my-package/jest.config.js",
    "--runInBand",
    "${file}"
  ],
  "cwd": "${workspaceFolder}/packages/my-package",
  "console": "integratedTerminal"
}

Answer 4

我参加聚会可能有点晚了，但 Jest 扩展对我有用，无需设置

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

编辑：为了详细说明“无需设置”，它会为您进行设置，对于我来说，在这个项目中，我刚刚克隆了它附带了大量的测试，并且 launch.js 文件中没有测试配置就足够了