Solution testing is an integral part of every development cycle to ensure the stable and consistent behavior of each code.

 This post details the Jest framework and explains how and why you can use the Jest framework to test Lightning web components (LWCs), implement Jest in your projects, and mock features and modules. Let’s start!

Why Use Jest for Lightning Web Components Testing?

The most popular frameworks for testing web components – not only just in Salesforce Lightning – are Jasmine, Mocha, and Jest.

Jest: A jest is a powerful tool with rich features for writing JavaScript tests. Use Jest to write unit tests for all of your Lightning web components.

Creating tests within this framework is very easy, so Salesforce recommends using Jest.

 Jest is a JavaScript testing framework tailored for projects built around the following, with a focus on simplicity.

►  Node

►  React

►  Typescript

►  Babel

► Square

► Look

This is a powerful tool with extensive features for creating JavaScript tests. You can use this JavaScript library to create, structure, and run LWC-Jest tests.

Jest is distributed as an NPM package to help you get code coverage information. It also supports mocking to isolate tests from complex dependencies and allow tests to run faster. Run Jest tests at the command line or (with some configuration) within your IDE. Jest tests don’t run in a browser or connect to an org, so they run fast.

Jest tests work only with lightning web components, they don’t work with Aura components. Let’s understand why do LWC require Testing?

Why Do LWCs Require Testing?

• Lightning Web Components apply common standards related to all web components to ensure smooth performance on browsers that are supported by Salesforce.

• LWC is a code-based solution that can be easily set up and launched in the browser to improve productivity.

• When more and more logic moves from Apex to Lightning Web Components, LWC testing will become as important as Apex testing. This is because LWCs contains several files including CSS, JS controllers, and JavaScript services, all of which require testing.

• LWC testing helps to identify issues and prevent broken scripts from publishing in the very early stages (and fixes them in time), without spending too much money, resources, or effort on their elimination.

How to Get Started Working with Jest for LWC Testing?

To start working with Jest there are a few pre-requisites that you need to have handy.

First, you need to install sfdx-lwc-jest and its dependencies into each Salesforce DX project. sfdx-lwc-jest works in Salesforce DX projects only.

 Prerequisites

Before installing sfdx-lwc-jest, install Node.js and npm.

• Node.js

This page lists two releases of Node.js. We recommend using the “LTS” (Long-Term Support) version, rather than the “Current” version.

• npm

When you install Node.js, npm also installs. You may need to update npm though, so visit the npm website for instructions.

Let’s understand what Are Node.js and npm first.

What Are Node.js and npm?

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine and npm is a package manager for distributing reusable code modules. In the universe of Node.js and npm, these reusable code modules are known as Node modules. In Salesforce terminology, a Node module—reusable code that can be easily distributed to multiple projects—is similar to unlocked packages.

You can test the whole front-end without affecting the team’s productivity, and LWC test results will be interpreted in an easy-to-understand and informative way the most successful deployment strategy will be to add several items to the Jest testing in one sprint.

This is how your test jest test result will be displayed if the test fails or if anything went wrong.

Run LWC Jest Test

There are several commands used to run LWC Jest tests.

1. Run the command test:unit:coverage

By running the command “test:unit: coverage”, you’ll see a short report about the code coverage of several files in your code. You can also run the test directly from the Visual Studio Code tab, available from the left sidebar. It gives you options to run single, multiple, or all tests. It also gives you the ability to use the –watch option on a file since Git is preinstalled in Visual Studio Code.

2. Execute Jest Test from Azure Pipeline

Jest Tests can be executed from Azure Pipeline. After the test set, the results can be viewed in the following way.  

How to Write Jest Test for LWC?

1.   Start with a Simple Jest Test

The simplest Jest test starts with the import of the tested method and the block describe which defines a set of tests. The first parameter of describe is the description, and the second is the callback that contains separate tests. What’s more, the describe blocks can be put into one another.

Particular tests are represented by the function “it“. Each accepts test description and callback function, which define the execution of the test.

2.   Check the Results with Match Functions

To check the results of testing, you can use various match functions – there are multiple variations of them for different testing purposes.

For example, they can differentiate by how the error appeared and how many times this method was called. The full list can be found on the website.

Various Jest hooks like

1.      beforeEach,

2.      afterEach,

3.      beforeAll, and

4.      afterAll 

Are very helpful for test writing.

These functions receive callbacks, having been carried out during testing. For example, this function will be carried out before each test “it“.

3.   Use Jest for Synchronized LWC Testing

After the configuration is complete, you need to do the following:

1. Import the LWC method framework createElement. 

2. Use the afterEach method to clean the item.

Note: You don’t need a browser to run the Jest test. Jest uses jsdom to create an environment that behaves like a DOM browser. Each test file has a jsdom example to prevent the automatic deletion of changes between tests in the file. Therefore, you need to think for yourself about cleaning files.

Therefore, the createElement method allows you to create the Lightning web component you need.

►  Use the dot operator to access LWC variables declared in the  API decorator. Variables are declared by the unitNumber API decorator.

► Gets information about the content of the HTML component and adds the created element to the body of the document.

► Get the required HTML element and use querySelector to verify its contents.

►  Do the same if you need to check, for example, a variable component that is not declared by the API decorator but is used as an attribute of the embedded component. This is necessary if the method under test modifies this private variable.

4.   Use Jest for Asynchronized LWC Testing

The previous example shows how the code is tested when the tests are fully synchronized. But what if the test runs asynchronously?

For example, what if you change the unitNumber method and line unitNumber = 7 during testing? In addition, errors can occur. The easiest way to avoid this error is to use a Promise.

 A Promise is a special object that stores its state, current result (if any), and callback:

► Creating a new promise ((resolve, reject) =>…) will automatically start the argument function. This will call resolve (result) on success and reject (error) on failure.

► This promise passes the resolve / reject argument to the handler.

► Handlers are assigned by calling. then or. Catch.

References: https://trailhead.salesforce.com/content/learn/modules/test-lightning-web-components,

https://trailhead.salesforce.com/en/content/learn/trails/build-lightning-web-components