DEV Community

Cover image for Introduction to Testing in JavaScript using Jest
Jack Pritom Soren
Jack Pritom Soren

Posted on

Introduction to Testing in JavaScript using Jest

Jest is a JavaScript testing framework that is used to test JavaScript code. It is a popular choice for testing React applications. Jest is a JavaScript library for creating, running, and structuring tests. It ships as an NPM package and can be installed in any JavaScript project.

It allows you to write tests with an approachable, familiar and feature-rich API that gives you results quickly. Some of the top features of Jest include:

  • Snapshot testing
  • Mock functions
  • Code coverage
  • Test coverage
  • Built-in code coverage reports
  • Parallel test running

Today we are going to see a simple testing.

Installation:

Initializes a new Node.js project with a default package.json file. The -y flag skips the interactive prompt and uses the default values for all fields in the package.json file.

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

The --save-dev flag is used to save the package as a development dependency in the devDependencies section of the package.json file. This means that the package is only required for development purposes and not for production. The --save flag is used to save the package as a production dependency in the dependencies section of the package.json file. This means that the package is required for both development and production purposes.

In package.json file we have to add:

"scripts": {
    "test": "jest --coverage"
  },
Enter fullscreen mode Exit fullscreen mode

The --coverage flag is used to generate a code coverage report for the tests. The report shows how much of the code is covered by the tests. The coverage report includes information such as the percentage of lines covered, the percentage of functions covered, and the percentage of branches covered.

Code

sum.js

function sum(a,b){
    return a+b;
}

module.exports = sum
Enter fullscreen mode Exit fullscreen mode

sum.test.js
Jest looks for files with the .test.js or .spec.js extension in the tests folder or any folder named test. This is the default behavior of Jest. You can also configure Jest to look for files with a different naming convention or in a different folder. The naming convention is used to identify test files and separate them from other files in the project.

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

test("properly adds two numbers", () => {
  expect(sum(1, 2)).toBe(3);
});

Enter fullscreen mode Exit fullscreen mode

Explain:

  • The first code block defines a function called sum that takes two arguments and returns their sum. The second line exports the sum function so that it can be used in other files.

  • The second code block imports the sum function from the sum.js file using the require() function.

  • It then defines a test case using the test() function provided by Jest.

  • The test case checks whether the sum() function returns the correct result when passed two numbers.

  • The expect() function is used to make assertions about the output of the sum() function. In this case, it checks whether the output is equal to 3 using the toBe() matcher.

Another Example:

subtract.js

function Subtract(a, b) {
  return a - b;
}

module.exports = Subtract;

Enter fullscreen mode Exit fullscreen mode

subtract.test.js

const subtract = require("./subtract");

test("properly subtract two numbers", () => {
  expect(subtract(2, 1)).toBe(1);
});

Enter fullscreen mode Exit fullscreen mode

Running Test:

npm test 
Enter fullscreen mode Exit fullscreen mode

Jest test results are displayed in the terminal/console window. The results show which tests passed and which tests failed. The results also show how long each test took to run. Jest provides a summary of the test results at the end of the test run. The summary includes the number of tests that passed and failed, as well as the total time it took to run all the tests.

Jest Running

Follow me on : Github Linkedin

Top comments (4)

Collapse
 
bkpecho profile image
Bryan King Pecho

Keep up the good work! This introduction to testing with Jest is a valuable resource for JavaScript developers.

Collapse
 
jps27cse profile image
Jack Pritom Soren

Thank you for your kind words!, I’m glad you found the resource valuable.

Collapse
 
amin-xiv profile image
Mannega

This is what I like about JavaScript; always new frameworks and modules!

Collapse
 
jps27cse profile image
Jack Pritom Soren

Yes, JavaScript is a very popular programming language with a lot of frameworks and modules. It’s great to see how the community is always coming up with new and innovative ways to use it.