reactjs - 获取断点以使用 jest、Visual Studio 代码和自定义 typescript 转换器

Question

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

在每个断点 VSCode 报告: 断点被忽略，因为未找到生成的代码(源映射问题？)

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

启动.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

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

Answer 1

这似乎已在 ts-jest 的更高版本中得到修复，但我不太确定原因。断点应该与上述设置开箱即用的节点 8 一起工作。

有关详细信息，请参阅:https://github.com/kulshekhar/ts-jest/issues/212