Testing LWC with Jest

Lightning Web ComponentsTesting LWC with JestWrite fast, reliable unit tests for Lightning Web Components with sfdx-lwc-jest: rendering and querying shadow DOM, async timing, mocking Apex, wire adapters, navigation, toasts and modals, accessibility checks with sa11y, coverage in CI, and where UTAM end-to-end tests fit.Intermediate · about 80 minutesWhat you will learn

Set up sfdx-lwc-jest, npm scripts and a jest.config.js in a Salesforce DX project

Write tests that create components, set @api properties, query shadow DOM and wait for re-renders

Mock imperative Apex and emit data and errors through Apex and LDS wire adapters

Test navigation, toasts, modals and custom events with built-in stubs and moduleNameMapper mocks

Add automated accessibility assertions with @sa11y/jest and enforce coverage in CI

Choose the right mix of Jest, Apex tests and UTAM end-to-end tests using the test pyramid

Contents

The test pyramid for Salesforce UIs

Setting up sfdx-lwc-jest

Anatomy of a test

Async rendering and flushPromises

Mocking Apex

Mocking Lightning Data Service (getRecord and friends)

Testing navigation

Testing events in both directions

Testing toasts, modals and confirms

Custom mocks with moduleNameMapper

Snapshot testing: use sparingly

Accessibility checks with sa11y

Coverage and continuous integration

UI and end-to-end tests with UTAM

Worked example: a complete test file

Best practices

Common pitfalls

Hands-on exercises

Key takeaways