Vscode and tests integration¶
In this tutorial you are going to learn how to debug your test files with vscode and jest.
What is jest¶
Jest is a delightful JavaScript Testing Framework with a focus on simplicity and work with a set of projects.
How vscode debugger works¶
Visual Studio Code is a flexible IDE agnostic to the language or framework, each developer can adapt the IDE with custom configurations, extensions, tasks and more.
By default vscode has a built-in support for node.js runtime, so it can debug
Js, Ts or any language which gets transpiled to Javascript. The ITsynch Suite
needs to use the launch.json file to configure the jest test.
Test a file¶
To test the current opened file you can do it using ctrl+f5. This is going to open an integrated console running the test of your code.
Debug a test file¶
To start the debugger yo can go to the Run(ctrl+shift+d), select the launch
configuration and click the start button or you can use the bottom bar:
This actions will open an integrated console were you can see how jest is working to find your file, printing the test results and coverage results.
Debugger toolbar¶
When the debugger start vscode show a special toolbar where you can control the execution.
Breakpoints¶
You can "pause" the execution of the debugger in any line using breakpoints, VS code also add more types, take a look here:
Debugger configuration¶
Jest use RegEx patters to match test files, it means that you cannot access directly to a test with the complete file path.
Important
On Windows, you will need to use / as a path separator or escape as \. Jest is always using regex to match file names. When you are on Windows, and the path separator is (back slash), then passing full path to the test never works.
So in order to support any file name no mater the file, we are using the jest
option --test-path-pattern with the fileBasenameNoExtension vscode property.
This configuration allow us to run the test in current file opened.