Jest VSCode Plugin
When writing tests for your application, it can be tedious and distracting to switch between the terminal and IDE to execute tests and verify that all tests are passing. What if there was a more streamlined approach that simply displayed the results of tests directly within the IDE, with each result (passing or failing) adjacent to its corresponding test? If you are writing tests using the Jest framework, and your IDE of choice is VSCode, then there is a plugin in the VSCode marketplace that automatically runs tests and shows individual test results inline. Getting this immediate feedback within the editor improves productivity and reduces context switching. Below, I'm going to show you: Click the "Extensions" icon in the Activity Bar on the left-side of the VSCode window and type "jest" into the search bar at the top of the Extensions view. Select the result with the publisher "Orta" (the first result with the most downloads). Install the plugin by clicking on the green "Install" button. When you open a project in VSCode with a Jest installation (detects Jest in node_modules ), this plugin will automatically start Jest. To demonstrate the capabilities of this plugin, we will explore how it runs for an existing project with Jest installed. Download this project from GitHub: Open the project in VSCode, navigate to the __tests__/index.test.ts file and open it. Take note of the checkmarks, which each indicate a passing test, preceding each it . If it doesn't show up automatically, then manually start the runner: To enable debugging for Jest tests, create a .vscode directory in the root of the project, and inside of this directory, add a launch.json configuration file that contains the following: ( .vscode/launch.json ) Here's what each configuration option does: In short, this configuration automatically launches and attaches the VSCode Node.js debugger to a process running the tests. Let's revisit __tests__/index.test.ts and make a small adjustment to one of the tests. For the first test, store the hex and RGB literals in an object, and reference their values from this object. ( __tests__/index.test.ts ) Place a breakpoint on the line with the assertion: Launch Command Palette ( CMD + SHIFT + p on Mac or CTRL + SHIFT + p on Windows). Select the option "Debug: Select and Start Debugging," followed by "Debug rgb-hex Tests." On the left, a debug pane with runtime variables, call stack and breakpoint sections will be shown. Notice how the values of the local variables (in this case, white ) can be observed. On the top, there will be control buttons that can be used to step through, restart or stop the execution of the tests. Since there are no more breakpoints, press the red square button in the control buttons group to stop the execution of the tests. Experiment! Add more tests and breakpoints. Explore VSCode's debugger's other features . If you want to learn more about testing TypeScript + React applications with Jest, then check out Fullstack React with TypeScript :
