Testing Strategy and Jest Fundamentals

Manually re-clicking through a component in a real org after every change is slow, easy to skip under deadline pressure, and doesn't scale as a component grows. An automated test runs in seconds, runs the same way every time, and catches a regression the moment it's introduced — long before a user ever sees it.

Salesforce provides sfdx-lwc-jest, tooling built on the popular Jest testing framework, configured specifically to run LWC component tests. Critically, these tests run entirely locally (or in CI) with no connection to a real Salesforce org — they test a component's own rendering and JavaScript logic in isolation.

import { createElement } from 'lwc';
import HelloSalesforce from 'c/helloSalesforce';

describe('c-hello-salesforce', () => {
    afterEach(() => {
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });

    it('renders a greeting', () => {
        const element = createElement('c-hello-salesforce', { is: HelloSalesforce });
        document.body.appendChild(element);

        const paragraph = element.shadowRoot.querySelector('p');
        expect(paragraph.textContent).toBe('Hello, Salesforce!');
    });
});

createElement builds an instance of the component (from Module 1's "Hello Salesforce" project); appendChild inserts it into a test DOM so it actually renders; element.shadowRoot.querySelector reads its rendered output (Module 1's Shadow DOM concept, now used to make assertions); afterEach cleans up between tests so they don't interfere with each other.