Jest + Babel в VS Code отладчик вызывает точки останова для перемещения

Я пытаюсь отлаживать простой проект, используя 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:

Когда я начинаю отладку путем выбора моего тестового файла, а затем запускаю Jest в панели отладки VS Code, мои точки останова переходят на тестовую строку 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

Ответ 1

Получил эту проблему (с использованием jest 23.6.0), проверил, что это была известная проблема в приложении create response, решен по этому запросу на извлечение:

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

Удалось сломать его на правильных контрольных точках.

Ответ 2

@RyanHirsch; просто используйте retainLines": true вместе с sourceMap: "inline" в вашем babelrc, и это будет работать.

Ответ 3

После долгих попыток, вот как я заставил Jest с Babel отлаживать, чтобы последовательно работать и ломать верные строки.

В основном, я использовал отличный плагин Jest для VSCode от разработчикаOrta, а также с помощью поиска "Jest" на панели расширений VSCode:

Оттуда я только что нажал на ссылку Debug, которая появляется в моем тесте, которая позволяет мне правильно выбирать точки останова как в моих тестах, так и в коде приложения.

Точка останова успешно достигнута в тестовом файле:

Точка останова успешно достигнута в файле исходного кода:

Ответ 4

Правильный конфиг, который работает для babel-jest 25.0.0 & amp; шутка 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
        }
    ]
}

Для получения дополнительной информации я взял свою конфигурацию из следующего хранилища.

Ответ 5

Для меня сработало отключение sourcemap путем добавления "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",
  }
}

Ответ 6

Устанавливать узел:

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

Установите Chrome Plugin:

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.

Наслаждайтесь кодированием