LWC JEST test class for Hello world component

 Hello world LWC JEST Test class

In this post we see how to write JEST test class for lightning web components and how to run LWC JEST Test class to check how my lines of code covered and what are the lines are left same like in apex test class. Let's start with helloWorld component.

Sample code of HelloWorld.

helloWorld.html

<template>
   <lightning-card title="Hello World" icon-name="standard:account">
      <div class="slds-m-around_medium">
         <lightning-input label="Name" value={myName} onchange={handleNameChange}></lightning-input>
         <h1>Hello {myName}</h1>
      </div>
   </lightning-card>
</template>

helloWorld.js

import { LightningElement, track } from 'lwc';

export default class HelloWorld extends LightningElement {
   @track myName;

   handleNameChange(event){
      this.myName = event.target.value;
   }
}

helloworld.js-meta.xml

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

Now follow the below steps to write JEST test class for above component.

Step:1

Create __tests__ folder inside your component. then create a file in newly created __tests__ folder with the name of components.test.js file extension. In our component helloWorld.test.js would be the Jest test class name.

Step: 2

JEST test class for helloWorld component.

import { createElement } from 'lwc';
import helloWorld from 'c/helloWorld';

describe('c-hello-world', () => {
    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);
        }
    });

    it('displays greeting', () => {
        // Create element
        const element = createElement('c-hello-world', {
            is: helloWorld
        });
        document.body.appendChild(element);

        let inputBox = element.shadowRoot.querySelector('lightning-input');
        inputBox.value = 'World';
        inputBox.dispatchEvent(new CustomEvent('change'));

        return Promise.resolve()
        .then(() => {
            // Verify displayed greeting
            const div = element.shadowRoot.querySelector('h1');
        expect(div.textContent).toBe('Hello World');
        });
       
    });
});

Step: 3
Open the terminal in vs code and run the JEST test class.
Commands to run the JEST test class.

npm run test:unit helloWorld.test.js 

Step: 4
To check the code coverage of the JEST test class, run the following command.
It will run the test clas and shows the coverage of the code in terminal.

pm run test:unit:coverage helloWorld.test.js 

To check exactly which lines of code covered or not like in apex follow the navigation. 

Your project folder Coverage --> Icov-report --> here all the LWC components will be available. 

Open that helloWorld.html file in your browser.  Here you can see how many lines of code covered and what are those lines.

Also found above code in Tech Shorts Git repo