Jest + Babel dans le débogueur de VS Code provoque le déplacement des points d'arrêt

Question

J'essaie de déboguer un projet simple en utilisant babel, jest, et du code vs. Lorsque je fixe un point d'arrêt et que je commence à déboguer, mes points d'arrêt sautent et ne sont plus là où ils étaient lorsque j'ai commencé. Un exemple de repo peut être vu ici - https://github.com/RyanHirsch/starter-node

J'ai mis à jour mon launch.json pour contenir

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

Et mon .babelrc ressemble :

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

Je pensais que les options de la carte source étaient suffisantes pour que cela fonctionne, mais j'avais tort. Que faut-il changer pour que mes points d'arrêt restent à leur emplacement d'origine ? En particulier lorsque j'essaie de déboguer mes tests.

\==== Editer ====

Auparavant, mes points d'arrêt se trouvaient sur la ligne de test 10 et la ligne d'implémentation 4 :

Lorsque je commence à déboguer en sélectionnant mon fichier de test, puis que j'exécute Jest dans le volet de débogage de VS Code, mes points d'arrêt sautent à la ligne de test 9 et à la ligne d'implémentation 6 :

Fonctionne sur Node 9.6.1 avec les extensions suivantes :

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

J'ai eu ce problème (en utilisant jest 23.6.0), j'ai vérifié qu'il s'agissait d'un problème connu sur la création d'une application react, résolu sur cette demande de retrait :

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

J'ai appliqué la configuration suivante à mon lancement.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" },

J'ai réussi à le faire casser sur les bons points de rupture.

Answer 2

@RyanHirsch ; utilisez simplement retainLines": true à côté de sourceMap: "inline" dans votre babelrc et cela fonctionnera.

Answer 3

Après de nombreux efforts, voici comment j'ai réussi à faire fonctionner Jest avec le débogage Babel. travailler et rompre de manière cohérente sur les bonnes lignes.

Principalement, j'ai utilisé l'excellent Plugin Jest pour VSCode par le développeur Orta et en recherchant "Jest" dans le volet des extensions de VSCode :

A partir de là, j'ai juste appuyé sur le bouton Debug qui apparaît dans mon test, ce qui me permet d'activer correctement les points d'arrêt à la fois dans mes tests et dans le code de l'application.

Point d'arrêt atteint avec succès dans le fichier de test :

Point d'arrêt atteint avec succès dans le fichier de code source :

Answer 4

La configuration correcte qui fonctionne pour babel-jest 25.0.0 & jest 25.0.0 est le suivant :

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

Pour plus d'informations, j'ai pris ma configuration à partir de ce qui suit dépôt

Answer 5

Ce qui a fonctionné pour moi, c'est la désactivation de sourcemap en ajoutant "sourceMaps": false à la configuration de lancement. Je ne comprends pas vraiment pourquoi cela fonctionne.

Ejemplo:

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