JEST TEST For LWC

Why do we need a Jest Test ?

Whatever we are achieving in the technical code we have written to check whether they are working properly fine as per our requirement we need to test it first.

For apex we have the test class to write and to check if the code is performing as per our requirement or not, same goes with LWC as well whenever we will write a LWC component to test the functionality we can write a jest test for our LWC component.

Steps to write a Jest Test for our LWC component:

1. Install Node.js together with npm (Installation of Node.js will automatically install npm) https://nodejs.org/en/download/ (long-term support version).  After downloading you can check in your command prompt or vs code terminal whether it is installed or not by simply using this command :- npm-v and this will show the version you have downloaded otherwise it will show some error.

2. Do the setup by using this command:  sfdx force:lightning:lwc:test:setup

3. Check if the jest is installed or not by simply running this command npx jest –version if this is showing an error instead of the version name you have to download the jest by running this command npm install –save-dev jest.

4. After creating a new LWC component along with html,js and xml files you will get a __tests__ folder and within that a test.js file having by default test code and later you can add test scenario as per your requirement, If you are unable to find the __tests__ folder inside the LWC component then you need to  right click on your LWC component and create a new folder named __tests__ and create a new file in that folder and give the name according to your component name ex :- componentName.test.js Replace the componentName with your LWC component code name, make sure you are giving the exact name.

5. And in the componentName.test.js you can add the test scenario according to your LWC component code.

6. And then to check whether it is working or not you run your jest test using the command npx jest and it will run all the jest test you are having in LWC folder and if you want to run any specific jest test then you can run a  command like this :-        npx jest helloWorld.test.js you can replace your jest test component name.

Demo Jest Test Component

Let’s create a simple “helloWorld” component to understand the jest test easily.

After creating a new LWC component you will get the html and js code like this,

helloWorld.html

<template>

    <lightning-card>

        {Title}

    </lightning-card>

</template>

helloWorld.js

import { LightningElement } from ‘lwc’;

export default class HelloWorld extends LightningElement {

    Title = ‘Hello Jest Test’

}

And after creating a folder in LWC component called __tests__ and inside that when you create a file named helloWorld.test.js this will look like this,

d the helloWorld.test,js code will look like this,

import { createElement } from ‘lwc’;

import HelloWorld from ‘c/helloWorld’;

describe(‘c-hello-world’, () => {

afterEach(() => {

while (document.body.firstChild) {

document.body.removeChild(document.body.firstChild);

}

});

it(‘displays default greeting message’, () => {

// Arrange

const element = createElement(‘c-hello-world’, {

is: HelloWorld

});

// Act

document.body.appendChild(element);

// Assert

const helloWorldText = element.shadowRoot.textContent.trim();

expect(helloWorldText).toBe(‘Hello Jest Test’);

});

it(‘displays custom title’, () => {

// Arrange

const CUSTOM_TITLE = ‘Hello Jest Test’;

const element = createElement(‘c-hello-world’, {

is: HelloWorld

});

element.Title = CUSTOM_TITLE;

// Act

document.body.appendChild(element);

// Assert

const helloWorldText = element.shadowRoot.textContent.trim();

expect(helloWorldText).toBe(CUSTOM_TITLE);

});

});

After running this with command npx jest helloWorld.test.js you will see the code status like this if this is running correctly.

That means you have correctly written a jest test for your LWC component !!

THANK YOU !!