Writing your First Test Case using JEST

Writing your First Test Case using JEST

ยท

5 min read

Testing in JavaScript is one of the most important skills you can know as a developer. It's something a lot of people don't focus on. But if you know to test, it's going to set you apart from every other developer that does not know to test and give you that extra leg up when you are applying for jobs.

Earlier this week, I met a friend of mine and we started discussing and chit-chatting about things from here and there. I don't remember the exact context of the conversation, but I remember a crux of it.

So I asked him a question, I asked Smith did you ever wrote Unit Tests for the applications you develop?

He very politely told me, Smile I don't have time for writing a test case . Plus I don't need them as I know my code works.

Have you ever encountered such answers or gave such answers to your fellow developers?

no-need-to-test-my-code-it-works-perfect.jpg

For the record, when I did not know the nitty and gritty of test cases. I also used to say this "I had a firm confidence that my code works evenly".

Learn Jest.jpg

What is Jest?

  • If in one word I have to define Jest; it will be a JavaScript-based Testing Framework.
  • Its aim is to make testing simple and easy.

Setting up Jest in the Local Machine

  • While installing Jest: just remember to install it as a dev dependency. The reason behind this is very simple. We just do testing in the dev environment and not in the prod environment.

Steps to be followed along.

  • Step 1: Open a new folder and do either npm init or npm init -y (to set all default values in the npm package installation)

Screenshot (928).png

  • Step 2: Install npm package Jest in the dev dependencies.
npm i -D jest

Screenshot (930).png

Drumrolls! ๐Ÿฅ๐ŸŽ‰ Setup of Jest Framework is done in the project.

dance-dancing-GIF-by-The-Dude-unscreen-2.gif

Writing your First Test Case

Before writing your first test case this is something you do need to do. Its most important step. Adding Jest in the test script.

Screenshot (929).png

To check if this test script has been added evenly to your code what you can do is; in your terminal enter

npm test

image.png

Ewww, what is this? The thing did smile told me something wrong or the blog is useless. No, it's not the case. Actually, the thing is we have not written any test case yet that's the reason this error popped up. Don't worry we will fix it right away.

Since a test case is something we write for some particular scenario. I will give you a mock scenario. You have a function that finds the sum of two numbers. (Addition of two numbers in another word) You have to write a test case for the same function i.e. test cases for a function that performs addition.

If you are reading this blog and you are new to javascript, don't you worry buddy. I will help you out in writing the function. Here are steps to follow along.

Step 1. Make a file called sum.js in your current directory (the same directory in which you have configured jest)

Step 2. Add the below-mentioned code in the file.

// This function accepts two parameters
function sum(a, b) {
  return a + b;
}
module.exports(sum);

Since our function is ready let's get going, by writing our first test case finally.

To create your very first test, all you need to do is create a file and give it the exact same name as the file you want to test. In our case, we will test sum and then you will create sum.test.js

Step 3. Open the file sum.test.js

Inside this file, all we need to do is import our sum function. (The same function we exported in the sum.js file)

Here is how you import a function:

const sum = require('./sum')

Once our function is imported we will write a test for it. Here in our situation what will do, we are going to test a scenario, where we will provide 2 parameters (say 1 and 2) and will make sure that is giving correct output. (In case of 1+2 it will be 3)

In order to write a test case with Jest we will use a function called test

Now the question that might come to your mind is ๐Ÿง What is the syntax or the parameters needed for the test function?

The first Parameter of this test function is a string that tells us what the test function is doing. In our case we can give it as Adding two number - it can be anything that you like. Just remember that this will come in the console while we are executing the test. So it's the cherry on the cake - if the name is meaningful.

The second Parameter is going to be a function and this is a function that gets called when we run the test.

To sum it up, we have a test which is going to properly add 2 numbers and then it calls this function and inside this function, we need to make sure that our expected results happen.

Jest has functions inbuilt to allow this testing and those test functions are called expect.

For instance, What I am saying is that we expect something to equal something else so we are expecting a sum of 1, and 2 is 3. In the way of jest, we can say that we expect(sum(1,2)).toBe(3).

Here is how the code will look like

const sum = require('./sum')

test("Add two number", () =>{
    expect(sum(1,2)).toBe(3)
})

In technical terms - we called this .toBe as a matcher.

In this code, expect(1 + 2) returns an "expectation" object. You typically won't do much with these expectation objects except call matches on them. In this code, .toBe(3) is the matcher. When Jest runs, it tracks all the failing matches so that it can print out nice error messages for you.

Drumrolls! ๐Ÿฅ๐ŸŽ‰ You wrote your first test case.

Now, let's run the test - Remember how to run the test case! Simply write in your terminal npm test.

image.png

Here's how the output will look like if the test case has been a pass.

And that's all, you have successfully written your first test case. ๐Ÿฅ๐ŸŽ‰