Testing LWC with Jest and Visualforce controllers
Write Jest tests for Lightning web components (async rendering, shadowRoot queries, mocked Apex, wire adapters, labels and events), debug JavaScript with Chrome DevTools and Jest debug mode, and test Visualforce controllers, extensions, page messages and continuations in Apex.
Apply techniques and tools for testing and debugging LWC, Aura Components, and Visualforce controllers and extensions, and JavaScript.
~8 min read · 15 practice questions ·
What the exam expects
- Pick the right tool: Jest for Lightning web component JavaScript, Chrome DevTools for code running in the browser, Apex tests for Visualforce controllers and extensions.
- Read a Jest test and fix it: async rerendering,
element.shadowRootqueries, mocked imperative Apex, wire adapteremit()/error(), custom label imports and event assertions. - Debug JavaScript: pause on exceptions, custom formatters for proxies, Jest debug mode, and
thisinside callbacks. - Test Visualforce controllers and extensions (
Test.setCurrentPage,ApexPages.StandardController,ApexPages.getMessages()), find view-state hogs, and test continuation callbacks.
Key terms: Jest (the JavaScript test runner Salesforce recommends for LWC, run locally through @salesforce/sfdx-lwc-jest); jsdom (the simulated browser DOM Jest tests run against); test wire adapter (an sfdx-lwc-jest mock that pushes data or errors into a @wire); custom formatter (a DevTools console setting that shows the values inside LWC proxies); controller extension (an Apex class whose constructor takes one ApexPages.StandardController or custom controller).
Key facts
- Detail
- Lightning web components only, not Aura; no browser or org
- Detail
- Deprecated and no longer supported
- Detail
__tests__folder, not saved to Salesforce, listed in.forceignore
- Detail
- One instance per test file, not reset between tests
- Detail
- Resolve to the label path, such as
c.specialLabel
- Detail
- Apex test wire adapter's
error()emits an error
- Detail
- Visible with DevTools custom formatters
- Detail
node --inspect-brk node_modules/.bin/jest --runInBand
- Detail
- Single argument:
ApexPages.StandardController(or the custom controller it extends)
- Detail
- Needs
<apex:form>and a custom controller or extension; 170KB limit
Sources for this section (9)
- Test Lightning Web Componentsdeveloper.salesforce.com (opens in a new tab)
- Testing Components (Aura)developer.salesforce.com (opens in a new tab)
- Write Jest Tests for Lightning Web Componentsdeveloper.salesforce.com (opens in a new tab)
- Jest Test Patterns and Mock Dependenciesdeveloper.salesforce.com (opens in a new tab)
- Jest Testing Wire Service (Trailhead)trailhead.salesforce.com (opens in a new tab)
- Debug Using Chrome DevToolsdeveloper.salesforce.com (opens in a new tab)
- Debug Jest Testsdeveloper.salesforce.com (opens in a new tab)
- Building a Controller Extensiondeveloper.salesforce.com (opens in a new tab)
- Using the Development Mode Footerdeveloper.salesforce.com (opens in a new tab)
- Why must a Jest test await a resolved promise after setting an `@api` property on an appended component?
- When does a wired component receive data emitted by a test wire adapter?
- Why does `this` become `undefined` in a regular `function` passed to `then()` inside a class method?
- How does a test create a controller extension for a record `p`?
- Which Apex call checks that a controller added an error message?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the Platform Developer II pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 28 lessons of the Platform Developer II guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (15 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams