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.

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 gear icon in the upper left corner of the Run and Debug pane.

The gear icon in the upper left corner of the Run and Debug pane.

This icon opens a file called launch.json, which is the configuration file for the project we are working on in VSCode. This file 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.

Next, click on the button to Add Configuration to bring up a dropdown. The nice thing about VSCode is that we don't need to hunt down the basic configuration code we need for this tool. It's already provided for us. We can click on {} Jest: Default Jest Configuration to automatically add the necessary configuration. Once we do so, we need to manually save launch.json.

If you have any problems adding the configuration this way, 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.

The following GIF walks through the entire process of adding the configuration. You can disregard the code on the left, which shows broken tests - we'll be breaking our code intentionally in the next lesson.

GIF shows the process of opening the Run and Debug pane and updating the launch.json file.

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.)

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 more than 3 months ago.