App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Home Guide Unit Testing in JavaScript: A Tutorial

Unit Testing in JavaScript: A Tutorial

By Neha Vaidya, Community Contributor -

Table of Contents

In the world of testing, checking a single functionality is quite different from testing a whole application end-to-end. While both are equally important, testing each functionality (also known as a unit) is necessary to ensure that every single function in the application performs as expected. This is where unit testing comes in. 

Since JavaScript is a popular programming language used for the development of web applications, it becomes necessary to learn how one can perform unit testing in JavaScript. This article will explore how to perform these tests, where exactly these tests should run, and why.

What is a Unit Test?

A unit test verifies the behavior of a unit of software in the system. It verifies whether a small and isolated piece of the codebase called “unit” behaves as the developer intended.

Unit tests verify the smallest parts or components of an application by comparing their actual behavior with the expected behavior in complete isolation. Here, “complete isolation” means that, during unit testing, devs do not connect the application with external dependencies such as databases, the filesystem, or HTTP services. This allows unit tests to be fast and stable since they won’t fail due to problems integrating with those external services.

Why Write Unit Tests?

Usually, developers write unit tests first, then write the software code. This approach is known as test-driven development (TDD). In TDD, the requirements are turned into specific test cases, then the software is improved to pass the new tests. In the case of unit tests, it allows for the modification of code without affecting the functionality of other units or the software in its entirety. This makes the job easier for developers as the bugs are easy to locate at this stage, which saves time and money.

Also, within unit test environments, the individual modules of a product become isolated from one another and have their own area of responsibility. In this scenario, tests are more reliable because they are run in a contained environment. The code too, because of said reliability, becomes reliable.

Along with the above facts, let’s explore the various benefits of unit tests.

Benefits of Unit Tests:

  • Unit tests help to find and fix bugs quickly and easily.
  • Unit tests contribute to higher code quality.
  • Unit tests contribute to better application architecture.
  • Unit tests act as documentation.

The main advantage of unit tests is their laser-sharp focus. Since they test a single function, they give precise feedback. If a unit test fails, then in the vast majority of cases testers can be sure that the specific function being tested is the problem. 

Unit tests are also known for their speed. Since they’re fast, they’re executed more often, making them a source of nearly constant valuable feedback.

Best Practices for creating Unit Tests

The following best practices should be followed when creating unit tests:

  1. Tests should be fast and simple which means developers need the test-cases to be run at a higher speed as it serves the purpose of unit testing. If they are slow, developers won’t run the test cases as often as they should. Also, the simpler the unit test cases, the more accurate the test results.
  2. Test cases should not duplicate the implementation logic.
  3. Test cases should be deterministic – exhibit the same behavior as long as their code is unchanged. To keep tests deterministic, QAs must execute them on real browsers and devices, not emulators and simulators. Without being exposed to actual production environments (real, functional real devices), test results will be nowhere close to deterministic or accurate
  4. Adapt a powerful naming convention for the test cases

Test on Real Browsers & Devices Free

JavaScript Unit Testing

JavaScript Unit Testing is a method where JavaScript test code is written for a web page or web application module. It is then combined with HTML as an inline event handler and executed in the browser to test if all functionalities are working as desired. These unit tests are then organized in the test suite.

There are various frameworks that are helpful for unit testing in JavaScript. They are as follows:

  • Unit.js: An assertion library for Javascript, which runs on Node.js and the browser. It works with any kind of test runner and unit testing framework like Mocha, Jasmine, Karma, protractor (E2E test framework for Angular apps), QUnit, etc.
  • Mocha: A test framework running both in Node.js and in the browser. This framework makes asynchronous testing simple by running tests serially. Mocha tests run serially, allowing for flexible and accurate reporting while mapping uncaught exceptions to the correct test case.
  • Jest: It is an open-source testing framework built on JavaScript, designed majorly to work with React and React Native-based web applications. Often, unit tests are not very useful when run on the frontend of any software. This is mostly because unit tests for the front-end require extensive, time-consuming configuration. This complexity can be reduced to a great extent with the Jest framework.
  • Jasmine: Jasmine is a popular JavaScript behavior-driven development framework for unit testing JavaScript applications. It provides utilities used to run automated tests for both synchronous and asynchronous code.
  • Karma: Karma is a node-based test tool that allows you to test your JavaScript codes across multiple real browsers. It makes test-driven development fast, fun, and easy and is termed as a test-runner technically. 
  • Cypress: Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient Unit tests in Cypress are executed without even having to run a web server. That makes Cypress the ideal tool for testing a JS/TS library that is meant to be used in the browser

Writing a Test Case

Here, we’ll be using the Jest tool and testing framework. This tool is one of the de-facto testing tools available, popular because of its ease of use and different testing functionalities. If you are not aware of Jest configuration, pause here, read this Jest Framework tutorial, and resume with the next steps.

Prerequisites for writing a test case:

Below are some of the libraries and packages required to be installed on the system in order to run Jest test scripts.

  1. NodeJS and Node Package Manager (npm): NodeJS can be installed using the npm manager or directly using the Windows Installer binary from the nodejs.org website here.
  2. Jest Configuration
  3. Suitable Browser Driver

Now, consider a simple implementation. Here, let’s write a simple pseudo-code for a unit test case. Let’s take a scenario wherein, you want to convert the word about-us from English to French in lowercase. The functionality below helps you do the same. Similarly, you can modify the code for multiple other languages as well. 

const englishCode = "en-UK";

const frenchCode = "es-FS";

function getAboutUsLink(language){

    switch (language.toLowerCase()){

      case englishCode.toLowerCase():

        return '/about-us';

      case frenchCode.toLowerCase():

        return '/-à propos de nous';

    }

    return '';

}

module.exports = getAboutUsLink;


Now, let’s put it into the index.js file. Let’s write tests in the same file, but as a good practice, it is better to write separate unit tests into a dedicated file.The common naming patterns include

{filename}.test.js and {filename}.spec.js. This example uses index.test.js:

 

const getAboutUsLink = require("./index");

test("Return about-us for english language", () => {

    expect(getAboutUsLink("en-UK")).toBe("/about-us");

});

Now import the function to be tested. Every test here is defined as an invocation of the test function. The first parameter is the name of the test. 

In this case, we call the getAboutUsLink function with en-UK as the language parameter. We expect the result to be /about-us.

Now, invoke the Jest CLI globally and run the test:

 

npm i jest-cli -g

Jest

If you get a configuration-related error, make sure you have your package.json file present. In case you don’t, generate one using npm init.

Run Unit Test in Javascript on Real Devices

Your output goes like this:

 

PASS  ./index.test.js

  √ Returns about-us for english language (4ms)

  console.log index.js:10

    /about-us

Test Suites: 1 passed, 1 total

Tests:       1 passed, 1 total

Snapshots:   0 total

Time:        2.111s


That’s how you write unit test cases using Javascript. 

As far as possible, run tests on real browsers and devices to ensure that software is verified under real user conditions. 

BrowserStack offers a Cloud Selenium Grid of 3000+ real browsers and devices for testing purposes. It also offers Cypress testing on 30+ real browsers versions. Simply sign up, choose the required device-browser-OS combination, and start testing websites for free.

Tags
Automation Testing Testing Tools Types of Testing

Featured Articles

Unit Testing Frameworks in Selenium

JUnit Testing Framework : Get Started for Automation Testing with Selenium

Remote Debugging on iOS and Mac Safari