VS Code 調試器中的 Jest + Babel 導致斷點移動

Question

我正在嘗試使用 babel、jest 和 vs 代碼調試一個簡單的項目。 當我設置斷點然后開始調試時，我的斷點會跳來跳去，不再是我開始時所在的位置。 可以在此處查看示例存儲庫 - https://github.com/RyanHirsch/starter-node

我已經更新了我的launch.json以包含

{
  "name": "Jest",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
  "stopOnEntry": false,
  "args": ["-i", "${file}"],
  "cwd": "${workspaceRoot}",
  "runtimeExecutable": null,
  "sourceMaps": true,
  "protocol": "inspector"
}

我的.babelrc看起來像：

{
  "plugins": ["@babel/plugin-proposal-object-rest-spread"],
  "sourceMaps": "inline",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "6.10"
        }
      }
    ]
  ]
}

我認為源映射選項足以讓它工作，但我錯了。 需要更改哪些內容才能將我的斷點保留在其原始位置？ 特別是在嘗試調試我的測試時。

==== 編輯 ====

在我的斷點位於測試第 10 行和實現第 4 行之前：

當我通過選擇我的測試文件開始調試，然后在 VS Code 調試窗格中運行 Jest 時，我的斷點跳轉到測試第 9 行和實現第 6 行：

在 Node 9.6.1 上運行，具有以下擴展：

DavidAnson.vscode-markdownlint
EditorConfig.EditorConfig
Orta.vscode-jest
PKief.material-icon-theme
PeterJausovec.vscode-docker
Shan.code-settings-sync
bungcip.better-toml
dbaeumer.vscode-eslint
dracula-theme.theme-dracula
dzannotti.vscode-babel-coloring
eamodio.gitlens
esbenp.prettier-vscode
gerane.Theme-FlatlandMonokai
humao.rest-client
mauve.terraform
mikestead.dotenv
mjmcloug.vscode-elixir
mohsen1.prettify-json
ms-vscode.Theme-MaterialKit
ms-vscode.azure-account
ms-vscode.cpptools
ritwickdey.LiveServer
sbrink.elm
shanoor.vscode-nginx
vscodevim.vim

Answer 1

得到這個問題（使用jest 23.6.0），檢查這是創建反應應用程序的已知問題，在此拉取請求上解決：

https://github.com/facebook/create-react-app/pull/3605/files

將以下配置應用於我的launch.json

{ "type": "node", "request": "launch", "name": "Jest All", "program": "${workspaceFolder}/node_modules/jest/bin/jest", "args": [ "test", "--runInBand", "--no-cache"
], "sourceMaps": false, "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" },

管理在正確的斷點上打破它。

Answer 2

@RyanHirsch; 只需在你的babelrc中使用retainLines": true和sourceMap: "inline" ，它就可以了。

Answer 3

經過多次努力，這就是我如何通過Babel調試讓Jest繼續工作並打破正確的線路。

主要是，我使用開發人員' Orta '的VSCode優秀的Jest插件 ，並通過在VSCode的擴展窗格中搜索'Jest'：

從那里我只是點擊我的測試中出現的Debug鏈接，這允許我在我的測試和應用程序代碼中正確地命中斷點。

斷點成功命中測試文件：

斷點在源代碼文件中成功命中：

Answer 4

適用於babel-jest 25.0.0 & jest 25.0.0的正確配置如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Jest Tests",
            "type": "node",
            "request": "launch",
            "runtimeArgs": [
                "--inspect-brk",
                "${workspaceRoot}/node_modules/.bin/jest",
                "--runInBand"
            ],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "port": 9229
        }
    ]
}

有關更多信息，我從以下存儲庫中獲取了配置

Answer 5

對我有用的是通過在啟動配置中添加"sourceMaps": false來關閉源"sourceMaps": false 。 我不完全理解為什么它有效。

例：

{
  "type": "node",
  "request": "launch",
  "name": "Jest Current File",
  "program": "${workspaceFolder}/node_modules/.bin/jest",
  "args": [
    "${relativeFile}",
    "--config",
    "jest.config.js",
    "--no-cache"
  ],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "disableOptimisticBPs": true,
  "sourceMaps": false,
  "windows": {
    "program": "${workspaceFolder}/node_modules/jest/bin/jest",
  }
}

Answer 6

安裝節點：

https://nodejs.org/en/download/

安裝Chrome插件：

https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj?hl=en

在終端中運行以下腳本

node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand

有關vs代碼中的故障排除的更多參考，請參閱

https://jestjs.io/docs/en/troubleshooting

 {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

Babel將es6轉換為es5，因此它不依賴於檢查。 對於檢查，您需要節點和節點chrome擴展。

享受編碼