Combobox value update is not reflecting in jest test

Question

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:

Answer 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');
            });
        });
    });
});