1

I have created a basic lwc component that displays a Combobox(base component) and shows the selected value below it. When I'm trying to test the combobox selection in jest, even after updating the value property the value is not updated in view.

Here is my sample code

myComponent.html

<template>
    <lightning-card>
        <lightning-combobox name="progress" label="Status" value={value} placeholder="Select Progress" options={options}
            onchange={handleChange}></lightning-combobox>
        <p class="combobox-output">{value}</p>
    </lightning-card>
</template>

myComponent.js

import { LightningElement, track } from 'lwc';

export default class MyComponent extends LightningElement {
    @track value = 'inProgress';

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

    handleChange(event) {
        this.value = event.detail.value;
    }
}

mycomponent.test.js

import { createElement } from 'lwc';
import MyComponent from 'c/myComponent';

describe('c-MyComponent', () => {
    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('displays default message', () => {
        // Create element
        const element = createElement('c-MyComponent', {
            is: MyComponent
        });
        document.body.appendChild(element);

        // Verify displayed greeting
        return Promise.resolve().then(() => {
            const outputElement = element.shadowRoot.querySelector('.combobox-output');
            expect(outputElement.textContent).toBe('inProgress');
        });
    });


    it('displays message on selection', () => {
        // Create element
        const element = createElement('c-MyComponent', {
            is: MyComponent
        });
        document.body.appendChild(element);

        // Verify displayed greeting
        return Promise.resolve().then(() => {
            element.value = "new";
            return Promise.resolve().then(() => {

                const outputElement = element.shadowRoot.querySelector('.combobox-output');
                console.log(outputElement.textContent + "=======");
                expect(outputElement.textContent).toBe('new');
            });
        });
    });
});

The second jest test is failing for some strange reason: enter image description here

1

In the Jest test, you need to explicitly fire the change event. Sample code:

import { createElement } from 'lwc';
import MyComponent from 'c/myComponent';

describe('c-myComponent', () => {
    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('displays default message', () => {
        // Create element
        const element = createElement('c-MyComponent', {
            is: MyComponent
        });
        document.body.appendChild(element);

        // Verify displayed greeting
        return Promise.resolve().then(() => {
            const outputElement = element.shadowRoot.querySelector('.combobox-output');
            expect(outputElement.textContent).toBe('inProgress');
        });
    });


    it('displays message on selection', () => {
        // Create element
        const element = createElement('c-MyComponent', {
            is: MyComponent
        });
        document.body.appendChild(element);

        // Verify displayed greeting
        return Promise.resolve().then(() => {
            // element.value = "new";

            const combobox = element.shadowRoot.querySelector("lightning-combobox");
            // Explicitly dispatch change event on combobox
            combobox.dispatchEvent(new CustomEvent("change", {
                    detail: {
                        value: "new"
                    }
                }));
            return Promise.resolve().then(() => {

                const outputElement = element.shadowRoot.querySelector('.combobox-output');
                console.log(outputElement.textContent + "=======");
                expect(outputElement.textContent).toBe('new');
            });
        });
    });
});
| improve this answer | |
  • Thanks, it works! – swati Mar 14 at 4:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.