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

Question

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

\n

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

\n

项目结构：

\n

    .\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src   \n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 test\n    \xe2\x94\x82   |     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 example.test.ts\n    \xe2\x94\x82   |     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 jest.config.ts\n    \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 example.ts\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n

\n

VS Code launch.json：

\n

  "version": "0.2.0",\n  "configurations": [\n    {\n      "name": "Unit Tests",\n      "type": "node",\n      "request": "launch",\n      "runtimeArgs": [\n        "--inspect-brk",\n        "${workspaceRoot}/node_modules/jest/bin/jest.js",\n        "--config",\n        "${workspaceRoot}/build/src/test/jest.config.js",\n        "--runInBand"\n      ],\n      "console": "integratedTerminal",\n      "internalConsoleOptions": "neverOpen",\n      "port": 9229,\n      "outFiles": ["${workspaceFolder}/build/**/*.js", "!**/node_modules/**"]\n    }\n  ]\n}\n

\n

TS配置：

\n

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

\n

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

\n

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

\n

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 file此配置应该可以让您在使用调试配置文件时很好地调试 jest-ts 文件

Answer 2

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