Jest Framework Tutorial: How to use it?

What is Jest Framework?

Jest 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 front end of any software. This is mainly 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.

• Moreover, Jest can validate almost everything around JavaScript, especially the browser rendering of web applications.
• Jest is also widely preferred for automated browser testing, making it one of the most popular Javascript testing frameworks.
• It also provides a blended package of an assertion library, a test runner, and a built-in mocking library.
• Its simplicity stands out, making it an ideal tool for testing JavaScript Library Projects such as AngularJS, Vue JS, Node JS, Babel, and TypeScript.

Why use Jest Framework For Selenium JavaScript Testing?

• Speed and Performance – Jest framework is fast when executing test cases
• Pre-commit hooks – Jest framework offers pre-commit hooks that complete sets of test cases that are significant in the current run or ones that have been changed after the previous commit
• Easy to Migrate – Thanks to the code mods module, any current test project can be migrated and switched to use the Jest framework programmatically without issues or code interaction.
• Addition of Features and Configurations – The framework is an ordinary and essential test runner and offers some advanced features. These include the ability to mock auto modules, set up coverage thresholds, and module mappers. It also supports multiple projects in the same runner and customer resolvers such as Babel and Webpack.

Basic Test Setup

When creating a web application, testing every feature, element, and point of user interaction is mandatory. Web applications also consist of units of code like functions and modules that also need to be tested.
There are two scenarios common in this situation:

• Inherit legacy code that comes without tests
• Implement a new functionality out of thin air

For both cases, one has to check if a given function produces the expected result. Here’s what a typical test flow looks like:

1. Import the function to test
2. Offer input to the function
3. Define what to expect as the output
4. Check if the process produces the desired output

Jest Installation and Configuration

Before starting with how to write our first Selenium test automation script with Jest, specific prerequisites and installations are required. Below are some of the libraries and packages needed to be installed on the system to run Jest test scripts.

• 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.
• Selenium Web Driver: Selenium WebDriver is a dependency for the Jest Module installed in the root directory. The latest version of the Selenium WebDriver can be installed using the command below:

$ npm install selenium-webdriver

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

$ npm init --y

Install the Jest module using npm using the command below:

$ npm install --save-dev jest

Testers can now run the commands in the command line using the Jest keyword Java – SDK. Since Jest is a Selenium test framework and Selenium is built upon Java. So testers have to install the Java Development Kit on the system and then configure the system with the JAVA environment.

• Browser Driver: This npm command installs the suitable driver to trigger the browser and place the executable inside the root directory.

$ npm install -g chromedriver

Running First Jest Script for Selenium JavaScript Testing

Let’s start by creating the project and naming the directory jest_test. 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 configurations, which will be referenced in test scripts. Finally, create a subfolder inside it containing the test script named test.js. The initial project hierarchy will look like this:

Jest_test
| — test_scripts
                    | — test.js
        | — jest.config.js
        | — package.json

Jest Running Example

package.json
{
 "name": "jest-test",
 "version": "1.0.0",
 "description": "",
 "main": "main.js",
 "scripts": 
  {
   "test": "jest --verbose"
  },
 "keywords": [],
 "author": "Name Oner",
 "license": "ISC",
 "devDependencies":
  {
   "jest": "^24.0.0"
  },
 "dependencies": 
  {
   "axios": "^0.18.0"
  }
}

By default, jest only gives a rudimentary output. Use the— verbose flag to get more information about test runs.

Tests are run with npm test command. The test files must have the test term in their names.

$ npm test

> jest-test@1.0.0 test C:\Users\jest-test
> jest

PASS ./math-utils.test.js
PASS ./arith.test.js
PASS ./arith-params.test.js
PASS ./arith-mock.test.js
PASS ./users.test.js

Test Suites: 5 passed, 5 total
Tests: 2 skipped, 35 passed, 37 total
Snapshots: 0 total
Time: 5.19s
Ran all test suites.

This is a sample output running tests with Jest. This is a terse output. For more information, use the –verbose option.

To run an individual test, use the npx jest testname command.
scripts:

{
"test": "jest --verbose ./test-directory"
}

Thus, testers can configure Jest to run tests in a specified test directory. Run the code, evaluate the results, and apply the same process to websites.

It is essential to run Selenium tests on real browsers and devices to ensure testing in real user conditions. BrowserStack offers a Cloud Selenium Grid of 3000+ real browsers and appliances for testing purposes. Simply sign up, choose the required device-browser-OS combination, and start testing websites for free.

Run Selenium Tests on Real Device Cloud