jeudi 17 décembre 2020

Jest Testing Error: Cannot set property 'textContent' of null

I have class with the following HTML:

 <template if:true={showModalButton}>
                <button class="right-col-button" variant="base" label={modalButtonLabel} onclick={openModal}></button>
            </template>

below is the JS related to this:

export default class customlwccomponent extends LightningElement {
    @api recordId;
    fileName = null;
    uploadedFileId = null;
    showModalButton = false;
    modalButtonLabel = '';
    showFileName = false;
    uploadedDocId = null;
    errorMessage = null;
    uploadedFileIds = [];
    isModalOpen = false;

    updateDisplayText() {
        console.log('updateDisplayText');
        if (this.uploadedFileIds.length === 0) {
            this.showModalButton = false;
            this.showFileName = false;
            this.fileName = null;
            this.uploadedFileId = null;
        } else if (this.uploadedFileIds.length === 1) {
            this.showModalButton = false;
            this.showFileName = true;
            this.fileName = this.uploadedFileIds[0].Title;
            this.uploadedFileId = this.uploadedFileIds[0].Id;
        } else {
            this.showModalButton = true;
            this.showFileName = false;
        }
        console.log('uploadedFileIds.length='+this.uploadedFileIds.length);
        this.modalButtonLabel = this.uploadedFileIds.length.toString() + ' files uploaded';
    }

    openModal() {
        this.isModalOpen = true;
    }
    closeModal() {
        this.isModalOpen = false;
    }

below is the jest test code that I have written to cover the above component:

test("Validate modal popup", () => {
    const element = createElement("c-custom-component", {
      is: customlwccomponent
    });
    element.contentDocs = data;
    document.body.appendChild(element);

    const text = element.shadowRoot.querySelector("button");
    expect(text.textContent).toBe("1 files uploaded ");
  });
        
    }

Now when I run the above test, I am seeing the following error:

Cannot set property 'textContent' of null

Can anyone please let me know how to resolve this error

Aucun commentaire:

Enregistrer un commentaire