Let’s talk about Testing in Visual Studio Code.

Ever wondered how you can easily execute your tests from your VS Code with maximum flexibility?

In this tutorial, we will tackle how we can improve executing tests in JavaScript projects.

We will be using ‘create-react-app’ from Facebook. This tutorial can be followed along with any project which has ‘Jest’ installed.

You can follow along by cloning this repository:

Or you can do the following to integrate tasks to your existing project:

– The first thing you must do is creating .vscode folder if you don’t have on your root directory. And inside it, create tasks.json. And add the following code there:

tasks array contains array of tasks that can be executed through VS Code. It contains execution of All Tests, Single File, Single Test respectively. inputs array contains array of inputs that will be used for getting options and inputs from user.

To run the tests you can do the following:

Terminal menu from VS code’s menu and select Run Tasks…

Available tasks will be visible on top of your list, which is added by tasks.json file in .vscode folder.

Run examples, try the following list to see all different examples provided by the repository:

Single File: This task will run only one test file by asking user prompt of file name. For example, by typing Link will execute only Link.test.js file.

This task will run only one test file by asking user prompt of file name. For example, by typing will execute only file. All tests: This task will run all test files if there is any change made.

This task will run all test files if there is any change made. All tests — watch selection: This task will run all test files but expects from user to select the option to watch contentiously all test files.

This task will run all test files but expects from user to select the option to watch contentiously all test files. ‘describe’ or ‘link’ block: This task expects input from the user to enter string for containing regex search inside describe or test blocks in all test files. For example, if you type ‘itnext’, it will find just one test block and execute it.

For more advanced usages please refer to official documentation:

https://code.visualstudio.com/docs/editor/tasks