Validate method breaking jest test

Question

The validate method checks whether or not the elements are valid before dispatching an event. When i remove the validity check method from my code and run the test it passes so its something with that method. Ive tried mocking it, but it doesnt work either.

Here is the method that gets called when you click submit

dispatchNext() 
{
    if (validate([...this.template.querySelectorAll('.input')])) {
        this.dispatchEvent(new CustomEvent("showconsent", {
            detail: {
                formData: this._formData,
                requestData: this._requestData
            },
        }));
    }
}

Here is the validate method, its being imported from another lwc that is in my project

export function validate(elements)
{
    const allValid = elements.reduce((validSoFar, inputCmp) => {
        inputCmp.reportValidity();
        return validSoFar && inputCmp.checkValidity();
    }, true);

    return allValid
}

when this is run in the browser it works as expected.

All im trying to do in my test is verify that the event dispatched because i do know that the stubs for lightning-combobox and lightning-input have undefined for validity.

it('should allow me to continue if validate returns true', async () => {
        const parent = document.querySelector('c-about-yourself');
        let whoAreYou = parent.shadowRoot.querySelector('[data-name="reportedPersonType"]');
        let firstName = parent.shadowRoot.querySelector('[data-name="firstName"]');
        let lastName = parent.shadowRoot.querySelector('[data-name="lastName"]');
        let email = parent.shadowRoot.querySelector('[data-name="email"]');
        let phone = parent.shadowRoot.querySelector('[data-name="phone"]');
        whoAreYou.value = 'Insured';
        whoAreYou.dispatchEvent(new Event('change'));
        await Promise.resolve();
        
        firstName.value = 'Michael';
        firstName.dispatchEvent(new Event('change'));
        await Promise.resolve();
        
        lastName.value = 'Cheeseee';
        lastName.dispatchEvent(new Event('change'));
        await Promise.resolve();
        
        email.value = '[email protected]';
        email.dispatchEvent(new Event('change'));
        await Promise.resolve();
        
        phone.value = '(000) 000-0000';
        phone.dispatchEvent(new Event('change'));
        await Promise.resolve();

        const mockEventListener = jest.fn()
        parent.addEventListener('showconsent', mockEventListener);

        const submitButton = parent.shadowRoot.querySelector('.yesButton');
        submitButton.dispatchEvent(new Event('click'));
        await Promise.resolve();

        expect(mockEventListener).toHaveBeenCalled()
    })

my expect is failing with this.

    Expected number of calls: >= 1
    Received number of calls:    0

Answer 1

It makes sense to ignore validity checks, if they target standard HTML element validations. If a validity check is something custom made, I would put the function into a separate module and write a direct unit test for it - which can trivially call functions in separate modules.

If you agree, add this to your test to make sure checkValidity() is always true:

[...parent.shadowRoot.querySelectorAll('.input')].forEach(e => {
    e.checkValidity = jest.fn().mockReturnValue(true);
});

showconsent should be fired now.