Lesson Monday

Debugging is an essential part of testing and coding in general. We've already learned how to use breakpoints, console.log() statements and other debugging tools. Fortunately, we can use these tools with Jest as well.

However, there's a really important thing to consider. Jest runs its tests using Node (server-side JavaScript), not the browser. For that reason, we don't automatically have access to Chrome DevTools. Chrome does have a Node Debugger tool but it's a bit finicky and difficult to work with. Fortunately, we can use VSCode to debug with Jest.

Before we dive into this new tool, please keep in mind that being able to use this debugger successfully is not required for the independent project. As long as you can write tests, run them with Jest in the terminal using npm test, and debug manually using the terminal output, that is sufficient for successful testing and debugging.

Installation and Configuration

First, we'll need to install a new VSCode extension. Click on the Extensions icon in the left navbar (or go to Code > Preferences > Extensions) and search for Jest. Download the Jest extension made by Orta.

Jest extension made by Orta.

This extension will automatically load in projects that include Jest tests. We can use this extension to run our tests in VSCode - no need to do so in the terminal! Even better, our tests will reload when we make changes to our code - so we'll immediately see if we add code that breaks our tests.

Just as importantly, we'll be able to use this extension to help us debug our code without needing Chrome DevTools. First, though, we'll need to update our VSCode configuration.

First, we need to click on the Run and Debug icon in the left hand pane of VSCode. This icon has a play triangle with a little bug in its lower left corner.

The run and debug icon.

Next, we need to click the link called create a launch.json file in the Run and Debug pane.

The "create a launch.json file" button in the upper left corner of the Run and Debug pane.

A menu will open to select what environment you are working in. From the options listed, select Debug Jest tests using vscode-jest.

The menu to select your environment. Make sure to select "Debug Jest tests using vscode-jest".

This will open a file called launch.json, which is the configuration file for the project we are working on in VSCode. It will be populated with the correct configuration we need to use this tool in VSCode. It should look similar to what's shown in the following image. Take note that there could be differences in the configuration based on your operating system.

The launch.json configuration should look similar to what's listed in this image.

If you want to explore other possible configurations, within launch.json select the button to Add Configuration to bring up a dropdown with options. The configuration that we use is called {} Jest: Default Jest Configuration.

If you have any problems adding the configuration by following the above steps, you can always do so manually. Take a look at the Debugging in VSCode documentation in Jest for more information - and make sure to note that the configuration is slightly different for Macs and Windows.

launch.json is specific to our project - and we can consider it part of our environment. For that reason, we will need to add this launch.json file to each project where we want to have these settings. When we update the configuration of the launch.json file, it will automatically be saved in a directory in our project called .vscode.

We'll include the .vscode directory in our source control. That way, we don't have to set it up again every time we clone a project that has a VSCode configuration. Teams using VSCode will often commit this file because it will keep VSCode settings consistent across the team.

If you'd like to set the VSCode settings globally in your environment, you can do so by following these instructions. More information on updating user settings can be found here. However, it's not necessary to do this as a student at Epicodus.

Success!

Let's take a quick look at what the Jest extension is already showing. If these features aren't showing yet, you may need to restart VSCode first. Also, take note that the way the features look in the images may not line up exactly with how the Jest features appear on your own VSCode. This could be due to your own VSCode color theme, or due to style updates made to the extension by its authors. The features and functionality that we discuss should be the same.

In the blue bar at the bottom of the screen, you'll see the following:

The small Jest icon shows a check mark.

We'll see the word Jest with a little check mark by it. This indicates that all of our tests are passing. If we break any of our tests, this icon will change. We'll see this firsthand in the next lesson. This is a great way to always see if our tests are passing or not.

If we go to triangle.test.js, we'll also see a green check mark by each of our passing tests.

Green check mark by a passing test.

As of now, there's not much to see. That's because all of our tests are running smoothly. In the next lesson, we'll introduce a bug and then demonstrate how we can use this extension to debug our code as we're running our tests.

Lesson 32 of 48
Last updated June 21, 2021