1

It seems like when I have the querySelector('') set to "lightning-card" I get an error. I'm not understanding why.

  TypeError: Cannot read property 'getElement' of null

      19 | 
      20 |         let messageEl = element.shadowRoot.querySelector('lightning-card');
    > 21 |         expect(messageEl.getElement('title')).toBe(MESSAGE);
import { createElement } from 'lwc';
import ShowPdfById from 'c/showPdfById';

describe('c-show-pdf-by-id', () => {
    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('Finds PDF or not', () => {
        const MESSAGE = 'No PDF File ID found. Please specify PDF File ID.';
         // Create initial element
        const element = createElement('c-show-pdf-by-id', {
            is: ShowPdfById
        });
        document.body.appendChild(element);

        let messageEl = element.shadowRoot.querySelector('lightning-card');
        expect(messageEl.getElement('title')).toBe(MESSAGE);
    });

    it('displays a custom friendly message', () => {
        const MESSAGE = 'Errors are bad';

        // Create initial element
        const element = createElement('c-show-pdf-by-id', {
            is: ErrorPanel
        });
        element.friendlyMessage = MESSAGE;
        document.body.appendChild(element);

        const messageEl = element.shadowRoot.querySelector('p');
        expect(messageEl.textContent).toBe(MESSAGE);
    });

    it('displays no error details when no errors are passed as parameters', () => {
        // Create initial element
        const element = createElement('c-show-pdf-by-id', {
            is: ErrorPanel
        });
        document.body.appendChild(element);

        const inputEl = element.shadowRoot.querySelector('lightning-input');
        expect(inputEl).toBeNull();
    });

    it('displays error details when errors are passed as parameters', () => {
        const ERROR_MESSAGES_INPUT = [
            { statusText: 'First bad error' },
            { statusText: 'Second bad error' }
        ];
        const ERROR_MESSAGES_OUTPUT = ['First bad error', 'Second bad error'];

        // Create initial element
        const element = createElement('c-show-pdf-by-id', {
            is: ErrorPanel
        });
        element.errors = ERROR_MESSAGES_INPUT;
        document.body.appendChild(element);

        const inputEl = element.shadowRoot.querySelector('lightning-input');
        inputEl.checked = true;
        inputEl.dispatchEvent(new CustomEvent('change'));

        // Return a promise to wait for any asynchronous DOM updates. Jest
        // will automatically wait for the Promise chain to complete before
        // ending the test and fail the test if the promise rejects.
        return Promise.resolve().then(() => {
            const messageTexts = Array.from(
                element.shadowRoot.querySelectorAll('p[class="error-message"]')
            ).map(errorMessage => (errorMessage = errorMessage.textContent));
            expect(messageTexts).toEqual(ERROR_MESSAGES_OUTPUT);
        });
    });
});

<template>
    <template if:false={url}>
        <lightning-card title='No PDF File ID found. Please specify PDF File ID.'>
            
            </lightning-card>
    </template>
    <template if:true={url}>
        <iframe src={url} style={pdfHeight}></iframe>
    </template>
    
</template>

What am I missing?

1

in case anyone needs to refer back to this.

The correct format in this instance is:

 return Promise.resolve().then(()=>{
        expect(lightningCardComponent.title).toBe('Meeting Rooms');
0

In the following code, you are trying to access title (which is an attribute) as an element

expect(messageEl.getElement('title')).toBe(MESSAGE);

Instead, you should be using the following code:

expect(messageEl.getAttribute('title')).toBe(MESSAGE);

The error could also be caused by missing mock for lighting-card. You need to create a mock stub for lightning-card, include it in the appropriate folder (force-app\test\jest-mocks or where ever you prefer) and update the moduleNameMapper in the jest.config.js. If you haven't it yet, then you can refer here on how to do the same.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.