[SalesForce] LWC Jest Test – Why i keep receive 0 in the Test

I'm trying to make unit test with Jest for my lightning web component.

I'm trying to check if the data binded in my html are rendering correctly.

It seems like when i'm running the test, it doesn't give enough time for the data to be binded and keep returning 0 for some reason i ignore.

If someone know why this behaviour is happening would be very helpfull since i'm locked at this step.

Here is my syntheseComponent.js :

import { LightningElement, api, wire, track } from 'lwc';
import getSyntheseData from '@salesforce/apex/SyntheseController.getSyntheseData';

export default class SyntheseComponent extends LightningElement {
    @api recordId;
    @track syntheseData;//NOTE: added own property now

    get countContact() { 
      return this.syntheseData ? this.syntheseData.countContact : 0;
    }

    @wire(getSyntheseData, { accId: '$recordId' })
    wiredSyntheseData({error, data}) {
      if(error) {
        // eslint-disable-next-line no-console
        console.error(error);
      } else if(data) {
        this.syntheseData = data;
      }
    }
  }

The test i'm trying in my syntheseComponent.test.js :

import { createElement } from 'lwc';
import { registerTestWireAdapter } from '@salesforce/sfdx-lwc-jest';
import SyntheseComponent from 'c/syntheseComponent';
import getSyntheseData from '@salesforce/apex/SyntheseController.getSyntheseData';

// Import mock data to send through the wire adapter.
const mockGetSyntheseData = require('./data/getSyntheseData.json');

// Register a test wire adapter to control @wire(getRecord)
const getRecordWireAdapterSyntheseData = registerTestWireAdapter(getSyntheseData);

describe('c-synthese-component', () => {
    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);
        }
        jest.clearAllMocks();
    });

    it('It renders my component', () => {
        // Create element
        const element = createElement('c-synthese-component', {
            is: SyntheseComponent
        });
        document.body.appendChild(element);

        return Promise.resolve().then(() => {
            const content = document.body.querySelector('c-synthese-component');
            expect(content).not.toBeNull();
        });
    });

    it('It renders my data', () => {
        // Create element
        const element = createElement('c-synthese-component', {
            is: SyntheseComponent
        });
        document.body.appendChild(element);
        getRecordWireAdapterSyntheseData.emit(mockGetSyntheseData);

        return Promise.resolve().then(() => {
        const dd = element.shadowRoot.querySelector('dd[data-id=child-id]');
        const countField = mockGetSyntheseData.countContact;
        expect(dd.textContent).toBe(`Nb Contacts: ${countField}`);
        }); 
    });
});

The getSyntheseData.json i'm using :

{
  "amountOpportunity": 100,
  "amountOpportunityB2B": 50,
  "amountOpportunityB2BAbo": 30,
  "amountOpportunityB2BPlacesSeches": 20,
  "amountOpportunityEvent": 30,
  "amountOpportunityLagardere": 20,
  "countContact": 2,
  "countOpenactivities": 3,
  "countOpportunity": 5,
  "countOpportunityB2B": 3,
  "countOpportunityB2BAbo": 1,
  "countOpportunityB2BPlacesSeches": 2,
  "countOpportunityEvent": 1,
  "countOpportunityLagardere": 1,
  "lastCreatedOpportunityB2BFormated": "15/01/2020",
  "lastCreatedOpportunityEventFormated": "05/11/2019",
  "lastCreatedOpportunityFormated": "15/01/2020",
  "lastCreatedOpportunityLagardereFormated": "14/01/2020"
}

And a part of my syntheseComponent.html :

<lightning-tab label="Général">
        <div class="slds-m-around_medium" data-id="parent-id">
          <dl class="slds-list_horizontal slds-wrap">
            <dt class="slds-dl_horizontal__label slds-text-color_weak slds-truncate" data-id="contact-id" title="Contacts">Nb Contacts:</dt>
            <dd class="slds-dl_horizontal__detail slds-text-color_weak slds-truncate numberStyle" data-id="child-id" title="Description for first label">{countContact}</dd>
            <dt class="slds-dl_horizontal__label slds-text-color_weak slds-truncate" title="Opportunités">Nb Opportunités:</dt>
            <dd class="slds-dl_horizontal__detail slds-text-color_weak slds-truncate numberStyle" title="Description for second label">{countOpportunity}</dd>
            <dt class="slds-dl_horizontal__label slds-text-color_weak slds-truncate" title="Montant">Montant Opportunités:</dt>
            <dd class="slds-dl_horizontal__detail slds-text-color_weak slds-truncate numberStyle" title="Description for second label">{amountOpportunity}€</dd>
            <dt class="slds-dl_horizontal__label slds-text-color_weak slds-truncate" title="Open Activities">Open Activities:</dt>
            <dd class="slds-dl_horizontal__detail slds-text-color_weak slds-truncate numberStyle" title="Description for second label">{countOpenactivities}</dd>
            <dt class="slds-dl_horizontal__label slds-text-color_weak slds-truncate" title="Date dernière opp">Dernière Opportunité:</dt>
            <dd class="slds-dl_horizontal__detail slds-text-color_weak slds-truncate numberStyle" title="Description for second label">{lastCreatedOpportunityFormated}</dd>
          </dl>
        </div>
      </lightning-tab>

And the error i have while running my test :

Best Answer

I see several issues with you test code:

Your div[data-id=parent-id] query selector in your test returns the parent div and not the dd element you're looking for. You need to change the selector and or the markup to select the right node.
You're not clearing mocks between tests. Add jest.clearAllMocks(); to the afterEach function.

Related Solutions

[SalesForce] way to load every label data and every SObject description data in Lightning Web Component using only Javascript without any Apex

An ES6 module is a JavaScript file that explicitly exports variables or functions that other modules can use. Modules make it easier to structure your code without polluting the global scope.

Everything in LWC which is imported and Exported is a ES6 module.

JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local—it’s scoped to the module.

As this is basically es6 and not just LWC, I tried searching import all from es6.

Surprisingly, there are many results, I tried a solution from most accepted and most voted answer that suggested exporting * first and then importing it in new component.

My code which exports all lables in AllLables module

import { LightningElement } from 'lwc';
export * from '@salesforce/label';


export default class AllLables extends LightningElement {

}

when I try saving it, I get this error:

LWC1507: Exporting * from @salesforce/label is not allowed.

Apparently, even if there is the way in ES6, SF is intentionally blocking it, probably for the same reason it does not allow SELECT * in SOQL

You have to use Apex :(

[SalesForce] Combobox value update is not reflecting in jest test

In the Jest test, you need to explicitly fire the change event. Sample code:

import { createElement } from 'lwc';
import MyComponent from 'c/myComponent';

describe('c-myComponent', () => {
    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 default message', () => {
        // Create element
        const element = createElement('c-MyComponent', {
            is: MyComponent
        });
        document.body.appendChild(element);

        // Verify displayed greeting
        return Promise.resolve().then(() => {
            const outputElement = element.shadowRoot.querySelector('.combobox-output');
            expect(outputElement.textContent).toBe('inProgress');
        });
    });


    it('displays message on selection', () => {
        // Create element
        const element = createElement('c-MyComponent', {
            is: MyComponent
        });
        document.body.appendChild(element);

        // Verify displayed greeting
        return Promise.resolve().then(() => {
            // element.value = "new";

            const combobox = element.shadowRoot.querySelector("lightning-combobox");
            // Explicitly dispatch change event on combobox
            combobox.dispatchEvent(new CustomEvent("change", {
                    detail: {
                        value: "new"
                    }
                }));
            return Promise.resolve().then(() => {

                const outputElement = element.shadowRoot.querySelector('.combobox-output');
                console.log(outputElement.textContent + "=======");
                expect(outputElement.textContent).toBe('new');
            });
        });
    });
});

Best Answer

Related Solutions

[SalesForce] way to load every label data and every SObject description data in Lightning Web Component using only Javascript without any Apex

[SalesForce] Combobox value update is not reflecting in jest test

Related Topic