Preface:
Jest is a popular JavaScript testing framework that provides clean, flexible and powerful tools to write and run unit tests. Using Jest in Visual Studio Code (VS Code) can further enhance the efficiency and experience of unit testing.
Significantly Improve Your Testing Process with Jest Extensions
I've been writing unit tests with Jest for 5-6 years now. It has always been able to write proper unit tests for classes, methods and components. In all my projects, I always run Jest from the command line, and I initialize the project by setting up a simplenpm testmaybeyarn testcommand and use it when manual testing is required. Additionally, the tests are run in the CI/CD pipeline whenever a new pull/merge request is created. However, recently I discovered the VSCode Jest Extension. This extension provides a better workflow than the command line. Let's take a look at a few features.
1. Automatically start the Jest test
If Jest is installed in the root folder of the project, then this plugin will work out of the box and will start monitoring changes to run relevant tests. If Jest is not installed in the root folder, custom commands can be easily set up via the VSCode settings in the workspace or the global VSCode settings. For example: "": "yarn test"
2. Display of individual failed/passed test cases
The VSCode Jest extension provides a visual interface in the pass/fail test file. In addition, tests can be re-run by clicking on the green/red icons.
The Jest extension adds an inline red underline where a test fails and displays a detailed error message. Additionally, the status of all tests can be seen on the left side.The VSCode Jest extension provides a visual interface in the test file where the test passed/failed. In addition, tests can be re-run by clicking on the green/red icons.The Visual Studio sidebar has a test panel that will now display all jtest test cases and their status. This provides a quick overview and an easy way to navigate between tests.
In addition, failed tests are shown in the Problem Checker in the bottom panel.
Allow debugging of unit tests
We can easily set up debugging for Jest tests. First, in the root directory of your project, create or open the.vscode/. The following configuration should be added to the file.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest single run all tests",
"program": "${workspaceRoot}/node_modules/jest/bin/",
"args": [
"-c",
"./",
"--verbose",
"-i",
"--no-cache"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}Navigate to the test file and set a breakpoint anywhere in the code that you want to debug. You can set a breakpoint by clicking on the position to the left of the line number to set the dot.
The breakpoint example on line 13 is in the "Run and Debug" panel, where you can start debugging by pressing the Play button. This will display a lot of information: Local variables - all local variables will be displayed in the upper left part of the panel along with their values. You can use the debugger features to move around the test line, or even to the method you are testing, to find out why the test fails.Closure - all variables accessible in the closure.Global - all globally accessible variables.
Displaying code coverage in a file
The VSCode Jest extension provides an option to toggle code coverage reporting via the command panel. Open the command panel and look forJest:Toggle Coveragecommand. This will toggle several items in the code file, as shown in the screenshot below. ● At the top of the file, you can get global information about the coverage of this file. It shows the percentage of functions, statements and branches covered by the unit tests. ● Untested lines are labeled with a red background. This helps to identify untested paths in the code at a glance. ● Partially tested code is marked with a yellow background. For example, the following ternary operator is tested in only one case, but never reaches the else clause.
reach a verdict
If you're like me and have only ever used the CLI interface for unit testing, I highly recommend giving the editor tool a try. I didn't realize how much I really needed it until I experienced it first hand.
to this article on the use of Jest in Visual Studio Code for better unit testing of the article is introduced to this, more related Jest Visual Studio Code unit testing content, please search for my previous articles or continue to browse the following related articles I hope you will support me in the future more!