How to get started with LWC Jest framework?

1. Get Started With LWC
Testing
Keshav Caleechurn
Saint-Pierre MA, Developer User Group
Sponsor: Spoon Consulting

2. Agenda
- Why is testing important
- LWC JEST Framework brief
- Setup & Configuration
- Where to write test
- Code Structure
- Demo
- Test results output formats
- Questions

3. Testing
- Testing attempts to find and report errors
- Identify the causes and correct errors through debugging
- Not only back-end but also front-end
● Unit Testing
● End-to-End Testing

4. Why is testing so important?
- Avoid Regression when adding new / updating functionalities
- Reduce flaws, hence increasing quality
- Helps ‘reduce’ cost
“Any bug not detected in the design phase will cost ten times more time to detect at the coding phase
and an additional ten times more at the debugging phase.”
—Dr. Nikolai Bezroukov, The Art of Debugging

5. What is JEST?
- Collect code coverage information and supports mocking to help isolate tests from complex
dependencies
- Tests are only local and are saved and run independently of Salesforce
- Run fast test as it does not run in a browser or connect to an org
- Works with Babel, TypeScript, Node, React, Angular, Vue, and more projects.
Powerful tool with rich features for Writing JavaScript tests.

6. Installation
- Requires sfdx-lwc-jest Node Module
- The Salesforce CLI makes it easy to install Jest and its dependencies into the project
- https://trailhead.salesforce.com/en/content/learn/modules/test-lightning-web-components/set
-up-jest-testing-framework
$ sfdx force:lightning:lwc:test:setup
You are all set to
continue

7. Where to write JEST tests?
- force-app/main/default/lwc/unitTest/__tests__/unitTest.test.js
- Latest versions automatically create the test folder when creating a LWC
Format: NameOfComponent.test.js

8. Code Structure
import { createElement } from 'lwc';
import UnitTest from 'c/unitTest';
describe('c-unit-test', () => {
afterEach(() => {
// The jsdom instance is shared across test
cases in a single file so reset the DOM
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
});
async function flushPromises() {
return Promise.resolve();
}
it('renders unit test'
, async () => {
// Arrange
const element = createElement('c-unit-test',
{
is: UnitTest
});
// Act
document.body.appendChild(element);
// Assert element exists
const div =
element.shadowRoot.querySelector('div');
expect(element.count).toBe(0);
expect(div.textContent).toBe('Counter : 0');
});

9. Code Structure
import { createElement } from 'lwc';
import UnitTest from 'c/unitTest'
;
- Imports the createElement method from the lwc framework. It’s only available in
tests
- Imports the UnitTest class from the component JavaScript controller
- Starts the describe test suite block
describe('c-unit-test'
, () => { … }
afterEach(() => {
while
(document.body.firstChild) {
document.body.removeChild(document.bod
y.firstChild);
}
});
- afterEach() runs after each test in the describe block it is in
- Resets the DOM at the end if the test
- JEST uses jsdom to provide an environment that behaves much like a
browser’s DOM or document
- Each test file gets a single instance of jsdom, and changes aren’t reset between
tests inside the file
- It is a best practice to clean up between tests so that a test’s output doesn’t
affect any other test

10. Code Structure
it('renders unit test'
, async () => {
const element = createElement('c-unit-test',{
is: UnitTest });
document.body.appendChild(element);
const div =
element.shadowRoot.querySelector('div');
expect(element.count).toBe(0);
expect(div.textContent).toBe('Counter : 0');
});
- Creates an instance of the component and assigns
it to the constant element
- adds the element to the jsdom’s version of
document.body using the appendChild
- Attaches LWC to DOM and renders it, triggering
connectedCallback() and renderedCallback()
- Searches the DOM for a div
- Use element.shadowRoot as the parent for the
query. It's a test-only API that lets you peek across
the shadow boundary to inspect a component’s
shadow tree
- Expect @api count = 0
- Expect element contains text Counter : 0

11. Scripts
package.json

12. Sample Commands
1. $ npm run test:unit
Run all tests for your project
3. $ npm run test:unit:watch
Run Tests Continuously During
Development
NOTE:For this option, Node relies on
Git to “watch” the code.
2. $ npm run test:unit:debug
Run Tests in Jest Debug Mode
4. $ npm run test:unit:coverage
Run Tests and Display Code Coverage

13. Common Issue
- “Invalid sourceApiVersion” error due to an updated VS Code Extension with the latest
Salesforce release.
- error Invalid sourceApiVersion found in sfdx-project.json. Expected 53.0, found 55.0

14. Demo

15. JEST Result Formating
jest-json-reporter:
https://github.com/Vall3y/jest-json-reporter
jest-html-reporter:
https://github.com/Hargne/jest-html-rep
orter
{
"numFailedTestSuites":0,
"numFailedTests":0,
"numPassedTestSuites":1,
"numPassedTests":2,
"numPendingTestSuites":0,
"numPendingTests":0,
"numRuntimeErrorTestSuites":0,
"numTotalTestSuites":1,
"numTotalTests":2,
"snapshot":{
.
.
.
}

16. Questions?

17. Next group meetup:
How to implement a custom cell in Lightning Datatable (lightning-datatable)
Want to be a speaker, get in touch with us:
kmoothien@sharinpix.com

18. JEST CHILL