Jest is a popular JavaScript testing framework developed by Meta (Facebook). It is widely used for testing JavaScript applications and has been employed in over 3,898,000 public repositories on GitHub. Jest works with various technologies such as Babel, TypeScript, Node, React, Angular, and Vue.
Originally designed for unit testing React components, Jest quickly gained popularity and expanded its usage to cover front-end and back-end JavaScript applications. While some people mistakenly consider Jest as a library, it is a framework that provides a CLI (Command Line Interface) for running commands from the terminal. Jest includes features like an assertion library, test runner, support for mocking techniques, and more.
This Jest tutorial will cover all aspects of the framework, from installation and configuration to executing tests using Jest on local and cloud grids. By following this tutorial, you can learn how to effectively use Jest in your projects.
What is Jest Framework?
Jest is a JavaScript testing framework designed to make testing delightful and straightforward. It is built on top of Jasmine and is primarily focused on unit testing React and React Native applications. Jest provides support and simplicity for testing complex web applications.
In addition to unit testing, Jest can also be used for component testing, allowing you to test individual components of your application. It is widely used for testing various JavaScript-based applications, including web apps rendered in browsers. One of the significant advantages of Jest is that it does not heavily rely on third-party apps or software, making it a popular choice for JavaScript test automation.
Jest stands out as one of the best unit testing frameworks due to its ease of use and extensive features. It significantly simplifies the setup and configuration of unit testing for front-end components, saving time and reducing complexity. This makes Jest an invaluable tool for front-end developers seeking to streamline their testing processes.
Jest Basics
Jest introduces two important concepts: Mock and Spy. Let’s understand each of them:
1. Mock
Mock functions in Jest erase the original implementation of a function, allowing you to capture function calls, parameters, and constructor instances. Mocking helps create isolated tests by removing dependencies between test subjects and external modules.
Mock functions can return any desired value, making it easy to test different code paths by controlling function parameters. For function mocking, you can use `jest.fn()`, while `jest.mock` is used for module mocking.
Example of mocking a function:
const mockFn = jest.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();
In the above code, `jest.fn()` creates a simple mock function. The second line calls the mock, and the third line verifies if the mock was called. You can also check the return value:
const returnsTrue = jest.fn(() => false);
console.log(returnsTrue()); // false
2. Spy
Spies in Jest are used to spy on method calls. They allow you to track method invocations and their parameters. Spies are useful for monitoring how functions are used within your codebase.
Every mock function in Jest has a `.mock` property that stores information about function calls, return values, and the value of the `this` keyword during each call.
Example of spying on a method call:
const myMock1 = jest.fn();
const a = new myMock1();
console.log(myMock1.mock.instances);
// Output: [ <a> ] – .mock.instances provides the instance of myMock1
const myMock2 = jest.fn();
const b = {};
const bound = myMock2.bind(b);
bound();
console.log(myMock2.mock.contexts);
// Output: [ <b> ]
In the above code, `myMock1.mock.instances` gives the instance of `myMock1`, and `myMock2.mock.contexts` provides the context (`b`) of the method call.
Understanding these concepts is crucial for effectively using Jest in your testing
scenarios.
3. describe Blocks
Jest provides “describe” blocks that help organize test cases into logical groups. These blocks allow us to create divisions within the test suite. They are particularly useful when we want to group test cases related to a specific method or class together.
The syntax for a describe block is as follows:
describe(“Filter function”, () => {
// test cases
});
We can also nest describe blocks to create a hierarchy of blocks containing multiple describe blocks. These blocks are responsible for cleaning up the JSDOM (JavaScript Document Object Model) after each test execution. The “describe” method is used to create a block, and we provide a callback function as an argument.
Using describe blocks helps in organizing and structuring test cases, making them more readable and maintainable.
4. ‘it’ or ‘test’ Tests
When writing tests in Jest, we use the ‘it’ keyword or its alias’ test’ to define individual test cases. These keywords mark the beginning of a new test case definition. We can include ‘it’ or ‘test’ statements within the callback function of a ‘describe’ block.
To combine these concepts, we use the ‘describe’ block to create a new test module, and then we use ‘it’ or ‘test’ statements inside that ‘describe’ block to define one or more individual tests.
Here’s an example:
describe(‘Jest()’, () => {
it(‘should be the best framework’, () => {
expect(Jest.bestFramework).toBeTruthy();
});
});
In the above code, we have a ‘describe’ block that creates a test module named ‘Jest()’. Inside the ‘describe’ block, we use the ‘it’ statement to define an individual test case. The test case checks whether ‘Jest.bestFramework’ is truthy using the ‘expect’ assertion.
5. beforeAll and afterAll
The ‘beforeAll’ block in Jest is used to define a function that will run before any of the tests in the test suite start executing. It is commonly used to set up a global state or perform initialization tasks that are required by multiple tests in the suite.
One common use case for ‘beforeAll’ is when working with Selenium or other web testing frameworks. In such cases, the ‘beforeAll’ block is used to initialize web drivers or set up the necessary environment before running the tests.
If the function defined in ‘beforeAll’ returns a JavaScript promise, Jest will wait for the promise to resolve before proceeding with the execution of the tests. This is useful when the setup tasks involve asynchronous operations.
Here’s an example of using ‘beforeAll’ in Jest:
beforeAll(async () => {
// Set up global state or perform initialization tasks
// For example, initialize web drivers in a Selenium test suite
await initializeWebDrivers();
});
// Test cases go here
In the above code, the ‘beforeAll’ block is defined with an asynchronous function that initializes the web drivers using ‘initializeWebDrivers()’. This setup will be executed once before any of the test cases in the test start running.
6. afterAll(fn)
The `afterAll` block in Jest is used to execute a specific function after all the tests in a test suite have been completed. If the function returns a JavaScript promise, the execution is halted until the promise resolves.
The primary purpose of the `afterAll` block is to handle clean-up tasks. It allows you to remove any global setup states or perform any necessary clean-up operations that were created or shared across the test suite.
Both `beforeAll` and `afterAll` blocks are used within the `describe` block. The `beforeAll` block runs at the beginning, while the `afterAll` block runs towards the end of the `describe` block. These blocks are commonly used for one-time setup and teardown tasks, which we will explore in more detail in the later sections of this Jest tutorial, along with examples. (Please refer to the section on Jest Hooks: Setup and Teardown).
Jest Parallel Testing on the LambdaTest Platform
Jest cloud grids, such as LambdaTest, provide the capability to perform Jest testing at scale. LambdaTest is a cloud-based automation testing platform, offering a browser farm consisting of 40+ browsers and operating systems. This allows you to execute tests in a scalable manner, improving test execution speed and increasing test coverage, resulting in better product quality.
One of the key features of LambdaTest is support for parallel testing. Parallel testing enables you to run the same test across multiple browsers simultaneously, reducing the overall test execution time. To achieve this, you can create multiple instances of the WebDriver with different capabilities.
const { Builder } = require(‘selenium-webdriver’);
const browsers = [‘chrome’, ‘firefox’, ‘safari’, ‘edge’, ‘opera’];
describe(‘Google Search’, function() {
browsers.forEach((browser) => {
it(‘should open Google in ${browser}’, async function() {
let driver = new Builder()
.usingServer(‘https://USERNAME:[email protected]/wd/hub’) // replace USERNAME and ACCESS_KEY with your LambdaTest credentials
.withCapabilities({
platform: ‘windows 10’,
browserName: browser,
version: ‘latest’
})
.build();
await driver.get(‘https://www.google.com/’);
let title = await driver.getTitle();
expect(title).toEqual(‘Google’);
await driver.quit();
}, 15000);
});
});
By leveraging parallel testing on LambdaTest, you can distribute the test workload across multiple browsers and operating systems, ensuring compatibility and functionality across a wide range of platforms. This approach helps you identify and address any browser-specific issues more efficiently, ultimately enhancing the overall quality of your application.
With Jest and a cloud-based platform like LambdaTest, you can use scalability and parallel testing capabilities to accelerate your testing process and achieve comprehensive test coverage across various browsers and operating systems.
Jest Matchers and Viewing Test Results on LambdaTest
Jest provides a variety of matchers that allow you to test values in different ways. Some commonly used matchers in Jest include:
– `toBe`: Checks for exact equality.
– `toEqual`: Checks for deep equality.
– `toBeNull`: Checks if a value is null.
– `toBeDefined`: Checks if a value is defined.
– `toBeTruthy`: Checks if a value is truthy.
– `toBeFalsy`: Checks if a value is falsy.
These matchers help you make assertions about your code’s behavior and ensure that it produces the expected results. Jest offers many more matchers to handle different scenarios and value types.
test(‘two plus two’, () => {
const value = 2 + 2;
expect(value).toBeGreaterThan(3);
expect(value).toBeGreaterThanOrEqual(3.5);
expect(value).toBeLessThan(5);
expect(value).toBeLessThanOrEqual(4.5);
});
In the above code, we have a test case named ‘two plus two’. It calculates the value of 2 + 2 and assigns it to the variable value. Then, we utilize different matchers to make assertions about the value:
- expect(value).toBeGreaterThan(3) checks whether a value is greater than 3.
- expect(value).toBeGreaterThanOrEqual(3.5) checks whether the value is greater than or equal to 3.5.
- expect(value).toBeLessThan(5) checks whether the value is less than 5.
- expect(value).toBeLessThanOrEqual(4.5) checks whether the value is less than or equal to 4.5.
Once you run tests on LambdaTest, you can conveniently view the test results directly on the LambdaTest dashboard. The dashboard presents essential information such as the test status, test environment details, and more.
When it comes to viewing test results on LambdaTest, it primarily focuses on cross-browser testing and does not provide a specific built-in test result viewer for Jest. However, you can integrate Jest with popular CI/CD platforms like Jenkins and CircleCI or use Jest-specific test reporting tools to generate visual reports and analyze your test results more comprehensively.
While LambdaTest can be utilized as the execution environment for Jest tests to perform cross-browser testing at scale, the visualization of Jest test results would typically involve additional tools and integrations beyond LambdaTest itself.
Wrap-up
Jest parallel testing is a game-changer in the world of JavaScript testing, offering faster test execution, scalability, and optimal resource utilization. By leveraging Jest’s parallel testing feature, developers can accelerate their testing workflows, obtain quicker feedback, and improve the overall quality of their JavaScript applications.
With the ability to run tests concurrently, Jest empowers developers to take full advantage of modern computing capabilities and streamline their testing processes. Start exploring Jest parallel testing today and unlock the full potential of your JavaScript test suites.