If you have not given Visual Studio Code a spin you really should, especially if  you are doing web/javascript/Node development.

One super awesome feature of VS Code is the ability to easily configure the ability to debug your Jest (should work just fine with other JavaScript testing frameworks) tests.  I have found that most of the time I do not need to actually step into the debugger when writing tests, but there are times that using console.log is just too much friction and I want to step into the debugger.

So how do we configure VS Code?

First you  will need to install the Jest-Cli NPM package (I am assuming you already have Jest setup to run your tests, if you do not please read the Getting-Started docs).  If you fail to do this step you will get the following error in Code when you try to run the debugger.

After you have Jest-Cli installed you will need to configure VS Code for debugging.  To do this open up the configuration by clicking Debug -> Open Configurations.  This will open up a file called launch.json.

Once launch.json is open add the following configuration

        {
            "name": "Jest Tests",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
            "stopOnEntry": false,
            "args": ["--runInBand"],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "internalConsole",
            "sourceMaps": false,
            "outFiles": []
        }

Here is a gist of a working launch.json file.

After you save the file you are almost ready to start your debugging.

Before you can debug you will want to open the debug menu (the bug icon on the left toolbar).   This will show a drop down menu with different configurations.  Make sure ‘Jest Test’ is selected.

If you have this setup correctly you should be able to set breakpoints and hit F5.

Till next time,