Skip to main content

Test Lightning Web ComponentsCall APIs from Apex

Test Lightning Web Components with Jest Framework


1. Before installing sfdx-lwc-jest install Node.js and npm.
2. Node.js : This page lists two releases of Node.js. We recommend using the “LTS” (Long Term Support) version, rather than the “Current” version.

Install Jest and Its Dependencies into Your Project
npm install @salesforce/sfdx-lwc-jest --save-dev
To Run test:
npm run test:unit

Component Folder Structure
Create a folder named __tests__ at the top level of your component’s bundle directory.
Update .forceignore with **/__tests__/**

Test File Naming Conventions:
Test files must have names that end in “.js”, and Salesforce recommend that tests end in “.test.js.”
Jest runs JavaScript files in the __tests__ directory

Example of package.json:
  "scripts": {
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",

For More Details and Examples: Click Here

Sample code to check "Hello World!" output:

import { createElement } from 'lwc';
import Hello from 'c/lwcHelloWorld';

describe('c-lwcHelloWorld', () => {
    afterEach(() => {
        // The jsdom instance is shared across test cases in a single file so reset the DOM
        while (document.body.firstChild) {

    it('displays greeting', () => {
        // Create element
        const element = createElement('c-lwcHelloWorld', {
            is: Hello

        // Verify displayed greeting
        const div = element.shadowRoot.querySelector('div');
        expect(div.textContent).toBe('Hello, World!');


Post a Comment

Popular posts from this blog

Platform Developer I Certification Maintenance (Winter '23)

 Maintain Your Platform Developer I Certification for Winter ’23 1. Field update actions have changed in API Version 54.0. Which record-triggered flows do field update actions now execute? Answer: Before-Save after After-Save 2. Which Apex class is used to determine the hostnames for the domains that Salesforce hosts for your org? Answer: System.DomainCreator 3. Which modules can be used for notifications in a Lightning web component instead of native APIs? Answer: LightningAlert, LightningConfirm, and LightningPrompt 4. What determines an org’s “shape” in Salesforce? Answer: Features, settings, edition, limits, and licenses 5. Which lightning-modal-* component is required to create a modal? Answer: Body 6. How do you call an invocable action from Apex code? Answer: Reference Invocable.Action Get Hands-On With Apex Assertions 1. Create Two Apex class: Copy and Paste below codes (A.) TestFactory @isTest public class TestFactory {    public static Account getAccount(String accountName, B

Custom Table In LWC

I'm assuming you've Basic understanding of Lightning Web Component, I'll be explaining you the syntax that will be generic. HTML: < template > <!-- Header Part -->      < lightning-card   title = "Custom Data table in Lightning Web Components" >          < div   class = "slds-grid slds-gutters" >              < div   class = "slds-col" >                  < span ></ span >              </ div >              < div   class = "slds-col" >                  < span > <!--A Button For extra feature-->                      < lightning-button   label = "Show Selected Contacts"   onclick = {showContacts}   style = "margin-left: 40%"   variant = "brand" > </ lightning-button >                  </ span >              </ div >          </ div >< br />

LWC js-meta.xml Configuration File Tags

Each Lightning web component folder must include a configuration file named <componentName>.js-meta.xml. The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Community Builder. Some Standard Key metadata values: apiVersion : A double value that binds the component to a Salesforce API version. isExposed : If isExposed is false, the component is not exposed to Lightning App Builder or Community Builder. To allow the component to be used in Lightning App Builder or Community Builder, set isExposed to true and define at least one <target>, which is a type of Lightning page. Some Standard Optional metadata values: description : A short description of the component, usually a single sentence. masterLabel : The title of the component. Appears in list views, like the list of Lightning Components in Setup, and in the Lightning App Builder and in Community Builder. targets : Specifies wher