[SalesForce] where to see test code coverage for lwc jest Test

I have this below test class which is testing a getPicklistValues method on a LWC component named manageCountries.

import { createElement } from 'lwc';
import ManageCountries from 'c/ManageCountries';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import { registerLdsTestWireAdapter } from '@salesforce/sfdx-lwc-jest';

// Mock realistic data
const mockGetPicklistValues = require('./data/getPicklistValues.json');

const getRecordAdapter = registerLdsTestWireAdapter(getPicklistValues);

describe('c-manage-countries', () => {

    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('wireMthodTest1', () => {
        const element = createElement('c-manage-countries', {
            is: ManageCountries
        });
        document.body.appendChild(element);

        getRecordAdapter.emit(mockGetPicklistValues);
    });
});

When I npm run test:unit and it works as expected with below message in the terminal

enter image description here

this message doesn't show the percentage covered, and can we see red and green lines just like we see in apex to know which lines are covered by test class and which ones are pending?

Update

JS for manageCountries component

@wire(getObjectInfo, { objectApiName: STUDY_LOCATION_OBJECT }) objectInfo;

@wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: SHIPPING_FREQUENCY_FIELD })
getShippingFrequencyOptions({ data, error }) {
    if (data) {
        this.shippingFrequencyOptions = data.values;
        console.log(JSON.stringify(this.objectInfo));
    } else if (error) {
        console.log(JSON.stringify(error));
    }
}

getting below error when running npm run test:unit:coverage without coverage npm run test:unit works fine

enter image description here

Best Answer

Use the command npm run test:unit:coverage (i.e., usage of flag --coverage in your test command or you may even update this in the scripts section of package.json config/ you may be familiar with this approach if you have worked in node or npm).

--Update-(Start)--:

Add the following to the package.json, if you don't have it already.

"scripts": {
    "test": "npm run test:unit",
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",
    "test:unit:coverage": "sfdx-lwc-jest --coverage"
  }

--Update-(End)--:

[Or, you can configure the jest.config.js file for various coverage options as mentioned here. Note: I've personally not tested using these config options but it should be possible].

See the screenshot below for the percentage covered information in table format. The last column Uncovered Line #s shows the lines that were not covered in the unit test. This isn't similar to way it shows up for apex in Dev Console, but gets you the required information.

enter image description here

Related Topic