At the Toronto, Canada, Salesforce Developer group, we spent a couple of hours today trying to learn LWC Debugging Techniques and Jest Testing.

We set ourselves below learning objectives.

  1. Explore Debugging Techniques
  2. Take a sample Lightning Web Components (LWC) and write some Jest tests.

Debugging Techniques Identified

  1. Local Development Server has limited debugging capability due to no proper source maps.
  2. Debugging on org can be done by setting breakpoints in code once we enable Lightning to run in the debug mode.
  3. Use the Sources tab in chrome and look under the lightning/page/modules/c folder to find your component.js file.
  4. Add JavaScript breakpoints to step through the code.
  5. We identified black boxing helps. We black-boxed a couple of Salesforce JavaScript files like aura_proddebug.js and scenarioTracker.js to make debugging easier.
  6. Also, make sure you turn on the custom formatter in chrome on so one can read the @api variables on the HTML template.
Find Source code for setting breakpoints in treeview.js component lib

treeView.html treeView.js Writing Test Code

The component code

We use sfdx-lwc-jestnpm module in our project dev-dependencies.

Writing test code was a breeze once we have scaffolded the project using the below command

sfdx force:lightning:lwc:test:create -f <folderpath>/force-app/main/default/lwc/treeView/treeView.js
  1. Verify Component DOM had rendered properly
  2. Verify that the component event was dispatched successfully with the right data. The trick here is you create a jest mock function using jest.Fn() and add as a listener so when the button is clicked the element can invoke a mock function instead.
  3. Also, we learned that when jest dispatches mock handler the handler has a mock property that has calls and results in an array to get information around arguments of the call and results of calls respectively.
  4. Check the JEST mock API here

jest test code

We wanted to cover test for

Running the jest code

  1. Salesforce Extension pack in vscode has excellent support for running and debugging jest tests
  2. Use alpha version of vscode-jest extension from jest community to get code overlay.
  3. Getting coverage is also easy via command line using the below command
import {afterEach(() => {it('renders tree view component', () => {it('renders tree view component with label', () => {it('dispatches event on button click', () => {
createElement
} from 'lwc';
// The jsdom instance is shared across test cases in a single file so reset the DOM
const element = createElement('c-tree-view', {
const element = createElement('c-tree-view', {
const element = createElement('c-tree-view', {
is: TreeView
});
element.label = 'hello';
document.body.appendChild(element);
// Mock handler for toast event
const handler = jest.fn();
element.addEventListener('treeclick', handler);
const buttonElement = element.shadowRoot.querySelector('lightning-button');
buttonElement.click();
return Promise.resolve().then(() => {
expect(handler).toHaveBeenCalled();
expect(handler.mock.calls[0][0].detail.node).toBe('xyz');
});
});
});
is: TreeView
});
element.label = 'hello';
document.body.appendChild(element);
const cardElement = element.shadowRoot.querySelector('lightning-card');
return Promise.resolve().then(() => {
expect(cardElement.title).toBe('hello');
});
});
is: TreeView
});
element.label = 'Roles';
document.body.appendChild(element);
const cardElement = element.shadowRoot.querySelector('lightning-card');
return Promise.resolve().then(() => {
expect(cardElement.title).toBe('Roles');
});
});
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
});
import TreeView from 'c/treeView'; describe('c-tree-view', () => {
Code Overlay using vscode-jest extension
  1. Lightning stubs in sfdx-lwc-jest are found here
  2. Official Salesforce documentation on lwc jest testing
  3. Trailhead Module on jest
  4. Explore some awesome test coverage in lwc recipes app
  5. Official jest documentation for writing jest tests
npm run test:unit:coverage

Please click here to read the original article as posted on Medium.

We source the web to bring you best Salesforce articles for our reader’s convenience. If you want to have this article removed, please follow guidelines at Digital Millennium Copyright Act (DMCA)..

LEAVE A REPLY

Please enter your comment!
Please enter your name here