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 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.
Moreover, Jest can be used to 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 in existence.

Additionally, Jest provides a blended package of an assertion library along with a test runner and a built-in mocking library. It stands out by virtue of its simplicity, which makes it an ideal tool to test 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 execute sets of test cases that are significant in the current run or ones that have been changed after the previous commit
• Easy to Migrate – Any current test project can be migrated and switched to use the Jest framework programmatically without any issue or code interaction, thanks to the code mods module.
• Addition of Features and Configurations – The framework is not just an ordinary and basic test runner but also offers some advanced features. These include the ability to auto mock modules, setup coverage thresholds, module mappers. It also includes support from 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 how 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 function produces the expected output

Jest Installation and Configuration

Before starting with how to write our first Selenium test automation script with Jest, there are certain basic prerequisites and installations required. Below are some of the libraries and packages required to be installed on the system in order 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 and it is installed in the root directory. The latest version of the Selenium WebDriver can 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 will now be able to 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, and so testers have to get the installation done for 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 required 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 configuration which will be referenced in test scripts. Finally, create a subfolder inside it that will contain 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. To get more information about test runs, use the –verbose flag.

Run Selenium Tests on Real Device Cloud

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 start applying the same process to websites.

It is important 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 devices for testing purposes. Simply sign up, choose the required device-browser-OS combination, and start testing websites for free.