Getting started with Jest

Official logo of Jest

Recently I have came across some testing issue for my React project. So I looked into Jest, and I found this is an excellent tool to test not only React project but also JavaScript project. Thats why I have decided to share what I have learned.

You might think the Jest is only for testing React Application which is completely false you can test any kind of JavaScript Application with it.

First we need to understand, why do we actually need to test any app? Most of the time when we write a function generally we keep on mind the best use cases, we forget worst use cases. Suppose you write a function that returns multiply of two numbers, but if the one number is negative another one is positive then it can give you unexpected result. To know how it performs with best/worst cases we need to test. It can be an essential part if our Application is big.

I will try to let you know about Unit Testing, Integration Testing then you may get the idea of how to test your JavaScript Application using Jest.

Lets test a JavaScript application which is bundled by the Webpack(you can use anything Parcel/Browserify).

First install the Jest into your project using npm.

npm install --save-dev jest
or 
yarn add --dev jest

Then you need to add this into package.json inside scripts

"test": "jest --watchAll"

Make a .js file and export a function.

// App.js
export const add = (a, b) => a + b;

Make another file named App.test.js, you can make it in the same directory of App.js. Jest will automatically treat as a test file if you include .test in the file name.

Unit Test

A unit test is nothing but to test an individual unit(Function/Component). In the following example we have a add() function inside App.js file. Testing only this function can be called unit test.

// app.test.js
import { add } from "./App";
test('add', () => {
    expect(add(2, 2)).toBe(4)
})

As you can see after importing add, we wrote test() where first parameter is just a title of the test, second one is a callback function where we expect(add(2, 2)).toBe(4) simply means we are expecting the add function should return 4 if we pass 2 and 2.

Write npm run test in your terminal. You should see,

Testing with Jest(Unit Test)

It is saying that our add function passed all the test.

Now lets pass a failed test. Change the + sign of add function into - sign.

// App.js
export const add = (a, b) => a - b;

Testing with Jest(Unit Test)

Now it is saying our test expected the add function should return 4 but got 0. So this is a failed test.

The .toBe() is called a matcher. Just like .toBe() another one is .not.toBe()

// App.js
export const add = (a, b) => a + b;
// App.test.js
test("add", () => {
    expect(add(10, 5)).not.toBe(10);
});

It will check if the result of add(10, 5) can’t be 10.

There are many matchers you can find in their official doc(https://jestjs.io/docs/en/expect)

Integration Test

Integration Testing means, if one function doesn’t pass the test, rest of the functions which are dependent on that function will also be failed.

Let’s make an example.

// App.js
export const add = (a, b) => a + b;
export const total = (x, y) => add(x, y);

We are making two function add and total. Total is connected with the add function.

// App.test.js
import { add, total } from "./App";
test("add", () => {
    expect(add(10, 5)).toBe(15);
});
test("total", () => {
    expect(total(2, 4)).toBe(6);
});

Run the test you will see.

Testing with Jest(Integration Test)

You can see add and total successfully passed the test. Ok now change little bit of App.js file.

// App.js
export const add = (a, b) => a - b;
export const total = (x, y) => add(x, y);

Run the test

Testing with Jest(Integration Test)

See by changing only one function all of our test failed. This is called Integration Test.

Just like that you can test anything of your JS.

I suggest you the official documentation(https://jestjs.io/docs/en/getting-started).