You are currently viewing Unit Test Lightning Web Components with Jest

Unit Test Lightning Web Components with Jest

With Lightning Web Components, Salesforce not only provides a technology based on modern web standards but it also provides the capability to unit test them locally or within the Continuous Integration flow as well with Jest, one of the most popular testing frameworks for modern JavaScript.

Why Unit Testing Matters?

In the spirit of Technological utopianism, software products would not have any bugs. Until then, developers should test the code as best as they can.

Looking at the four quadrants of agile testing, the unit testing is part of the 1st quadrant– the very first line of defense for code quality. It’s also commonly known that both unit and manual testing by the developer uncover around 66% of the errors before hitting the next testing quadrant. The earlier bugs are found by the developers, the “cheaper” they are. Once bugs hit the next development stages, more people and processes need to get involved for identifying and fixing bugs, which can result in the loss of trust in an application.

When Lightning web component has the unit test, the focus needs to be done on testing the functionality of one’s own component. Any functionality of one’s child components should not be tested. Whatever one expects their child components to do, that’s an implementation detail of each child component itself. It should be covered within that specific child component tests.

Salesforce has added a lot of tests to Lightning web component recipes’ sample application. Let us look at a list of best practices, recommendations, and rules that need to be checked out for making the best out of when crafting tests.

General

  • Different test cases shouldn’t be mixed into one single test. The focus should be on writing a test for a piece of functionality. Tests for Lightning web component can be short or long. Be sure of testing what’s needed.
  • Description of desired accomplishment for the test not only gives a better focus when writing it but also lets others directly see what the test is about.
  • It should be tested that a component is displaying the expected outcome. Bundling tests and focus on data and UI representation in test suites help a lot with the organization.
  • If one tests the order of UI elements, it should be ensured that modern JavaScript is used for optimizing the code when testing multiple elements simultaneously.

Data (Apex and @wire)

  • For testing imperative Apex calls, one has to mock the calls. Provisioning data and errors functionality are provided by Jest. 
  • Test data for one’s @wire tests relative should be put to the test file. Also mocks should be ready for simulating that no data is returned.
  • For successful @wire call testing, you emit data otherwise you error them.
  • For testing, if @wire adapter receives the correct parameters, getLastConfig() should be used.
  • Mocks should be cleared or else at times, testing them will fail.
  • When one tests if UI elements are filled based on mocked test data, mocked test data should be used within the tests for improving consistency.

Salesforce Specifics

  • Every base Lightning component needs to be mocked. Salesforce provides a default mock automatically. In this way, one can test function execution and properties. 
  • One can create their own implementation when they want to test behavior, not covered by base Lightning components. One can make it available globally to their application using the jest.config.js file. It is also applicable to components that are not from the namespace, like from managed packages.
  • If one executes code within the lifecycle methods, they use document.body.appendChild() and document.body.removeChild() for executing them.
  • While loading static resources, one can either simply test the UI behavior in case of a successful or unsuccessful load without using the resource. By overriding the default mock implementation, one really loads the static resource.
  • Public properties on the first render should be tested by setting them before the addition of the main element in the document to ensure correct initialization.

Testing Techniques

  • If one tests JSON objects, toEqual matcher should be used. 
  • When one has to use timers in their Lightning web component, they should make sure to set the test up for that, and for running them before validating the UI.
  • One might have to add CSS classes or a data-* attribute to an LWC markup for obtaining the desired element to be tested. 
  • Depending on what one wants to test, one should remember that a promise can chain more than one then().
  • One can override global APIs like fetch with their own mocks.

Summary

Jest is a powerful tool with rich features for writing JavaScript tests. It should be used to write unit tests for all the Lightning web components. The capability to unit test Lightning Web Components with Jest offers developers a new level of quality assurance. Jest is a widely used framework and therefore a lot of documentation and recommendations for testing with it are available.

Akshay

Akshay Dhiman

Chief Technical Officer (CTO)

“Akshay Dhiman, the CTO of Cloud Analogy, has been a standout and successful Salesforce Platform Developer for years. He has a rich experience in Salesforce Integration, JavaScript, APEX, VisualForce, Force.com Sites, Batch Processing, Lightning, PHP, C++, Java, NodeJs, ReactJs, Angular 8, GraphQL, React Native, Web Technology, and jQuery. Known for his problem-solving and debugging skills, Akshay is an out-of-the-box thinker and his capability to understand the business context and translate it into a working model is par excellence. Akshay would not only translate his thoughts into reality but would also bring in his own perspective that is always a tremendous value add. Akshay has the knack of taking challenges head on, equipped with In-depth industry knowledge, Resourcefulness and uncanny nag to build relationship with anyone in shortest time possible. Not only does he possesses fantastic technical depth and awareness but Akshay also complements them with a profound understanding of business functionalities, tools, and methodologies. He has the rare combination of skills and talent that one looks for in Salesforce – attention to detail and the drive for innovation.”

Leave a Reply