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行：

在节点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）解决了该问题，并检查了这是create react应用程序上的已知问题，已针对此请求请求解决了该问题：

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

对我有用的是通过将"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 4

经过艰苦的努力之后，这就是我通过Babel调试获得Jest的方法，以始终如一地工作并中断正确的行。

主要，我使用了开发人员'Jest plugin for VSCode'出色的Orta，并通过在VSCode扩展面板中搜索'Jest'：

从那里我刚刚点击了测试中出现的Debug链接，这使我可以正确地在测试和应用程序代码中达到断点。

断点成功命中测试文件：

断点已成功击中源代码文件：

Answer 5

适用于 babel-jest 25.0.0 的正确配置 笑话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
        }
    ]
}

有关更多信息，我从以下repository

中获取了配置

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扩展。

享受编码

VS Code调试器中的Jest + Babel导致断点移动

6 个答案:

断点成功命中测试文件：

断点已成功击中源代码文件：