Jest Tutorial For Beginners: Introduction [1/4]

abidullah786

ABIDULLAH786

Posted on June 23, 2022

Jest Tutorial For Beginners: Introduction [1/4]

Introduction

This tutorial is for those readers who want to learn jest from scratch. And the given instructions in this tutorial is to the point not that much detailed.

The provide examples code is availabe on my GitHub, go and clone the repository to run and practice the code live with toturial.

At the end of Jest Tutorial For Beginners series part-1 you will be able to design your test cases and run these test cases.

Most of the information here is taken from the Jest docs

Before moving forward I want to briefly describe the unit-test and integration test.

Unit Testing: Unit testing is the type of testing which is done on an individual function, module, method, procedure, or object.
For example: For a simple calculator application the developer can write the unit test to check if the user can enter two numbers and get the correct sum for addition functionality.

Integration Testing: Integration testing is a type of testing where two or more modules of an application are logically grouped together and tested as a whole.
For Example: To test a create user module or API we have to add checks (in form of middleware) on the user provided data to check that;

  • either user already exist in the system or not,
  • either user provided data is valid or not,
  • either user provided password is strong or not.

After checking all these the system will create user or through an error notification accordingly.

Pre-Requests

Create a project using npm or yarn (I will be using npm throughout this tutorial)

npm init -y
Enter fullscreen mode Exit fullscreen mode

after that run the following command to install the jest in your dev dependency.

npm install --save-dev jest
Enter fullscreen mode Exit fullscreen mode

jest

There are three main methods in this test file:

  • test() – It is the smallest unit test case that is written to be executed. String in quotes represents the test name
test("<test_name>",()=>{
    ...
})
Enter fullscreen mode Exit fullscreen mode
  • expect() – It is an assertion. Every test() statement has an expect() function which takes a value and expects a return in true form. Single test case can have multiple expect() functions.
test("<test_name>",()=>{
    ...
    expect(2+2).toBe(4);
    ...
})
Enter fullscreen mode Exit fullscreen mode
  • describe() – It is a suite of Test scripts that gives an outer description for the test suite. It could consist of more than one test cases.
describe("<name_to_tests_group>",()=>{

    test("<test_name>",()=>{
       ...
    });
    ...
    test("<test_name>",()=>{
       ...
    });
})
Enter fullscreen mode Exit fullscreen mode

Start Unit testing

Now Let's get started by writing a test for a function that add two numbers.

First, create a sum.js file:

function sum(a, b) {
  return a + b;
}
module.exports = sum;
Enter fullscreen mode Exit fullscreen mode

Now it is batter to have a separate directory of test cases for that follow the below-given steps

  • First create the __test__ repository
  • Add your test files in that directory the file name should have .test.js means <any_name>.test.js
    • It will be batter to have different test files for different tests
  • import the function module you want to test.
  • before starting the test write the test script in package.js Add the following section to your package.json:
{
  "scripts": {
    "test": "jest"
  }
}
Enter fullscreen mode Exit fullscreen mode

After reading the above guideline, create a file named sum.test.js.
This will contain actual test:

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

test("add", () => {
  expect(sum(1, 2)).toBe(3);
});
Enter fullscreen mode Exit fullscreen mode

Finally, run yarn test or npm test command and Jest will print this message:

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)
Enter fullscreen mode Exit fullscreen mode

WOW! You just successfully wrote your first test using Jest!

Conclusion

Some guidelines to be aware of it:
Create Test Suites:

  • Batter to have a separate test suite for each module.
  • A test suite is a file named like this: my-module-name.test.js
    • If we consider our previous example in that case the test suite name should be sum.test.js
  • A suite can have 1 or more tests.

Exploring new concepts and sharing them with others is my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, Linkedin and GitHub

As we know that everyone has a room to improve, so your suggestion is appreciated. And I would love (❤️) to know something new.

💖 💪 🙅 🚩
abidullah786
ABIDULLAH786

Posted on June 23, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related