{"id":128897,"date":"2020-09-01T10:57:14","date_gmt":"2020-09-01T10:57:14","guid":{"rendered":"https:\/\/www.softwaretestinghelp.com\/?page_id=128897"},"modified":"2025-04-01T08:32:01","modified_gmt":"2025-04-01T08:32:01","slug":"jest-testing-tutorial","status":"publish","type":"page","link":"https:\/\/www.softwaretestinghelp.com\/jest-testing-tutorial\/","title":{"rendered":"Jest Tutorial – JavaScript Unit Testing Using Jest Framework"},"content":{"rendered":"

In this Jest tutorial, we will learn about various Jest features, Jest Matchers, and how to use the Jest framework for JavaScript Unit Testing:<\/strong><\/p>\n

Jest is a Javascript Testing framework built by Facebook.<\/p>\n

It is primarily designed for React (which is also built by Facebook) based apps but could be used to write automation scenarios for any Javascript-based codebases.<\/p>\n

In this Jest testing tutorial, we will learn about various features of Jest, its matchers and see how we can use Jest with an end to end example. We will also explore about code coverage using Jest.<\/p>\n

<\/strong><\/em><\/p>\n

\"Jest<\/a><\/p>\n

List Of Tutorials In This JEST Series<\/strong><\/p>\n

Tutorial #1:<\/strong><\/span> Jest Tutorial – JavaScript Unit testing With Jest Framework<\/a>
\nTutorial #2:<\/strong><\/span> How To Test React Apps Using Jest Framework<\/a>
\nTutorial #3:<\/strong><\/span> Jest Configuration And Debugging Jest Based Tests<\/a><\/p>\n

\n

Getting Started With Jest Testing<\/h2>\n

Some of the advantages\/features of Jest are given below:<\/strong><\/p>\n

    \n
  1. Zero configuration required.<\/li>\n
  2. Fast:<\/strong> Jest tests run in parallel – this in turn greatly reduces the test execution time.<\/li>\n
  3. Built-in code coverage:<\/strong> Jest supports code coverage out of the box – this is a very useful metric for all CI-based delivery pipelines and overall test effectiveness of a project.<\/li>\n
  4. Isolated and sandboxed tests:<\/strong> Each Jest test runs in its own sandbox, which ensures no two tests can interfere or impact each other.<\/li>\n
  5. Powerful Mocking support:<\/strong> Jest tests support all types of mocking – be it functional mocking, timer mocking, or mocking individual API calls.<\/li>\n
  6. Support snapshot testing:<\/strong> Snapshot testing is relevant from the React perspective. Jest supports capturing a snapshot of the react component being tested – this can validate with the component\u2019s actual output. This greatly helps in validating the component\u2019s behavior.<\/li>\n<\/ol>\n

    Jest Framework For JavaScript Unit Testing<\/h2>\n

    In this section, we will see an end to end example to write tests using the JEST framework for a simple Javascript function. Firstly, let’s see how to install the JEST framework in our project<\/p>\n

    JEST Installation<\/span><\/h3>\n

    Jest is simply a node package and can be installed using any node-based package manager. Example,<\/strong><\/span> npm or yarn.<\/p>\n

    Let\u2019s see some sample commands that can be used to install Jest package.<\/strong><\/p>\n

    yarn add --dev jest<\/pre>\n
    npm install --save-dev jest<\/pre>\n
    For installing the Jest module globally, you can simply use the \u2018-g\u2019 flag along with the npm command. This will enable you to use Jest commands directly without configuring the package file for npm tests.<\/p>\n
    npm install -g jest<\/pre>\n
    Using Jest In A Node-based Project<\/span><\/h3>\n
    To use Jest in a node-based project, simply use the commands from the above section to install the node package for Jest.<\/p>\n
    Follow the below steps, in order to create a node project from start and then install Jest into it.<\/strong><\/p>\n
    #1)<\/strong> Create a folder\/directory with a name as your project name, for example<\/strong><\/span>, myFirstNodeProject<\/p>\n
    #2)<\/strong> Now using the terminal or command line, navigate to the project created in the above step and execute the npm init script using the below command.<\/p>\n
    npm init<\/pre>\n
    #3)<\/strong> Once the above command is executed, it will prompt for different questions\/parameters.<\/p>\n
    For example<\/strong><\/span>, the name of the project, version, etc. Simply keep pressing enter (and accept the default values). Once completed, you will see a package.json file created in your project. This is a mandatory configuration file for any node-based project<\/p>\n
    #4)<\/strong> Now execute the command to install the Jest package into the newly created project using the below command.<\/p>\n
    npm install --save-dev jest<\/pre>\n
    This will install the Jest module (as well as its dependencies).<\/p>\n
    #5)<\/strong> Now, we have a node project ready with Jest bindings. Let\u2019s configure the npm test script to run the Jest tests i.e. when the command \u2018npm test\u2019 is executed, the script should run all the Jest framework based tests.<\/p>\n
    To do that, update the package.json file and add a script section as shown below.<\/p>\n
    \r\n"scripts": {\r\n  "test": "jest"\r\n }\r\n<\/pre>\n
    The final package.json file will look as shown below.<\/strong><\/p>\n
    \r\n{\r\n "name": "jest-e2e",\r\n "version": "1.0.0",\r\n "description": "",\r\n "main": "index.js",\r\n "scripts": {\r\n   "test": "jest"\r\n },\r\n "author": "",\r\n "license": "ISC",\r\n "dependencies": {\r\n   "jest": "^25.1.0"\r\n }\r\n}\r\n<\/pre>\n
    Writing Tests For A Javascript Function<\/span><\/h3>\n
    In this section, we will create a simple Javascript function code for addition, subtraction, and multiplication of 2 numbers and write the corresponding Jest based tests for it.<\/p>\n
    First, let\u2019s see how the code for our application (or function) under test looks like.<\/strong><\/p>\n
    #1)<\/strong> In the node project created in the above section, create a js file named calculator.js with contents as shown below<\/p>\n
    \r\nconst mathOperations = {\r\n   sum: function(a,b) {\r\n       return a + b;\r\n   },\r\n  \r\n   diff: function(a,b) {\r\n       return a - b;\r\n   },\r\n   product: function(a,b) {\r\n       return a * b\r\n   }\r\n}\r\n  module.exports = mathOperations\r\n<\/pre>\n
    #2)<\/strong> Now, create a test file in the same folder for these tests, named calculator.test.js<\/strong> – this is the convention expected by the Jest framework to look for all the files that contain Jest based tests. We will also import the function under test, in order to execute the code in the test.<\/p>\n
    This is how the file would look with just import \/ require declaration.<\/p>\n
    const mathOperations = require('.\/calculator');<\/pre>\n
    #3)<\/strong> Now, let\u2019s write tests for different methods in the main file i.e. sum, diff, and product.<\/p>\n
    Jest tests follow BDD style tests, with each test suite having one main describe block and can have multiple test blocks. Also, please note that the tests can have nested describe blocks as well.<\/p>\n
    Let\u2019s write a test for adding 2 numbers and validate the expected results. We will be supplying the numbers as 1 & 2 and expecting the output as 3.<\/p>\n
    \r\ndescribe("Calculator tests", () => {\r\n test('adding 1 + 2 should return 3', () => {\r\n   expect(mathOperations.sum(1, 2)).toBe(3);\r\n });\r\n})\r\n<\/pre>\n
    Please refer to the below points w.r.t the test above:<\/strong><\/p>\n
    a)<\/strong> The describe block is an outer description for the test suite i.e it represents a generic container for all the tests that we are going to write for the calculator in this file.<\/p>\n
    b)<\/strong> Next, we have an individual test block – this represents a single test. The string in quotes represents the name of the test.<\/p>\n
    c)<\/strong> Refer to the code in the expect block – \u201cexpect\u201d is nothing but an assertion. The statement is calling the sum method in the function under test with inputs 1 & 2 and expecting the output to be 3.<\/p>\n
    We can also rewrite this in a simpler way to understand it better.<\/p>\n
    Please see below, now we have separated the function call and assertion as 2 separate statements to make it more succinct.<\/p>\n
    \r\ndescribe("Calculator tests", () => {\r\n test('adding 1 + 2 should return 3', () => {\r\n   \/\/ arrange and act\r\n   var result = mathOperations.sum(1,2)\r\n\r\n   \/\/ assert\r\n   expect(result).toBe(3);\r\n });\r\n})\r\n<\/pre>\n
    d)<\/strong> In order to run this test, simply run the command \u201cnpm test<\/strong>\u201d in the terminal or command prompt at the project location.<\/p>\n
    You will see the output as shown below.<\/strong><\/p>\n
    \"Run<\/a><\/p>\n
    #4)<\/strong> Let\u2019s try some more tests.<\/p>\n
    a)<\/strong> First, write a failing test and see what output we get. Let’s just change the result to some incorrect value in the same test that we wrote in the last section. See how the test looks like.<\/p>\n
    \r\ndescribe("Calculator tests", () => {\r\n test('adding 1 + 2 should return 10', () => {\r\n   \/\/ arrange and act\r\n   var result = mathOperations.sum(1,2)\r\n\r\n   \/\/ assert\r\n   expect(result).toBe(10);\r\n });\r\n})\r\n<\/pre>\n
    Here we are expecting a sum of 1 and 2 to return 10 which is incorrect.<\/p>\n
    Let\u2019s try executing this and see what we get.<\/strong><\/p>\n
    \"detailed<\/a><\/p>\n
    You can see the detailed output when a test is failed i.e. what was actually returned and what was expected and which line caused the error in the function under test etc.<\/p>\n
    b)<\/strong> Let\u2019s write more tests for the other functions i.e difference and product.<\/p>\n
    The test file with all the tests will look as shown below.<\/p>\n
    \r\nconst mathOperations = require('.\/calculator');\r\n\r\ndescribe("Calculator tests", () => {\r\n test('adding 1 + 2 should return 3', () => {\r\n   \/\/ arrange and act\r\n   var result = mathOperations.sum(1,2)\r\n\r\n   \/\/ assert\r\n   expect(result).toBe(3);\r\n });\r\n\r\n test("subtracting 2 from 10 should return 8", () => {\r\n   \/\/ arrange and act\r\n   var result = mathOperations.diff(10,2)\r\n\r\n   \/\/ assert\r\n   expect(result).toBe(8);\r\n });\r\n\r\n test("multiplying 2 and 8 should return 16", () => {\r\n   \/\/ arrange and act\r\n   var result = mathOperations.product(2,8)\r\n\r\n   \/\/ assert\r\n   expect(result).toBe(16);\r\n });\r\n})\r\n<\/pre>\n
    When the above tests are executed, the output given below gets generated.<\/strong><\/p>\n
    \"Tests<\/a><\/p>\n
    Video Tutorial: What Is Jest<\/span><\/h3>\n