Jest Testing with Selenium and JavaScript: Beginner’s Guide

What Is Jest Testing Framework?

Developed by Facebook, Jest is an open-source testing framework built on JavaScript, designed majorly to test React and React Native based web applications. We generally observe that unit tests for the frontend layer are not much suitable as it requires a lot more configuration to be done which can be complex at times. This complexity can be reduced to a great extent with the Jest testing framework.

Moreover, Jest testing framework can be used to validate almost everything around JavaScript, especially the browser rendering of your web-applications. Jest is a preferred framework for automated browser testing too and this makes it one of the most popular and renowned Javascript testing libraries framework!!

Jest also provides an excellent blended package of an assertion library along with a test runner and a built-in mocking library. The feature that makes it stand out is it’s simplicity and that is what makes it compatible to test any JavaScript Library Projects such as AngularJS, Vue JS, Node JS, Babel and TypeScript.

Another great feature that it offers is snapshot testing, which basically helps us to get a test of the delta changes of the web-applications that are transformed after a particular time. Additionally, Jest also has a built-in support for code coverage which can generate reports to figure out the areas or the part of the code that is not covered as a part of the test execution. Now that we’ve covered what is Jest, in this Jest testing tutorial, let’s explore why you should use Jest for automation testing.

Why to Use Jest Testing Framework?

In the world of Selenium JavaScript testing, there are many automated frameworks that are used for cross browser testing. So why Jest? Well, here are a few killer points that make Jest testing better than other test frameworks. Some of them are:

• Speed and Performance – Jest testing framework is fast when it comes to executing the test cases. Not only it boosts up the entire test suite, but it also offers great efficiency in the watch mode that can be enabled in this framework.
• Pre-commit hooks – Jest testing framework offers pre-commits hooks which are basically the ability to execute only those sets of test cases that are significant in the current run or the ones that are changed after the previous commit. That way, we don’t have to wait for the execution of all other test cases. These tests are popularly known as Snapshot testing & are useful in reducing the regressions testing efforts.
• Complete Package – The framework comes with more or less with all the required features. These built-in modules provide good support for plugins and there is no need to download any other third party executable like mocha or cucumber etc. to perform certain activities. In case, if we require to add any other library with the Jest testing framework, they are easily configurable, and we can choose which module to include so that there are no issues with compatibility.
• Easy to Migrate – Any current test project can easily be migrated and switched to use the Jest testing framework programmatically without any issue or code interaction with the use of code mods module.
• Added Features and Configurations – The framework is not just an ordinary and basic test runner but on the other hand it also offers some of the advanced features such as ability to auto mock modules, setup coverage thresholds, module mappers. This includes the support from multiple projects in the same runner and customer resolvers such as babel and webpack.

To dive deeper into Jest and see how it simplifies JavaScript testing, check out this video. It explains the core features, benefits, and practical use cases of Jest, helping you understand why it’s a go-to framework for frontend and full-stack testing.

Other than the ones listed above, here are some pros of using Jest testing framework by the StateofJS survey.

Jest Testing 101 – Installation, Configuration, and Prerequisites

Before I start with, how to write our first Selenium test automation script with Jest. There are certain basic prerequisites and installations to get started with this Jest testing tutorial for Selenium JavaScript Testing. Below are some of the libraries and packages required to be installed on the system in order to run Jest testing scripts.

• Node JS and Node Package Manager (npm) : Node JS can be installed either using the npm manager: nodejs.org/en/download/package-manager or directly using the Windows Installer binary from the nodejs.org web site here.
• Selenium Web Driver: The Selenium web driver is required as a dependency for the Jest Module and should be installed in the root directory. The latest version of the selenium web driver can installed using the npm command as shown below:

$ npm install selenium-webdriver

• Jest Package Module : Now by using the node package manager installation of the required Jest module packages can be done.

To install the latest version navigate to the npm command line tool, and initialize the npm using the below command :

$ npm init --y

Then, install the Jest module using npm using the below commands.

$ npm install -g Jest 
$ npm install --save-dev jest

‘-g’ : It indicates the npm to install the module globally, and allows us to access and use the module like a command line tool and does not limit its use to the current project.

‘--save-dev’ It indicates the npm to place the Jest executable in the bin folder of the root directory i.e. ./node_modules/.bin folder

$ npm install --save-dev jest

You will now be able to run the commands in our command line using the Jest keyword.

• Java – SDK: Since Jest testing framework uses components of Selenium, which is built upon Java, and so there is also a need to get the installation done for the Java Development Kit ( preferably JDK 7.0 or above ) on the system and then configure the system with the JAVA environment.
• Browser Driver: This npm command installs the suitable driver required to trigger the browser and place the executable inside the root directory.

$ npm install -g chromedriver

Now that you’ve set up and completed all the requirements in this Jest testing tutorial, let’s move on to how to run your first Selenium test automation script for Javascript testing.

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

You can take this certification as proof of expertise in the field of test automation with JavaScript to empower yourself and boost your career.

Here’s a short glimpse of the Selenium JavaScript 101 certification from TestMu AI:

Running Your First Jest Testing Script using Selenium and JavaScript

After the initial setup and configurations are done, let’s write our first Jest testing script. I’ll will start by creating the project and naming the directory as jest_test and initialize the test project by navigating to the directory through the command line and executing the command.

$ npm init

This will create a base package.json file will all the basic project configuration which will be referenced in our test scripts. Finally, I’ll create a subfolder inside it that will contain our test script name single_test.js. Our initial project hierarchy will look like this:

jest_test
        | -- test_scripts
                    | -- single_test.js
        | -- jest.config.js
        | -- package.json

Now, let’s have a look at all the files, their content and their purpose in the project, you may copy paste the content into your local project files.

This file contains all the project configuration and dependencies required during project setup. The definitions from this file are used for executing the script.

//package.json-  Jest testing tutorial for Selenium JavaScript Testing
{
  "name": "Jest-Selenium-Webdriver-Test",
  "version": "0.1.0",
  "description": "Executing Our First Jest Automation Test Script with Selenium JavaScript Testing on Lambdatest",
  "keywords": [
    "javascript",
    "selenium",
    "tdd",
    "local",
    "test",
    "jest"
  ],
  
  "scripts": {
    "test": "jest"
  },
  
  "author": "rohit",
  "license": "MIT",
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.8.0",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "chromedriver": "^74.0.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jest": "^22.6.4",
    "eslint-plugin-prettier": "^3.1.0",
    "jasmin": "0.0.2",
    "jasmine": "^3.4.0",
    "jest": "^24.8.0",
    "jest-environment-webdriver": "^0.2.0",
    "jsdom": "^15.1.1",
    "prettier": "^1.17.1",
    "rimraf": "^2.6.3",
    "selenium-webdriver": "^4.0.0-alpha.1"
  },
  
  "jest": {
    "setupTestFrameworkScriptFile": "./jest.config.js",
    "testEnvironment": "jest-environment-webdriver",
    "testEnvironmentOptions": {
      "browser": "chrome"
    }
  }
}

This file contains all the scripts related features and behaviour that are expected in our application. These configurations are internally referenced in the script to implement the required functionality. It offers a lot more features like mocking, coverage, report etc and you are free to turn on and off the features as and when required.

//Jest testing tutorial for Selenium JavaScript Testing
// This configuration properties are taken from the official Jest documentation which is available at https://jestjs.io/docs/en/configuration.html 
//const {default} = require('jest-config');
module.exports = {
	// It indicates that each one imported modules in the tests must be mocked automatically
 	automock: false,
	// It indicates that it must prevent running the assessments after the primary failure is encountered
 	bail: false,
	// It indicates the "browser" field in package.Json when resolving modules
 	browser: false,
	// It indicates the listing where Jest must save the cached dependency details gathered from all throughout the tests
 	cacheDirectory: "/var/folders/jest_dx",
	// It suggests that the framework must automatically clean mock calls and instances between each test
	clearMocks: true,
	// It shows whether or not it have to have the coverage data collected while executing the test
 	collectCoverage: false,
	// It indicates that each one imported modules in the tests must be mocked automatically
// It indicates that an array of record extensions our modules should be using
 	moduleFileExtensions: [
   	"js",
   	"json",
   	"jsx",
   	"node"
 	],
	// It suggests the Jest to have an enum that specifies notification mode. Requires notify: true
 	notifyMode: "always",
	// It indicates the framework to have a preset this is used as a base for Jest's configuration
 	preset: null,
	// It suggests to run tests from one or extra projects
 	projects: null,
	// This indicates using the configuration to add custom newshounds to Jest
 	reporters: undefined,
	// This configuration shows the Jest to routinely reset mock state between every test
 	resetMocks: false,
	// This property suggests Jest to reset the module registry earlier than walking each person test
 	resetModules: false,
	// This configuration indicates Jest testing framework  to the course of a custom resolver
 	resolver: null,
     // This configuration indicates Jest to the course of a custom resolver
 	// This configuration indicates the Jest to allows us to apply a custom runner in preference to Jest's default inbuilt Jest test runner
 	runner: "jest-runner",
	// This configuration factors to the trails to modules that run a few code to configure or installation the test environment before each test run
 	setupFiles: [],
	// This configuration indicates the Jest to the direction to a module that runs some code to configure or installation the testing framework before than each test run 
 	setupFilesAfterEnv: null,
	// This configuration factors the Jest to the list of paths of the snapshot serializer modules that Jest must use for each of the snapshot testing
 	snapshotSerializers: [],
	// This configuration suggests the Jest to allow using a custom outcome or the result processor
 	testResultsProcessor: null,
	// This configuration shows the Jest to permit the usage of a new custom test runner instead of the default
 	testRunner: "jasmine2",
	// This configuration shows the Jest testing framework to assign the URL for the jsdom environment. It is shown in properties and configuration like the location.Href testURL: "http://localhost",
 	testURL: "http://localhost",
	// This property points to the setting of the price to "faux" lets in the use of fake timers for capabilities which includes "setTimeout"
 	timers: "real",
	// This property suggests the Jest to a map from regular expressions to paths to transformers
 	transform: null,
	// This configuration shows the Jest to an array of regex expression sample strings which are matched towards all source record paths, matched documents will pass transformation
 	transformIgnorePatterns: [
   	"/node_modules/"
 	],
	// It suggests that a map from ordinary regex to module names that permit to stub out assets with a single module
 	moduleNameMapper: {},
	// It suggests that an array of regex expression sample strings, matched against all module paths before considered 'visible' to the module loader
 	modulePathIgnorePatterns: [],
	// It suggests the Jest to prompt notifications for take a look at results
 	notify: false,
	// This configuration indicates the Jest which take a look at  test environment it need to use for the testing run
 	testEnvironment: "jest-environment-jsdom",
	// This configuration shows the Jest to the options so one can be passed to the testEnvironment
 	testEnvironmentOptions: {},
	// This configuration shows the Jest to add a location field to test the outcome of the run
 	testLocationInResults: false,
	// This configuration factors to the glob patterns Jest uses to detect test files
 	testMatch: [
   	"**/__tests__/**/*.js?(x)",
   	"**/?(*.)+(spec|test).js?(x)"
 	],
	// This configuration indicates the Jest to an array of regexp pattern strings that are matched towards all test paths, matched tests are skipped
 	testPathIgnorePatterns: [
   	"/node_modules/"
 	],
	// This configuration points to the regexp sample Jest makes use of to detect test files
 	testRegex: "",
	// This configuration shows the Jest to routinely restore mock state among every tests that are executed
 	restoreMocks: false,
	// This configuration suggests framework to the root listing that Jest should check for the test cases and modules inside them
 	rootDir: null,
	// This configuration shows the Jest framework to the list of paths to directories that Jest ought to use to look for files inside them
	roots: [
   	"<rootDir>"
 	],
 	// It indicates that an array of glob patterns indicating a hard and fast of files for which insurance statistics ought to be collected
 	collectCoverageFrom: null,
	// It indicates the directory in which Jest ought to output its coverage documents and test files
	coverageDirectory: 'coverage',
	// This property shows that an array of regexp sample strings used to skip the test coverage collection
 	coveragePathIgnorePatterns: [
   	"/node_modules/"
 	], 
	// It indicates that a list of reporter names that Jest makes use of whilst writing coverage reports
 	coverageReporters: [
   	"json",
   	"text",
   	"lcov",
   	"clover"
 	],
	// This property shows that an item that configures minimal threshold enforcement for coverage reports
 	coverageThreshold: null,
	// This property shows that framework have to make call of deprecated APIs and throw helpful errors messages
 	errorOnDeprecated: false,
	// This property indicates the Jest testing framework to force insurance collection from ignored files using a array of glob patterns
 	forceCoverageMatch: [],
	// It suggests the route to a module which exports an async characteristic this is triggered as soon as earlier than all test suites
 	globalSetup: null,
	// It shows the course of the module which exports an async function that is brought on as soon as after all test suites
 	globalTeardown: null,
	// It suggests the set of world variables that are required to be available in all test environments
 	globals: {},
	// It indicates an array of directory names to be searched recursively up from the requiring module's location
 	moduleDirectories: [
   	"node_modules"
 	],
	// This configuration shows the  Jest testing framework to an array of regexp sample strings which might be matched against all modules earlier than the module loader will mechanically return a mock data for the test case
 	unmockedModulePathPatterns: undefined,
	// This configuration shows the  Jest testing framework whether or not each separate test cases should be reported during the executed test run
 	verbose: true,
	// This configuration shows the  Jest testing framework to an array of regexp patterns which might be matched against all source document paths before re-running tests in watch mode
 	watchPathIgnorePatterns: [],
	// This configuration shows the Jest testing framework whether or not the watchman should be used for document crawling
 	watchman: true,
  };

This is our Jest testing script that we will be executing. In this test we will launch a web page and execute certain scenarios.

//single_test.js:Jest testing tutorial for Selenium JavaScript Testing
/**
 * @jest-environment jest-environment-webdriver
 */
const webdriver = require('selenium-webdriver');
 
const script = require('jest');
 
const url = 'https://www.selenium.dev/'
 
const getElementXpath = async (driver, xpath, timeout = 3000) => {
  const el = await driver.wait(until.elementLocated(By.xpath(xpath)), timeout);
  return await driver.wait(until.elementIsVisible(el), timeout);
};
 
 
const getElementName = async (driver, name, timeout = 3000) => {
  const el = await driver.wait(until.elementLocated(By.name(name)), timeout);
  return await driver.wait(until.elementIsVisible(el), timeout);
};
 
const getElementId = async (driver, id, timeout = 3000) => {
  const el = await driver.wait(until.elementLocated(By.id(id)), timeout);
  return await driver.wait(until.elementIsVisible(el), timeout);
};
 
// declaring the test group  This is our test case scenario that we will execute from our first test script. 
describe('executing test scenario on the website www.selenium.dev', () => {
    
    let driver;
 
    driver = new webdriver().build();
 
    // func to get the cloud driver eslint disable next line no undef
    await driver.get(
      ‘https://www.selenium.dev’,
    );
  }, 10000);
 
  afterAll(async () => {
    await driver.quit();
  }, 15000);
  
  test('it performs a validation of title on the home page', async () => {
    await browser.get(url)
    const title = await browser.findElement(by.tagName('h1')).getText()
    expect(title).toContain('SeleniumHQ Browser Automation')
  })
 
  test('it performs a validation of the search box on the page', async () => {
    const foundAndLoadedCheck = async () => {
      await until.elementLocated(by.id('search'))
      const value = await browser.findElement(by.id('search')).getText()
      return value !== '~'
    }
 
    await browser.wait(foundAndLoadedCheck, 3000)
    const search = await browser.findElement(by.id('search')).getText()
    expect(search).toEqual('')
  })
 
// declaring the test group
 
  describe('it captures a screenshot of the current page on the browser', () => {
    test('snap a picture by taking the screenshot', async () => {
      // files saved in ./reports/screenshots by default
      await browser.get(url)
      await browser.takeScreenshot()
    })
  })
})

It is important to check whether the below section is present in our package.json file as this contains the configurations of our test script and hence will be required to execute the tests.

"scripts": {
    "test": "jest",
  },

Now, finally, we can run our test in the command line and execute from the base directory of the project using the below command:

$  npm test

The output of the above test is :

Code Coverage

Now you can test code coverage report using the inbuilt coverage plugin by executing the command.

$  npm test --coverage

Executing this command will generate a detailed report of us for the test case.

Scalability Issues With Running Selenium Automation On Local Infrastructure

Now in this Jest testing tutorial, we’ll see the scalability issues that might rise by running your selenium test automation scripts on your local setup. You can install Selenium WebDriver in your local systems and can proceed with the execution of automated test cases. However, there are certain drawbacks of using Selenium Grid in a local setup.

• First, since it is in our local workspace, it requires us to manage and set up the underlying infrastructure required for the test, we cannot focus much on our testing strategy.
• The initial setup of the Selenium Grid can be tedious especially when there is a need for multiple node servers. There can be issues with the performance majorly when parallel group tests are about to be executed.
• Also, when performing cross browser testing our local system may not be equipped with all the different versions of browsers installed.
• The same limitation arises when dealing with operating systems as some applications might be specifically designed for a particular operating system and hence requires a specific environment to run.

Choosing Cloud based Selenium Grid over Local Setup

Moving ahead with our Jest testing tutorial, we need to figure out a way for this limitation , this is where the online Selenium Grid plays a vital role and comes to the rescue. By performing parallel testing on Cloud based Selenium Grid there is no need to install and manage unnecessary virtual machines and browsers for Automated Cross browser Testing. It provides real browsers running with all major operating systems running. Further, it also helps reduce our test cycles and hence boost our market ready delivery.

Since TestMu AI also provides integration with Jest, we will look at how to run our test script on its cloud platform. In order to start executing automated testing for our application, we would just need good Internet connectivity and a simple and free sign up on the TestMu AI platform.

Wrapping It Up!

Now that you know that Jest is a quick testing framework and is also easy to set up and doesn’t have many complexities. Jest framework is actively used by many organizations to test applications as it is simple to migrate from other testing platforms and provides an all in one package with TypeScript support. The test outcome and the consequences can at once accessed from the command line interface.

Also, the user interface offered by this platform is very interactive and we can leverage the various benefits of Selenium test automation testing both as a beginner and an expert. Hence, it’s a good idea to migrate our Selenium automation tests to cloud infrastructure and increase our test coverage and also cut down on test execution time. This is all we need to know to run our Jest test scripts.

Great! This concludes our Jest testing tutorial and now i hope you are well versed with the Jest testing framework. But as i just said, this is ‘jest’ a beginning and there’s a lot more to come. There is a lot more still to be learned, and I’d be happy to guide you along the way. Hit on the bell icon, and you’d get alerts to all our upcoming tutorials. Meanwhile, you can read our other tutorials on Nightwatch.js, Cucumber.js and Mocha. Happy testing!