Set up Jest extension
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Pain Free Mocking with Jest course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Pain Free Mocking with Jest, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:24] In this lesson, I'll demonstrate how to install and setup the Jest extension, which provides a seamless testing experience directly within Visual Studio Code. To get started, open the extension sidebar in Visual Studio Code by clicking on this icon.
[00:25 - 00:37] Once you have the extension sidebar open, search for "Jest" in the "Sedgebar" at the top. The first result should be the one published by Otter.
[00:38 - 00:48] Click on the "Install" button next to the Jest extension to start the installation process. Once the installation is complete, you see this icon in the sidebar.
[00:49 - 01:00] Now that we have Jest extension installed, let's see how it simplifies running tests compared to running npm scripts. In the code editor window, open the test file you want to run tests from.
[01:01 - 01:18] With the Jest extension installed, you'll notice a new run icon next to each describe and test case. To run the test, simply click on the "Run" icon and the Jest extension will execute the test and display the results directly within Visual Studio Code.
[01:19 - 01:24] The Jest extension offers even more powerful features such as debugging. Let's see how it works.
[01:25 - 01:41] In the test file, you can set brick points by clicking on the line number where you want the program execution to pause. This allows you to gradually follow the program execution and inspect variables at specific points.
[01:42 - 02:06] Once the brick point is set, click on the debug icon in the sidebar. Now as you run your test, the program execution will pause at the brick points you set, which was here.
[02:07 - 02:30] You can step through the code line by line, enter functions or skip over sections to better understand the flow and behavior of your tests. By clicking on this, it means I'm stepping over this line and here I can choose to enter its password correct function.
[02:31 - 02:51] By using Jest extensions debugging feature, you can troubleshoot and understand the inner workings of your tests even more effectively. Adding the Jest extension to Visual Studio Code normally simplifies running tests, but also provides powerful debugging capabilities with features like brick points, stepping through code and the respective variables.