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

Question

我正在尝试使用babel、jest和vs code调试一个简单的项目。当我设置断点并开始调试后，我的断点会跳来跳去，不再是我开始时设置的位置了。示例存储库可以在此处查看-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

- RyanHirsch

---

你能展示一些运行前和运行后的截图吗？你是在哪里设置断点并且怎样运行代码的？因为此项目在我的电脑上运行正常。还请提供你使用的node和NPM版本号。 - Tarun Lalwani

尽管这并不能解释为什么你会出现这种情况，但你可以尝试在你的 .babelrc 文件中添加 retainLines: true，这样就不会混淆断点应该在哪一行了。 - mootrichard

添加 retainlines 将会破坏任何列断点，并且根据文档生成“奇怪的代码”。看起来源映射应该可以工作 :( - RyanHirsch

好的，虽然这并没有太大帮助，但你并不孤单。 https://github.com/babel/babel/issues/6008 - mootrichard

Answer 1

@RyanHirsch; 只需在您的babelrc文件中使用retainLines": true和sourceMap: "inline"，它就能正常工作。

- Jefe_Spain

Answer 2

遇到了这个问题（使用jest 23.6.0），查明这是create react app上已知的问题，解决方法在以下拉取请求中：

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

成功在正确的断点处进行了错误调试。

- Braulio

---

更新，这段时间它起作用了，但仍然失败了，刚刚回滚到Jest 22，我正在使用的当前配置是：https://stackoverflow.com/questions/52454412/visual-studio-code-debugging-jest-breakpoints-not-working-as-expected - Braulio

更新，现在Jest和VS Code都增强了它们的集成，现在可以轻松地将它们集成到基于create-react-app的应用程序和从头开始创建的应用程序中。我已经创建了一篇文章来涵盖这些主题：https://www.basefactor.com/using-visual-studio-code-to-debug-jest-based-unit-tests - Braulio

Answer 3

经过不少努力，我终于找到了一种方法，使得使用Babel调试Jest可以始终正常工作并在正确的行上中断。

主要是通过在VSCode的扩展面板中搜索“Jest”，使用开发者 'Orta' 开发的出色的Jest插件 for VSCode：

接下来我只需点击测试中出现的Debug链接，这样我就可以正确地在我的测试和应用程序代码中打断点。

成功在测试文件中打断点：

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

- heartunicyclist

---

我尝试过这个，但除了在不同的文件中创建随机断点之外，什么也没做！ - Zimano

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

更多信息请参考我从以下存储库获取的配置。

- Melchia

Answer 5

我的解决方法是通过在启动配置中添加"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",
  }
}

- The Huy

Answer 6

安装 node：

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 Code 中进行故障排除的更多参考，请按照指示。

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，因此它不需要进行检查。要进行检查，您需要使用Node和Node Chrome扩展程序。

尽情编码

- Sivaraj-v

---

似乎 jest 23.6.0 又出现了“移动断点”的问题，一旦命中第一个断点，你就可以设置一个断点，它就会停下来。 - Braulio