TypeError: Cannot read property 'getElement' of null

Question

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?

Answer 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');

Answer 2

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.