Getting started with JEST JavaScript Testing Framework

About This Article

This article is very beginner-friendly, and we discuss how to use JEST using a simple example.

What is JEST?

Jest is javascript testing framework designed by Facebook. It allows you to test you javascript code with an approachable, familiar and feature-rich API that gives you results quickly.

You can find more details from the JEST official website.

Why JEST?

Let's learn how to work with JEST by using few simple examples. Before we dig into coding and testing, let's understand why do we need JEST.

Answer is very simple. When we develop an application using Javascript, we write several functions/methods. We group several statements/instruction in a function.

Our main intention is to do something and get something done using a function. We should check whether the function is working as intended. JEST is used for testing purposes. We can check our functions are working as intended using testcases. JEST helps to write the testcases and compare the actual output and expected output. This way we can guarantee our functions are working as it supposed to be.
Ultimately, we can find bugs, resolve issues, and we can develop a better application.

Getting started with JEST

1. Create a folder, cd into the directory and open up the terminal. Create a package.json file. You can use following command to create the package.json file. Then, enter necessary details to create the package.json file. (Feel free to use an IDE or code editor)

    npm init

1. Let's install jest as development dependency using following command.

npm install --save-dev jest

1. Add the following section to your package.json

{
  "scripts": {
    "test": "jest"
  }
}

package.json file will look like this:

{
  "name": "jest-demo",
  "version": "1.0.0",
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest": "^27.0.3"
  }
}

Now, we ready to do some javascript coding part.

1. Then, let's create sum.js file and let's write a function to return the sum of two numbers.

sum.js file:

/** This function will take two numbers and return the sum of the two numbers. */
function sum(number1, number2) {
    return (number1 + number2);
}

module.exports = sum;

1. let's create sum.test.js file to check the function we created.

sum.test.js file:

const sum = require('./sum');

/** let's check this function is performing the way as we intended. */
test('add 10 + 2 to equal 12', () => {
    expect(sum(10, 2)).toBe(12);
});

1. Let's run this testcase. You should open up the terminal and run following command. If the test case passed JEST will display the result as 'passed'. If test case failed, JEST will display the respective result.

npm run test

Result

JEST will display the test case is passed. That means sum function performs the way we want.

Let's do some changes.

1. Let's change the sum function to something like this. Then, run the testcase again and see the output.

sum.js file:

/** This function will take two numbers and return the sum of the two numbers. */
function sum(number1, number2) {
    return (number1 - number2); // instead of additon, let's do deduction.
}

module.exports = sum;

Result

JEST will display the test case is failed. Let's understand what happens here.
We did change the sum function to make a deduction and return the output, but we are expecting an addition, right?

Now, sum function is not doing what we are excepting it to do.
Then, we can decide something wrong with the sum function, and we need to fix it.

In this way, we find issues in our code and fix those issues immediately.

Note: When we work with Javascript, we deal with asynchronous programming, there we use callbacks, promises and 'async and await' keywords.
We can use JEST to test asynchronous functions too. You can find JEST documentation in the official documentation.
There you can find more details about how to use JEST for your need.