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 файл

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

}
}

Тестовый js-файл MyLigheningwebcomponent

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();
        });
    });


});

Есть два метода ожидания. Оба должны показать, что ожидание успеха.div работает нормально. Но сообщение Toast не отражается на этапе получения html. Ожидается, что обработчик должен вызывать 1 раз, но получать 0 раз. Не уверен, что пошло не так. На самом деле эта проблема также существовала в хранилище шуток с рецептами осветления. Любая помощь приветствуется.

1
user533 4 Ноя 2019 в 04:17
1
Если он существует в репозитории рецептов, я определенно рекомендую комментировать там автора. Как правило, они активны в GH/Twitter и будут рады помочь/объяснить.
 – 
Dan Wareing
12 Ноя 2019 в 14:31

1 ответ

enter image description here

https://github. recipes/pull/31/files/08bef0c3da0b620b875ab35140b8cb4095168183#diff-5cb65947ae0b0e7b8586ff96e0f1201e — изменить историю для шуточного теста. https://github.com/trailheadapps/lwc-recipes/pull/31 - ветка, обсуждающая шуточные тесты.

Глядя на некоторые закрытые проблемы, кажется, что они упоминают эту конкретную строку/проблему. Он говорит, что он закрыт, и показывает, что вы должны делать. Я заметил некоторые различия в именах в вашей пасте:

  1. импорт {ShowToastEventName} по сравнению с импортом {ShowToastEvent}
  2. element.addEventListener('lightning__showtoast', обработчик); vs. element.addEventListener('ShowToastEventName', обработчик);
1
Kris Goncalves 12 Ноя 2019 в 22:22
Спасибо... Попробую на выходных...
 – 
user533
20 Ноя 2019 в 05:48