VS-Code & Jest Integration

VS Code & Jest Integration

Every developer or development team wants to have confidence in their feature before publishing it to develop/master branches. To gain this confidence individuals or teams follow the test-driven development paradigm. Single Page App development is no exception to this kind of thinking. To achieve a high level of accuracy, and speed in the development process individuals or teams works with various IDEs and frameworks.

A fully functional and good development editor is one that provides all kinds of services during the development process to the individual developer and is properly integrated with all the frameworks present in the technical stack of the project.

In Single Page App development, VS-Code is not an alien name- it's one of the most popular, lightweight IDE. One can enhance the development experience by installing extensions. Similarly in the test-driven development paradigm JEST is the name that rings the bell for testing for both front-end and back-end applications.

As one said — the best way to learn swimming is to take a dive in the swimming pool. So let's gear-up and take a deep dive into integrating VS-Code with the JEST testing framework.

Step 1: Pre-requisite requirements

Follow the following steps, when setting up the whole development environment from the scratch.

• VS Code Editor: Download the VS Code editor from their official site based on the operating system https://code.visualstudio.com/download
• Create a react app: Create the vanilla version of the react app using the package https://github.com/microsoft/TypeScript-React-Starter

Step 2: Writing the first test

Let's assume that one has a small utility in the code that needs testing.

• Install jest,ts-jest, and @types/jest in the package, using the command npm install jest, ts-jest, @types/jest -D'
• Create a new folder __tests__ inside the "src" folder. The test folder naming convention allows it to be automatically picked up by the JEST framework.
• Create a new file inside the __tests__ folder following the naming convention "fileName.test.ts" e.g. "any-utility.test.ts"
• Let's write our first test: e.g. for cloning a JSON

describe('UtilityTest', () => {
  test('cloneJson', () => {
   const testJson = {"id": "someId", "data":"someData"}   
   const expectedJson = cloneJson(testJson)
   expect(expectedJson).toMatchObject(testJson)
  })
})

• Open the terminal, and navigate to the path where package.json is residing and execute the command: npm run test.
• The test will execute and show the result in the terminal.
• Congratulations! We have our first unit test running. But VS-Code is not showing any signs of tests, or test results synopsis.

Step 3: Integrate JEST in VS Code

• One can very easily get the JEST in VS code via the extensions, go to the extensions explorer, find and install JEST.
• Create a jest configuration file in the root folder of the project e.g. outside the src folder. Below is a small sample of the jest.config.js file. This jest configuration can either be a javascript file or a JSON file.

Jest.config.js

• Once JEST install, let's configure the settings.json in the VS Code for JEST

"jest.pathToJest": "**/node_modules/.bin/jest",
"jest.pathToConfig": "**/jest.config.js",
"jest.showCoverageOnLoad": true,

• All is configured now it's time to run the test using JEST, open the command palette, and search the command "Jest: Start Runner", this will start running the tests present in the __tests__ folder. Once all tests are executed a test status will appear in the status bar of the VS code.

Jest Status -VS Code Status Bar

• The above status bar shows the status and coverage of the tests in the code, and the third sign is an indication that jest is running in watch mode.
• Congratulations, half the battle was won. But still, there is some more ground to cover. Developers need or want to run or debug individual tests during the implementation phase, so for this purpose, one needs to integrate one more extension in the VS Code.

Step 4: Integrate Jest Run It

• One can very easily get the Jest Run It in VS code via the extensions, go to the extensions explorer, find and install Jest Run It.
• Once Jest Run It is installed, VS Code needs to be reloaded.
• Add some new configurations in the settings.json

"jestRunIt.jestPath": "**/node_modules/.bin/jest",
"jestRunIt.jestConfigPath": "**/jest.config.js",

Unit Test With Jest Run It

• Bravo!! Jest and Jest Run It is fully integrated with the VS code, enjoying a test-driven development paradigm during the implementation.

Thanks :)

Enjoy Coding With TDD :)