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.
