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

ktca8awb  于 2023-05-27  发布在  Jest
关注(0)|答案(3)|浏览(160)

当我调试测试时,断点没有显示在正确的位置。他们是自由的。在Typescript文件中设置断点会导致调试器在相应Javascript代码中完全不同的行上停止。仅当在调试器中执行jest时才会出现此问题。使用相同的启动配置运行应用程序代码(而不是测试)可以让我正常使用断点。
我希望能够设置断点,并在运行测试时从VS代码调试器中单步执行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文件夹看起来没问题。看起来好像没有找到源Map,但我已经检查了. js.map文件,它们看起来是正确的。值得注意的是,jest的默认覆盖提供程序能够将覆盖Map回.ts文件。所以,我认为这是一个vs代码启动配置问题。
这是该项目的最小版本。我的需求限制我先使用tsc,然后使用jest,而不仅仅是使用ts-jest进行JIT转换。

vfhzx4xs

vfhzx4xs1#

由于你的测试是用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文件

nhjlsmyf

nhjlsmyf2#

由于您正在使用VSCode,我建议您查看此扩展-Jest Run It。它让你运行和调试测试用例。您可以在测试用例中添加断点并进行调试。您可以在这里查看扩展名:Jest Run It。在VSCode编辑器的扩展部分搜索它。

koaltpgm

koaltpgm3#

我可能会迟到一点,但Jest扩展对我很有效,不需要设置
https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
edit:为了详细说明“无需设置”,它会为您进行设置,对于我来说,在这个项目中,我刚刚克隆了大量测试,并且launch.js文件中没有测试配置就足够了

相关问题