3 Easy Ways to Debug Jest Tests

• Introduction
• 1# native node inspect + Chrome DevTools
• 2# VSCode script runner
• 3# VSCode extension
• Summary table
• Extra point: async testing problem

Writing tests is a crucial part of software development. The more common ones are unit or integration test and these are the ones that are the most relevant for this article.

The idea behind debugging a test is to depend less on “console.log” expressions and helps to find that thing that makes our test fail. In the Javascript world, with “zero compile time” and the faster start times, we tend to write some “console.log”, run and see what was the output. In other compiled languages, where that process is too slow to be practice, the debugging tools are much more used. I think this is something we have to take as ours to improve our quality as developers.

Here, we’re going to see three different ways to run a test in debugging mode, from the “hardest” to the “easiest” (for me), at least from the point of view of “things you have to do” to run the test case in a debug mode. The first case will be totally IDE independent and the other two will be based on Visual Studio Code. All the options will use Jest as a test runner.

1. native node inspect + Chrome DevTools

This way requires first launching the command to run the test in an “inspect mode” and then open the DevTools to perform the code debugging.

• running the command (with — inspect-brk we ensure to stop the process at the first line, more info here)

• this will show something like

• now we should open our Chrome application and go to the URL “chrome://inspect/#devices” where we will see

• 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. As soon as we see our folder structure to the left, we can navigate and open the desired files. We can also press “CMD + o” (CTRL + o in windows) to search for a file by name
• now we can use the debugger options(add breakpoints, go next, step over, etc…) to debug or code

One important thing here is that until we close the inspector view our test runner command is not going to end, even when the test code has been all processed.

2. VSCode script runner

VSCode debugger allows us to make several different things to debug our code. Here, we are just going to show how to 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 “Ejecutar y depurar” (this will be in your system language) and we are going to see something like

• we 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 “Agregar configuración” (translated to your system language)

• on the list we select “Node.js: Attach”

• now we have a “launch.json” file like this

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

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

• and then attach de process to our debugger in VSCode

• now we can just add breakpoint to debug our process and in the same way we have done with Chrome inspector, we can see variables values, continue the process, etc.

The other option we have here is that we can press “Attach” first and then run the command to start the test. If we choose this method, we:

• have to add breakpoint to our code first (to ensure the execution stops at some point in our code)
• we can remove the “— inspect-brk” from our command

3. VSCode extension

The easiest way to debug (and run) our 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

Another way to run a test with the installed extension is using the command tool:

• Shift + Cmd+ p (Shift + Ctrl +p in windows) to open the command palette
• write “jest”

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.

Summary Table

Extra point: “problem running async test”

This “problem” is common for all the ways to debug a test case we have seen before. Let’s explain the “problem”.

For a test case like

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, here are two of them:

• on the code: jest.setTimeout(30000);
• on the command: --testTimeouthttps://jestjs.io/docs/cli#testtimeout-number

I hope you like the content and start using more he debugging tools we have and lees the old good “console.log”.

If you have other ways to debug your Jest test cases, please let me know in the comments.

Thanks for reading.

More content at plainenglish.io