How do you click on checkbox group in jest?

Question

I am trying to JEST test a checkbox group that has 1 option and when I do .click() it says can't click null property. Is there a different way I should be hitting it with JEST?

For clarification, the rest of the component does not register as null in JEST, only this checkbox group. I am able to null check everything that would render the checkbox group and it comes back as not null.

HTML

 <lightning-checkbox-group 
         name="stateCheckbox"
         class="jest-example"
         label="Checkbox Group"
         options={options}
         value={value}
         onchange={handleChange}></lightning-checkbox-group>

JavaScript:

handleChange(){
     this.isStateCheckboxClicked = !this.isStatementReadClicked;
}

JEST test example:

const stateCheckbox = testedComponent.shadowRoot.querySelector('.jest-example');
stateCheckbox.click();
return Promise.resolve().then(() => {
expect(stateCheckbox).not.toBe(null);
})

Answer 1

The issue was that need to add data-id to the checkbox group and querySelector the data-id instead of by class. Then instead of .click(); you do:

checkbox.dispatchEvent(new CustomEvent('change', {detail: {label: 'Checkbox Group', value: 'Confirm'}}));

This allows it to check the box, to then uncheck it you do:

checkbox.dispatchEvent(new CustomEvent('change', {detail: {label: '', value: ''}}));