Jest 101 for LWC-Part 1 : Setup & Terminologies

A quick guide to get started with Jest and snippets to help you to get started !

Usually we only write test classes to check coverage of our apex classes/flows , but in case we need to check the functionality of the JS code of LWC we need to write Jest tests for the same. To know more about Jest, you can check the link here- jest official site
Note : Nikhil Karkra has provided a excellent video series on Youtube, which I referred for learning jest. I learned all the basics from these videos ! Do check them out if you have time to learn in depth. This blog is like a quick guide ,which is created by referring to those videos.

Pre-requisites :

1. Firstly , we need Node.js,
   to install it, jump on to the official site : https://nodejs.org . This will also install NPM along with it.
2. To check if the node is installed, use the following commands in VS code:

node -v or node — version
npm -v or npm — version

Next, we would need to do some updates in files of the project.
We need to setup the package.json. To do so , run :

npm init -y

This will generate package.json with default configurations.

3. Now we need to install SFDX jest module, which can be done using the cmd:

npm install @salesforce/sfdx-lwc-jest --save-dev

4. Next we automate the scripts, to do so, open the package.json (would be in the project folder) and jump to “scripts”.

For this key (as its a JSON), we can add various scripts. We will add the following jest commands here :

and it should look like this :

Updating package.json with new scripts.

Note : The last command in the scripts ‘sfdx-lwc-jest - -coverage’ is used to get the coverage for all the js files in the project folder.
As we don’t want to push these jest tests in the org, jump on to ‘.forceignore’ file of the project, ‘__tests__’ should be present automatically.

__tests__ should be in .forceignore

5. Next, we create the folder structure in which we will write the jest tests.

Creating new folder for writing jest tests.

6. Now, we create the jest file, the naming convention usually is :
“LWC_Name.test.js”
Click on the “__tests__” folder and click on new file icon (it’s on the left of ‘Create Folder’ icon)

Now we have everything we need ! 🕺

Terminologies -

There are some terms you need to know , to write jest test cases. I will be comparing it with test class in apex so its easier to co-relate.

describe : It’s a block that defines test suite. This is basically like a test class.
it or test : describe a single test case. This would be like your test class method.
beforeEach : If we need to run a particular piece of code before each test case, we write code in this block.
afterEach : If we need to run a particular piece of code after each test cases, we write code in this block.
expect : To check the test value. We will need “matcher” function along with this to assert values. This is like System.assert in test class apex method.

Example:

describe('Sum test block',() => {
 //Always write test inside this block
 //Name should be proper and tell the reader what is going to be tested. 
    test('To check if sum is three', () => {
        const num = 1+2;
        expect(num).toBe(3); // "toBe" is used to assert values.
    });
})

toBe is a type of matcher. To know more about matchers: https://jestjs.io/docs/using-matchers

In case we need to run the jest test on each change automatically, we can use “watcher” functionality in jest.

Now if we need to run watcher for only particular test file, we can use the command :

npm run test:unit:watch ___give the whole component path here.__

it would look something like this :

npm run test:unit:watch c:\Users\PD\Desktop\Jest practice\investorcommunityv2\prototype\main\default\lwc\AssetsListView

If the watcher doesn’t run, go to terminal press “w” to open watch menu and press “o” :

Watch Usage commands are :
› Press a to run all tests.
› Press f to run only failed tests.
› Press o to only run tests related to changed files.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
We can also directly use watcher using the VS code icons:

Watcher and run buttons.

Now in 2nd part we will jump to actual jest tests ! Click here to open ! 😁