3

MyLighingwebcomponent

<template>
    <lightning-card title="Custom Search Functionality in LWC" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <p>{errorMsg}</p>

        </div>
        <lightning-button label="Search" 
        variant="brand" 
        onclick={handleSearch}></lightning-button>
 </lightning-card>
</template>

Js file

import { LightningElement, track, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class MyNewWebComponent extends LightningElement {

@track errorMsg='';

handleSearch(){

this.errorMsg='errorMessage';
   const event = new ShowToastEvent({
    title:'error',
        variant: 'error',
        message: 'Please enter an account name',
    });
    this.dispatchEvent(event);

}
}

MyLigheningwebcomponent test js file

import { createElement } from 'lwc';
import MyNewWebComponent from 'c/myNewWebComponent';
import { ShowToastEventName } from 'lightning/platformShowToastEvent';




describe('c-myNewWebComponent', () => {
    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('renders the error panel when the Apex method returns an error', () => {

        // Create initial element
        const element = createElement('c-myNewWebComponent', {
            is: MyNewWebComponent
        });
        document.body.appendChild(element);

       const handler = jest.fn();
    // Add event listener to catch toast event
       element.addEventListener(ShowToastEventName, handler);

       const buttonEl = element.shadowRoot.querySelector('lightning-button');
        buttonEl.click();


        const div = element.shadowRoot.querySelector('div');
        return Promise.resolve().then(() => {
        expect(div.textContent).toBe('errorMessage');
        expect(handler).toHaveBeenCalled();
        });
    });


});

There are two expect methods.both should show success.div expectation working fine. But Toast message is not reflected on html recieved stage. Expectation is that, handler is supposed to call 1 time,but recieving 0 times. Not sure what went wrong. In fact this issue is also existed in lighening recipe jest repository as well. Any help is greatly appreciated.

1
  • 1
    If it exists in the recipe repo I'd definitely recommend commenting at the author there. They're generally active on GH/ Twitter and will be happy to help/ explain. Commented Nov 12, 2019 at 11:31

1 Answer 1

3

enter image description here

https://github.com/trailheadapps/lwc-recipes/pull/31/files/08bef0c3da0b620b875ab35140b8cb4095168183#diff-5cb65947ae0b0e7b8586ff96e0f1201e - change history for jest test. https://github.com/trailheadapps/lwc-recipes/pull/31 - thread discussing jest tests.

Looking at some closed issues, it seems they mention this particular line/issue. It says it's closed and shows what you should be doing. I notice some naming differences in your paste:

  1. import {ShowToastEventName} vs. import {ShowToastEvent}
  2. element.addEventListener('lightning__showtoast', handler); vs. element.addEventListener('ShowToastEventName', handler);
1
  • Thanks...I will try over the weekend...
    – Pratap M
    Commented Nov 20, 2019 at 2:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .