How to Ensure the Quality of Your Salesforce Lightning Web Component (LWC) Products: Jest Test Overview

This post is for Salesforce Developers creating UI components in Salesforce and Sales Operations leaders who manage Salesforce professionals. In it, we cover why leveraging Jest tests to ensure your Lightning Web Components are working as expected is best practice. We also leave you with actionable insight on:

  • The differences between backend testing like Apex versus testing front end code with Jest
  • Why testing Javascript components is essential but often overlooked
  • How to ensure the quality of your Lightning Web Component (LWC) products

Apex Testing vs. Jest testing

In Salesforce, to move Apex code into a production environment, developers must adhere to an Apex code coverage threshold of 75%. While it’s debatable that running 75% of the lines of code in a given class can be considered sufficient, however, this basic enforcement forces developers to at least think about testing. Apex code doesn’t only support our backend trigger logic; it also supports frontend Visualforce logic, aura components logic, and to some extent, acts as a data model connector for our LWC components.

However, because there is no testing requirement for Javascript components, often testing is overlooked. This is a common pitfall organizations need to be cautious of, especially because more and more backend logic is pushed to the frontend with Javascript to provide a faster and more reactive end-user experience. Continue reading this blog to understand how Salesforce developers and teams can test their Javascript code.

How to Test Javascript Components in Salesforce

Developers can leverage Jest testing to validate Javascript components in Salesforce. For those with a web development background, Jest may be a familiar name to you. However, most Apex developers are unfamiliar with how to write Jest scripts.

The main difference between backend testing like Apex versus testing frontend code with Jest is how methods and functions are called via interacting with the user interface. With Apex, you can call that method directly and review the output. Testing with Jest is not as straightforward; when testing LWC, all your methods (unless marked by @API) are not visible from the test class perspective. With Jest and LWC, the testing flow starts with performing an action that is visible (like a click on a button) and reviewing either if the page changes (via the DOM) or reviewing if a message is sent to another component (done via component mocking).

Since Jest testing isn’t enforced directly by Salesforce, a Developer Operations manager can enforce it within your company’s deployment pipeline as a best practice. Jest works well with CI applications such as Jenkins, BitBucket Pipeline, CircleCI, etc. Such that you can push back on pull requests that don’t pass all their defined Jest tests. Jest also allows developers to monitor code coverage similarly to Apex if this is an important metric your organization wants to enforce for testing strategy.

When to write Jest Test

Unlike Apex, it is not recommended to write a Jest test for every single LWC you will create. As a general rule, you should not write tests for LWCs that don’t have any logic incorporated into the .js file. This is because if all your LWC is doing is displaying HTML, there is nothing to test. On the other hand, if your component does have logic being done in the .js file, that logic should be tested. Even if there is just an @api field, it is good practice to ensure your template functions properly with and without that value provided.

Differences with Apex Tests and Jest

No Salesforce Data Access

Unlike Apex tests, Jest does not have access to Salesforce data. Jest will only test the shell of your Lightning Web Component. If you need a mock record, you will need to create fake data in JSON form and import it.

Reset Test Conditions Manually

Unlike Apex test methods, in Jest, you have to manually reset the test conditions yourself (this is done automatically in Salesforce in between each test method). This can be done with an “after each method”. If this isn’t done what you will find is the data you create in one test will bleed into the next and cause complications. It’s best to try to clear the slate for every test being run.

Frontend Focused

If you’re primarily used to testing with Apex, you’ll find Jest is a lot more front end focused as you have to inspect the DOM often to ensure things are working as expected. This is primarily because you are often manipulating logic, and the result is reflected on the page. This means most of your testing will begin with loading the component you want to test manually. As you write more Jest tests, you will begin to see the similarities between Jest and Apex, and writing tests will become easier. However, if your background is in Apex testing, switching to Jest tests can be challenging at first.

Have Questions About Leveraging Jest tests to Ensure Lightning Web Components Work in Salesforce?

Have questions about leveraging Jest tests to ensure Lightning Web Components work? Sign up for our newsletter! We send out a monthly recap of our latest Salesforce content, including articles on security and actionable insight on Salesforce optimization for enterprises, and more.

You may be interested in

Leveraging Data to Boost Bundling & Retention for Telcos

Telecommunications companies have access to an immense amount of data. This data, if properly harnessed, can become a gold mine of valuable insights. However, the challenge lies in the ability to unlock this wealth of information and convert it into actionable strategies that can help increase bundling , customer retention and overall ARPU (Average Revenue […]

Read More

Service Cloud Voice Primer

What is it and what are the benefits? The Salesforce ecosystem powers the Sales and Service engines at some of the world’s largest companies. Historically, organizations have had to rely on third-party providers to integrate voice—one of the most vital channels of communication—into this platform. However, there is now a native option available, thanks to […]

Read More

Sign up for the latest tips & news from CloudKettle

Thank you for subscribing.