function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
raSFUserraSFUser 

Simple Jest test is failing

Hello i have a very simple LWC component that runs on a custom record, it takes in the rec id as a paramater calls apex, and displayes the response message to the user.

The issue i am having is when writing a Jest test for this i encounter errors even though my component / test is basisicly identical to the one seen in the examples: (https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc/apexImperativeMethod) 

 

Can anyone help me corrrect this test so that it no longer fails / causes the other tests to fail.

 

Below is the HTML of my LWC:

<template>
    <div>
        <p><b>{label.Data_Sync_Heading}</b></p>
        <p>{syncMessage}</p>
    </div>
</template>
 

Below is the .js of my LWC:

import { LightningElement, api, track } from 'lwc';
import syncData from '@salesforce/apex/DataController.syncData';
import Data_Sync_Fail from '@salesforce/label/c.Data_Sync_Fail';
import Data_Sync_Default_Message from '@salesforce/label/c.Data_Sync_Default_Message';
import Data_Sync_Heading from '@salesforce/label/c.Data_Sync_Heading';



export default class syncDataLwc extends LightningElement {
    @api recordId;
    
    @track syncMessage = Data_Sync_Default_Message;
    @track syncDone = false;

    // Expose the labels to use in the template.
    label = {
        Data_Sync_Heading
    };

    connectedCallback() {
        syncData({rec: this.recordId})
         .then (response => {
             this.syncMessage = response;
             this.syncDone = true;
         })
         .catch(() => {
             this.syncMessage = Data_Sync_Fail;
             this.syncDone = true;
         });
    }
 

Below is the .JEST test code for my LWC:

import { createElement } from 'lwc';
import syncDataLwc from 'c/syncDataLwc';
import Data_Sync_Fail from '@salesforce/label/c.Data_Sync_Fail';
import Data_Sync_Heading from '@salesforce/label/c.Data_Sync_Heading';
import syncData from '@salesforce/apex/DataController.syncData';

let element;

//mock out the text for the heading label
jest.mock("@salesforce/label/c.Data_Sync_Heading", () => {
    return { default: "Sync Data" };
}, { virtual: true });

//mock out the text for the default failure message label
jest.mock("@salesforce/label/c.Data_Sync_Fail", () => {
    return { default: "Failed to Synchronise Data. Data could be out of date." };
}, { virtual: true });





// ----- adding the apex mock causes all tests to fail, when not mocked tests work as exspected.

// Mocking syncData Apex method call
jest.mock('@salesforce/apex/DataController.syncData', () => {
     return {default: jest.fn()};
}, { virtual: true });


// Sample error for imperative Apex call
const APEX_REC_SUCCESS =  "this is a test";






describe('c-sync-Data-lwc', () => {
	
	//This line of code is necessary to reset the DOM after each block of test code
	afterEach(() => {
		while (document.body.firstChild) {
			jest.clearAllMocks();
			document.body.removeChild(document.body.firstChild);
		}
	});	

    // Helper function to wait until the microtask queue is empty. This is needed for promise
    // timing when calling imperative Apex.
    function flushPromises() {
        // eslint-disable-next-line no-undef
        return new Promise((resolve) => setImmediate(resolve));
    }
    
    //An it block describes a single test. A test represents a single functional unit that you want to test. Write the it to describe the expected behavior of that function.
    it('CUSTOM LABEL TEST: Custom label for the heading was mocked with the default value', () => {
	
		// Create initial element
		const element = createElement('c-syncDataLwc', {
			is: syncDataLwc
		});
		document.body.appendChild(element);
                        
        return flushPromises().then(() =>  {
            const paragraphs = element.shadowRoot.querySelectorAll('p');
            expect(paragraphs.length).toBe(2);

            const boldHeading = element.shadowRoot.querySelectorAll('b');
            expect(boldHeading.length).toBe(1);


            expect(boldHeading[0].textContent).toBe("Sync Data");
        });
    });



    it('APEX RETURN SUCESS: checking that the default error is used when apex call fails', () => {
               
			   
        const REC_ID = '001';
        const APEX_PARAMETERS = { rec: REC_ID };
		
		
		// Create initial element
		const element = createElement('c-syncDataLwc', {
			is: syncDataLwc
		});
		document.body.appendChild(element);
		
		// Assign mock value for resolved Apex promise
        syncData.mockResolvedValue(APEX_REC_SUCCESS);
			   
        return flushPromises().then(() =>  {

           //get the paragraphs on the html page
		   const paragraphs = element.shadowRoot.querySelectorAll('p');

			//check the text is = to the sucess mock
            expect(paragraphs[1].textContent).toBe(
                APEX_REC_SUCCESS
            );

        });
    });
});
 

 

Paula den OudenPaula den Ouden
connectedCallback() is called when you append the element to the document body, so you should assign the mock value before you call document.body.appendChild(element);