JEST Test FrameWork not able to put assertion on the basis of HTML tag

Question

I need to put an assertion on the basis of HTML title in my JEST test Please find the code as below:

import {createElement} from 'lwc';
import MeetingRooms from 'c/meetingRooms';


describe( 'c-meetingRooms', () => {

    afterEach( () => {
        while(document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    })

    it('count number of meeting room component', () =>{
        const meetingRooms = createElement('c-meetingRooms', {is:MeetingRooms} );

        document.body.appendChild(meetingRooms);

        const allMeetingRoomComponent = meetingRooms.shadowRoot.querySelectorAll('c-meeting-room');

        expect(allMeetingRoomComponent.length).toBe(7);
    });

    it('check the title of lightning-card', () =>{
        const meetingRooms = createElement('c-meetingRooms', {is:MeetingRooms} );

        document.body.appendChild(meetingRooms);

        const lightningCardComponent = meetingRooms.shadowRoot.querySelector('lightning-card');

        expect(lightningCardComponent.getAttribute("title")).toBe('Meeting Rooms');
    });

});

error i am facing:

expect(received).toBe(expected) // Object.is equality

    Expected: "Meeting Rooms"
    Received: null

      26 |         const lightningCardComponent = meetingRooms.shadowRoot.querySelector('lightning-card');
      27 | 
    > 28 |         expect(lightningCardComponent.getAttribute("title")).toBe('Meeting Rooms');
         |         ^
      29 |     });
      30 | 
      31 | 

      at Object.<anonymous> (force-app/main/default/lwc/meetingRooms/__test__/meetingRooms.test.js:28:9)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total

It will be great help if anyone can help me find a way to access the HTML attributes in the JEST test.

Thanks

Answer 1

You need to do something like:

const titledElement = lightningCardComponent.shadowRoot.querySelector(some selector to find the DOM element in your shadow DOM on which the title is set);
expect(titledElement.getAttribute("title")).toBe("Meeting Rooms");

Exactly what your "some selector" is depends on your component's template structure. If it is like:

<template>
    <div title="Meeting Rooms">
        ...
    </div>
</template>

then your selector can just select that top-level div using just "div" (this will be the first div it finds). Check the documentation for details as to just what to put here.