Debug your tests in TypeScript with Visual Studio Code
Tags: Testing, Typescript, Debugging, Nodejs, JavaScript

In this article we use the example project from the previous article which was about how to set up a new project with jest in Typescript.

Source on GitHub: https://github.com/bromix/typescript-jest-example

As your project continues to grow and increase in complexity, so do the tests grow in number. Let’s just imagine we have a big project with about 100 tests and now one test is failing. You have to know which test it failing, why it’s failing and where in the source code the error occurs.

Getting started

As we did in the previous article, we change the add() function again, causing an error.

If we run all tests from the console, we will see something similar to the image below, but it would be very helpful if the IDE could help us to work more efficient.

Test Explorer UI extension

I won’t go into detail about what this excellent extension can do. All information about it can be found on the Marketplace page.

The short version is that this extension adds a Test Explorer to Visual Studio Code and it supports different languages and testing frameworks via additional extensions (called adapters) written by the community. Just have a look at the Marketplace page and see how many languages and test frameworks are supported. I myself use it for TypeScript, Python and C++.

We will install the Jest Test Explorer adapter. The adapter also installs the dependent Test Explorer UI extension for us (if not already installed).

How does it work?

After the adapter and the extension are installed, you will see a new icon on the left side (a test tube). When you click on it, you will enter the Test Explorer.

You get an overview per test file (in our case calc.test.ts ) and the tests contained in it in their own hierarchy. In the graphic above, I tried to visualize the relations from the Test Explorer to the tests in the file.

You may also have noticed the additional entries above each test in the test file. These entries will help you to run a single individual test or just debug a single test with working breakpoints.

Run will only run the test with no debugger attached.

Debug will run the test with a debugger attached.

Show in Test Explorer will jump to the entry in the Test Explorer.

run tests individual or all at once

If you navigate through the Test Explorer, you will see that you can run tests at any level in the hierarchy.

For this example, let’s just run all the tests and we will see that all the tests will fail.

To demonstrate the usefulness of the Test Explorer, we add a additional function for multiplying two numbers and write a suitable test for it.

function mul(x,y) in src/calc.ts

test for mul(x,y) in test/calc.test.ts

You will immediately see that the Test Explorer has updated its overview with the new test. Now we start all the test again…

showing which tests are failing and which are not

In the overview you can now see exactly which test is failing from which hierarchy. Now let’s imagine, as I mentioned at the beginning, that we might have a project with 100 tests. You can quickly lose track of that. The Test Explorer can be a great help to debug individual tests (if several fail) one after the other.

Debug a failing test

If you select one of the failed tests, you get the option (last icon on the far right) to jump directly to the implementation of the test.

jump to the implementation of the test

Now we can set a breakpoint at the test and run the single test with debug, wait for the debugger to stop at the breakpoint, press F11 to jump into the function add() and look at the values x and y and check why the returned value is false.

We replace our incorrectly set - with a + and run the tests again. After that, all tests should run successfully again.

all tests run without errors

Conclusion

This was intentionally a very simplified example of how debugging based on tests can work. I didn’t wanted to distract with too much advanced functions, but just show the approach and principles in this article.

Additionally, I wanted to point out the so useful extension Test UI Explorer by Holger Benl for Visual Studio Code. Without this extension, in my opinion, debugging tests makes no sense anymore. The extension gives you as a developer an overview, and saves time in debugging the tests one by one.

I hope you enjoyed the article, if you have any questions or suggestions just contact me.

The complete example is available on GitHub: https://github.com/bromix/typescript-jest-example