Test LightningCombobox in jest

Question

Im having a lot of trouble trying to read the options coming from a combobox when i select it. Ive tried

• to move the options to a @track variable
• making the call for the options just simply return the array and not call a method from another component.

When component_name.options is called i get [].

The stub for ligtning-combobox shows that there is a api variable called options but when i call it, it is []. Any ideas?

whoAreYouOptions is an array coming from the parent. and is tagged as api. Also, getClaimantTypes is a export method in a component i use for utils.

Jest test

test('get selected who are you dropdown', async () => {
    const contactDetails = document.querySelector('c-contact-details');
    contactDetails.whoAreYouOptions = ['Person'];
    await Promise.resolve()
    const personType = contactDetails.shadowRoot.querySelector('lightning-combobox[data-name="personType"]')
    console.log(personType.options)
    expect(contactDetails.options.length).toBe(3)
})

Html

<lightning-layout-item size="12" small-device-size="12" medium-device-size="12" large-device-size="12"
                padding="around-small">
                <lightning-combobox name="personType" label="Who are you?" options={personTypes}
                    onchange={debounceChangeEvent} value={formData.personType} class="input" data-name="personType"></lightning-combobox>
            </lightning-layout-item>

Javascript

get personTypes()
    {
        let types = getClaimantTypes()
        return types.filter(each => !this.whoAreYouOptions.includes(each.label))
    }

test output

console.log
    []

Answer 1

From what I can tell, these are the culprits:

console.log(personType.options)
expect(contactDetails.options.length).toBe(3)

As such, console.log won't output anything. I generally suggest not to work with console in the context of Jest and use breakpoints instead. One should however get something not empty-arrayish, if one does

console.log(JSON.stringify(personType.options))

Just in case you insist.

As for the expect, - don't you want to retrieve personType.options?!