To test the component we should have our LWC component ready. So let's create the component.
myFirstComponent
myFirstComponent.js
, myFirstComponent.html
and myFirstComponent.js-meta.xml
filesimport { LightningElement } from 'lwc';
export default class MyFirstComponent extends LightningElement {
greeting = 'World';
}
<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>
<?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>
__tests__
folder under your component__tests__
folder to .forceignore
so that it’s not deployed to your org.test.js
as shown below.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.
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
After running the test cases you will see the following output