让断点与 jest、Visual Studio 代码和自定义 typescript 转换器一起工作

Posted 2023-03-13

【中文标题】让断点与 jest、Visual Studio 代码和自定义 typescript 转换器一起工作

【英文标题】：Getting breakpoints to work with jest, Visual studio code and a custom typescript transformer

【发布时间】：2017-10-17 20:13:07

【问题描述】：

我无法使用ts-jest 作为自定义预处理器在 VSCode 中设置断点。 如果我使用debugger 语句，它将在正确的位置中断，并显示正确的源，因此正在加载和解析源映射。

在每个断点上 VSCode 报告： Breakpoint ignored because generated code not found (source map problem?)

这是我的设置（相同的设置在 webstorm 中使用 debugger 语句和断点都可以正常工作）

launch.json

  "version": "0.2.0",
  "configurations": [
    
      "type": "node",
      "request": "launch",
      "name": "Debug Jest",
      "program": "$workspaceRoot/node_modules/jest/bin/jest.js",
      "args": [
        "--runInBand",
        "--no-cache"
      ],
      "cwd": "$workspaceRoot",
      "console": "integratedTerminal",
      "sourceMaps": true,
    
  ]

.tsconfig.json：

  "compilerOptions": 
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "target": "es2015",
    "moduleResolution": "node",
    "inlineSourceMap": true
  ,
  "exclude": [
    "node_modules"
  ]

package.json>开玩笑

"jest": 
  "preset": "react-native",
  "transform": 
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  ,
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
  "mapCoverage": true,
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "json"
  ],
  "globals": 
    "__DEV__": true
  

.babelrc

  "presets": [
    "react-native"
  ],
  "sourceMaps": "inline"

【问题讨论】：

你有想过这个吗？

嗨，是的，看我的回答。它似乎与更高版本的 ts-jest 和 node 开箱即用

【参考方案1】：

这似乎已在更高版本的 ts-jest 中得到修复，尽管我不太清楚为什么。通过上述设置，断点应与节点 8 一起使用。

更多详情请见：https://github.com/kulshekhar/ts-jest/issues/212