LWC Toast Event JEST Test Issue

Question

I have a JEST test that tests for the presence of a toast event when an exception occurs from an imperative apex call:

    test('test exception path', () => {

    getStatusList.mockResolvedValue(GET_STATUS_LIST_EXCEPTION);
    
    console.trace = jest.fn();
    //console.log = jest.fn();

    const element = createElement('c-broker-load-status', {is: BrokerLoadStatus});
    element.recordId = '123456789012345678';
    document.body.appendChild(element);

    const handler = jest.fn();
    element.addEventListener('lightning__showtoast', handler);        

    return flushPromises().then(() => {

        const headerArray = element.shadowRoot.querySelectorAll('th');
        expect(headerArray.length).toBe(0);            
        const detailArray = element.shadowRoot.querySelectorAll('td');
        expect(detailArray.length).toBe(0);

        expect(handler).toHaveBeenCalled();
        console.log('Hello:' + Object.keys(handler.mock.calls[0][0]));
        expect(handler.mock.calls[0][0].detail.title).toBe('test');
        expect(handler.mock.calls[0][0].detail.message).toBe('test');
        expect(handler.mock.calls[0][0].detail.variant).toBe('test');            
    });
    
});

This works fine up to the expect(handler_.toHaveBeenCalled(); which is true. OK so far.

However as you can see from the console below the handler.mock.calls[0][0] object just has one property, isTrusted....

npm ERR! A complete log of this run can be found in:

  at Function.LightningUtil [as logError] (force-app/main/default/lwc/lightningUtil/lightningUtil.js:59:9)

console.log
  Hello:isTrusted

  at force-app/main/default/lwc/brokerLoadStatus/__tests__/brokerLoadStatus.test.js:100:13

c-broker-load-status › test exception path

TypeError: Cannot read property 'title' of null

   99 |             expect(handler).toHaveBeenCalled();
  100 |             console.log('Hello:' + Object.keys(handler.mock.calls[0][0]));
> 101 |             expect(handler.mock.calls[0][0].detail.title).toBe('test');
      |             ^
  102 |             expect(handler.mock.calls[0][0].detail.message).toBe('test');
  103 |             expect(handler.mock.calls[0][0].detail.variant).toBe('test');
  104 |         });

  at force-app/main/default/lwc/brokerLoadStatus/__tests__/brokerLoadStatus.test.js:101:13

I am following the repo examples from Salesforce pretty closely. Why is calls[0][0] not showing me the toast event contents?

Thanks for your help!

Answer 1

The default stubs that come from @salesforce/sfdx-lwc-jest don't include a detail field. Source here.

The stubs from the sample repo lwc-recipes override the default stub and include a detail field the tests inspect. You can see the source here:

export const ShowToastEventName = 'lightning__showtoast';

export class ShowToastEvent extends CustomEvent {
    constructor(toast) {
        super(ShowToastEventName, {
            composed: true,
            cancelable: true,
            bubbles: true,
            detail: toast
        });
    }
}

Then the Jest config is updated to point to the new stub using the moduleNameMapper config entry.