Sometimes you have a test that consistently fails and you just can’t figure it out. Most of us are used to being able to debug a component in the browser but how do we do that with Jest tests in LWC? Well fortunately it’s very simple!

Getting Started

I’m going to start by setting up debugging on project from my last post on Testing a Lightning Web Components. The repo for that project is here:

https://github.com/mattgoldspink/testing-lightning-web-components

Clone this repo and open it up in Visual Studio. You’ll find our component in the force-app/main/default/lwc/helloComponent folder and you’ll also find the tests we wrote in the __tests__ folder.

Configuring the Debugger in VS Code

First you’ll want to click the debugger icon in the left bar in Visual Studio Code to open the debugging view:

At the top you’ll see it says No Configurations, click this and you’ll see an option to Add Configuration.... Clicking this will open a dialog prompting you to choose what type of configuration. Choose Node.js:

You’ll now have a new launch.json file stored in a .vscode folder in your project. This is what Visual Studio Code uses to know how to launch your application.

I highly recommend checking this into your version control so other developers can easily debug too!

Let’s edit the launch.json and replace the contents with this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Jest Tests",
            "type": "node",
            "request": "launch",
            "env": { "NODE_ENV": "test" },
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}/node_modules/.bin/lwc-jest",
            "stopOnEntry": false,
            "runtimeArgs": ["--nolazy"],
            "console": "internalConsole",
            "sourceMaps": false,
            "internalConsoleOptions": "openOnSessionStart"
        }
    ]
}

This basically tells Visual Studio Code to kick off the lwc-jest command (line 10) and connect to it. After saving this you’ll see the name Debug Jest Tests in the top left next to a green play button. Before we click it, let’s set a breakpoint in our test file.

Setting Breakpoints

Open the tests file named helloComponent.test.js – a quick way to do it is to press cmd + p(Mac) orCtrl + p (Windows/Linux) and type helloComponent.test and you should see it list the file in the dropdown. Use the arrow keys to select it and hit Enter to open it.

There’s 2 ways we can set a breakpoint. The first is to type the keyword debugger in the source code. For example in our first test we could add it like this on line 20:

    it('Renders with Hello World', () => {
        const element = createElement('c-hello-component', {
            is: HelloComponent,
        });
        document.body.appendChild(element);

        debugger

        const pTag = element.shadowRoot.querySelector('p');
        expect(pTag.textContent).toEqual('Hello, World!');
    });

The second way is to add a red breakpoint on a line in a file. This can be done by clicking to the left of the line number in editor like so:

It’s entirely your choice, but I’d be careful of using the debugger keyword in case you leave it in your code. For now I’ll do both so you can see them in action.

With your breakpoints in place hit the green play button and watch the as Visual Studio Code runs and stops at the first breakpoint:

You’ll know you’re running in the debugger because Visual Studio Code changes the bottom status bar from blue to orange, and you’ll also see the debugger controls in the top of the window.

Inspecting data

Once you’ve hit your breakpoint there’s various ways you can inspect the variables.

The first way is to use the Variables view on the left hand side. Here you’ll be able to inspect all the variables in the available scopes. On the left you can also see the Call Stack, to see who called your function, and there’s also more advanced features like setting expressions to Watch.

The second way is to hover over the variables in the editor and you’ll get a popover with the variable’s contents – a nice quick way to see what’s going on:

The third way is to use the console as you may be used to doing in browsers like Chrome. The console is called the Debug Console and is found in the bottom set of tabs of Visual Studio Code. In here you can type and evaluate expressions, like so:

You can of course step over, step up and continue the debugger using the buttons at the top of the window.

Finding out more

Now that you’re running in the debugger there’s plenty to explore! I won’t cover the features here, but I highly recommend reading the official Visual Studio Code docs to learn more: https://code.visualstudio.com/docs/editor/debugging