Jest test lightning-record-edit-form on submit event with preventDefault

Question

I would like to add a simple jest test to my lightning web component in order to test the functionality of the following on submit event handler.

handleSubmit(event) {
    event.preventDefault();
    const fields = event.detail.fields;
    fields.Some_field__c = 'Some value';
    this.template.querySelector('lightning-record-edit-form').submit(fields);
}

It seems to me that I should be able to test that Some_field__c has been appropriately updated. The handle submit will fire in the jest test, but I can't find any documentation on how to read the subsequently resubmitted fields.

Answer 1

You need to mock the form submit function

//Need to submit the form and verify that the record was submitted successfully
const form = element.shadowRoot.querySelector('lightning-record-edit-form');

//Mocks the submit function for lightning-record-edit-form
form.submit = jest.fn();

//Submit EVENT gets dispatched, which triggers a handler function that will call the submit FUNCTION
form.dispatchEvent(new CustomEvent('submit', {detail:{fields:{}}}));

//Checking that the submit FUNCTION was called with the correct rating value(4)
expect(form.submit).toHaveBeenCalledWith(EXPECTED_SUBMIT_VALUE);