wmudge / theia-babel-jest

Example configurations for running Babel and Jest with VSCode/Theia debugging.

Debugging ES6 and Jest with VSCode and Babel

Most of this comes from a comment on Stack Overflow and the VSCode recipes project.

Babel

Purpose is to use ES6 in all aspects of a project via Babel.

Install Babel and its parts

npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/node (1)

1. @babel/node should be installed after the other two, per the Babel documentation.

Set up the Babel configuration

Update the babel.config.js configuration to handle source maps.

module.exports = function(api) {
    api.cache(true);

    const presets = [
        [
            '@babel/preset-env',
            {
                targets: { (1)
                    node: 'current'
                }
            }
        ]
    ];

    const sourceMaps = "inline";
    const retainLines = true;

    return { presets, sourceMaps, retainLines };
}

1. This is for the Jest configuration below.

or keep source maps to development only:

module.exports = function(api) {
    api.cache(true);

    const presets = [
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current'
                }
            }
        ]
    ];

    const env = {
        "debug": {
            "sourceMaps": "inline",
            "retainLines": true
        }
    }

    return { presets, env };
}

Set up the Launch configuration for debugging

The launch.json configuration should have an entry like:

{
  "type": "node",
  "request": "launch",
  "name": "Debug with babel-node",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "npx",
  "runtimeArgs": [ "babel-node" ]
}

or if using development-only source maps:

{
  "type": "node",
  "request": "launch",
  "name": "Debug with babel-node",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "npx",
  "runtimeArgs": [ "babel-node" ],
  "env": {
    "BABEL_ENV": "debug"
  }
}

Jest

Set up Jest with Babel and allow the debugging of Jest tests within VSCode. This set up allows you to both run Jest at the terminal via npx jest <options> and via the Launcher in VSCode with breakpoints.

Install Jest and its parts

npm install --save-dev babel-jest
npm install --save-dev jest-cli

Set up the Launch configuration for Jest and debugging

{
    "type": "node",
    "request": "launch",
    "name": "Jest All",
    "program": "${workspaceFolder}/node_modules/.bin/jest",
    "args": [ "--runInBand", "--verbose", "--color" ],
    "console": "internalConsole",
    "internalConsoleOptions": "neverOpen",
    "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
    },
},
{
    "type": "node",
    "request": "launch",
    "name": "Jest Current File",
    "program": "${workspaceFolder}/node_modules/.bin/jest",
    "args": [ "${fileBasenameNoExtension}", "--verbose", "--color" ],
    "console": "internalConsole",
    "internalConsoleOptions": "neverOpen",
    "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
    },
}