sfdx-lwc-jest : Lightning Web Component Unit Test Setup

Installation and Run

install npm
install i @salesforce/sfdx-lwc-jest

Run Jest directly from where the Jest was installed in the project using the following Node command:

@salesforce/sfdx-lwc-jest
Run Jest against Lightning Web Components in a Salesforce DX work environment

node node_modules/@salesforce/sfdx-lwc-jest/bin/sfdx-lwc-jest

output log with no unit test available in a project

No tests found, exiting with code 1
 Run with --passWithNoTests to exit with code 0
 In /PATH/TO/PROJECT
   12 files checked.
   testMatch: /tests//*.[jt]s?(x), */?(.)+(spec|test).[tj]s?(x) - 0 matches
   testPathIgnorePatterns: /PATH/TO/PROJECT/node_modules/, /PATH/TO/PROJECT/test/specs/ - 12 matches
   testRegex:  - 0 matches
 Pattern:  - 0 matches

# shows the search logic that Jest searching for JavaScript test files

Automate Test Scripts

# run $ npm init then
sfdx force:lightning:lwc:test:setup

with Package.json and npm

{
   "name": "test-lwc",
   …  "scripts": {
     …
     "test:unit": "sfdx-lwc-jest",
     "test:unit:watch": "sfdx-lwc-jest --watch",
     "test:unit:debug": "sfdx-lwc-jest --debug",
     "test:unit:coverage": "sfdx-lwc-jest --coverage",
     …
   },
   …}

if you want to run al tests for your project, run this npm command

npm run test:unit

Run Test Continuously During Development

npm run test:unit:watch

Run Tests in Jest Debug Mode

npm run test:unit:debug

Run Tests and Display Code Coverage

npm run test:unit:coverage

Write a Basic Test

Jest tests are written, saved and run differently than Jasmine or Mocha tests written for the Lightning Testing Service for Aura Components. Jest tests are local only and are save and run independently of Salesforce. Jest Tests for Lightning Web Components are not deployed to Salesforce org.

Create the __tests__ folder

[Scenario] : test sum() function ; create sum.test.js

Jest Matchers

Mock Other Components

1. Describe the stubs provides by the sfdx-lwc-jest package
2. Understand how to override the Jest config
3. Test components outside your development environment
4. Create stubs for external components

Mocking Base Component & Customizing STUBS

Stubs installation directory — node_modules/@salesforce/sfdx-lwc-jest/src/lightning-stubs
Stub is a piece of code used to stand in for some other programming functionality, aka mocks.

There may be times when you need to override the default stubs provided. This is done by overriding the Jest configs and then creating custom stubs. Let’s follow these steps:
1. Right-click the force-app directory and select New Folder.
2. Enter test for the name of the new directory
3. right-click the new test directory and select New Folder
4. Enter jest-mocks for the name of the new directory
5. Right-click the new jest-mocks directory and select New Folder
6. Enter lightning for the name of the new directory
This is the root for Lightning Base Component stubs

Override jest.config.js

moduleNameMapper: {
     '^lightning/button$': '/force-app/test/jest-mocks/lightning/button'
   }

Add the button stub to the lightning directory

<template></template>

import { LightningElement, api } from 'lwc';
 export default class Button extends LightningElement {
   @api disabled;
   @api iconName;
   @api iconPosition;
   @api label;
   @api name;
   @api type;
   @api value;
   @api variant;
 }

These two files are copies of the lightning-button files from the lightning-stubs folder. They allow for overriding the base ligjtning-button for jest tests if needed.
You can also used custom stubs to override components from other namespaces.

Mocking Other Components

Let’s mock components with a different namespace. To do this, you set up a Lightning Web Component with a Jest test that fails, and then we’ll mock out a fix.
1. Create a new LWC named otherComponents

sfdx force:lightning:lwc:test:create -f force-app/main/default/lwc/otherComponents/otherComponents.js