First Jest Test file

To test the component we should have our LWC component ready. So let's create the component.

Create a LWC component for testing

First create a component called myFirstComponent
Add the following code to the myFirstComponent.js, myFirstComponent.html and myFirstComponent.js-meta.xml files

myFirstComponent.js

import { LightningElement } from 'lwc';

export default class MyFirstComponent extends LightningElement {
    greeting = 'World';
}

myFirstComponent.html

<template>
    <lightning-card title="Hello" icon-name="custom:custom14">
        <div class="slds-var-m-around_medium first">
            Hello, {greeting}!
        </div>
        <div class="slds-var-m-around_medium second">
            My, {greeting}!
        </div>
    </lightning-card>
</template>

myFirstComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="templateToggleDemo">
        <apiVersion>49.0</apiVersion>
        <isExposed>true</isExposed>
        <targets>
            <target>lightning__AppPage</target>
            <target>lightning__RecordPage</target>
            <target>lightning__HomePage</target>
          </targets>
</LightningComponentBundle>

Create Your First Jest Test File

Add a __tests__ folder under your component
Add __tests__ folder to .forceignore so that it’s not deployed to your org
Create a file with your component name and give an extension .test.js as shown below.

Create Your test cases for the component

myFirstComponent.test.js

import {createElement} from 'lwc'
import MyFirstComponent from 'c/myFirstComponent'

describe('c-my-first-component test suite', ()=>{
    
    test('display first greeting', ()=>{
        const element = createElement('c-my-first-component', {
            is:MyFirstComponent
        })
        document.body.appendChild(element) 
        const firstDiv = element.shadowRoot.querySelector('div.first')
        expect(firstDiv.textContent).toBe('Hello, World!')
    })
    test('display second greeting', () => {
        const element = createElement('c-my-first-component', {
            is: MyFirstComponent
        })
        document.body.appendChild(element)
        const secondDiv = element.shadowRoot.querySelector('div.second')
        expect(secondDiv.textContent).toBe('My, World!')
    })
})

In line 1. we are importing the createElement method from the lwc that will help us to create a new element

In line 2. We are importing our MyFirstComponent from the path ie. c/myFirstComponent

In line 4. We have created the describe block for organizing test cases in logical groups of tests. We have given the name c-my-first-component test suite name to the describe block and within this block, we are writing our test cases

In line 6. We have created our first test block in which we are going to test that our first div block has content Hello, World! or not

In line 7-9 we are creating the element using createElement method and loading the HTML of our myFirstComponent component within the element that we are creating.

Behind the scene, it will become like this

<c-my-first-component>
    <!-- component template will come here -->
</c-my-first-component>

In line 10. we are attaching the element created at line 7 to the JSDOM body tag.

In line 11. We are fetching the reference of the div that has class first and storing to variable firstDiv

In line 12. we are checking the text withing the div is correct or not using the toBe matcher.

Run Your test cases

You can run your test case using the following command

npm run test:unit -t myFirstComponent.test.js // this command for running single file

npm run test:unit // this command for running all the test files

Output

After running the test cases you will see the following output

Book Demo