Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Debug

Native node inspect + Chrome DevTools

IDE independent method.

Requires first launching the command to run the test in an "inspect mode" and then open the DevTools to perform the code debugging.

node --inspect --inspect-brk node_modules/.bin/jest test_file_to_run.js

Open Chrome and go to the URL "chrome://inspect/#devices".

To start debugging, press "inspect" and the inspector screen will be shown.

In case we don’t see our code, we just have to press "+ Add to workspace" and select the folder with our code.

Now we can use the debugger options(add breakpoints, go next, step over, etc…) to debug the code.

Close the inspector manually to exit debugging.

VSCode script runner

Replace Chrome DevTools inspector and use VSCode to debug our code directly in our code editor.

First task is to select the Debug menu in the sidebar.

Then we click on "Run and Debug".

Choose Node.js. This will create a file in our directory “.vscode/launch.json where our configurations will be stored.

Now we are going to add our “attach” configuration to debug our test files. For that, in the same debug view we are going to select "Add Configuration".

On the list we select "Node.js: Attach". The launch.json generated.

By now we are not going to need the other configuration, which is created when the file was created. So our file ends like:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach",
            "port": 9229,
            "request": "attach",
            "skipFiles": [
                "<node_internals/**"
            ],
            "type": "pwa-node"
        }
    ]
}

Now we are ready to start debugging our files. As we have done before, we run the command to start debugging:

node --inspect --inspect-brk node_modules/.bin/jest test_file_to_run.js

and then attach the process to debugger in VSCode.

Now we can just add breakpoint to debug our process and in the same way we have done with Chrome inspector.

VSCode extension

The easiest way to debug (and run) test case and moreover a single test file is using one of the available extensions for our VSCode.

For this example we are going to use the extension "Jest Runner".

Once installed, we are going to have a context menu to run or debug our test case. We just have to right-click over a test file and we can choose the action we want.

The only thing you need to do is to add the desired breakpoint before select "Debug Jest" and the debugging process will start inside your VSCode with all the previously seen options to debug our code.

Running async test

Example:

describe('Test', () => {
    let data;
    before(async () => {
        data = await doAsyncTask();
    });
    after(() => {
        clean();
    });
    
    if('check data', () => {
        expect(data).to.eql(true);
    });
});

while debugging you could see that the code in "after" could be called before the code in "before" block ends.

This may happen because of the test timeout. The max time for the test case to ends is shorter than the time we are spending debugging our code.

To fix this issue we just have to increase the jest timeout. There are several ways to increase the test timeout:

on the code: jest.setTimeout(50000); on the command: --testTimeout=NUMBER