Trigger events on QCheckbox using Jest & Vue Test Utils?

[Jezzta667]

Hi guys,

I recently asked this same question regarding the QDatetime but I thought I would re-ask in the context of the QCheckbox because it SHOULD be more straight forward.

When using Vue Test Utils and Jest, I am not able to use the setChecked() method to set the value of the checkbox, even when I can clearly select the input checkbox in the DOM

<QCheckbox
    v-model="accept"
    @input="updateAccept"
    data-test="checkbox"
/>

it('will check the checkbox and change the value', () => {

    expect(wrapper.vm.accept).toBe(false)
    
    const checkbox = wrapper.find('[data-test="checkbox"]')
    // CONSOLE OUTPUT:
    // wrapper.setChecked() cannot be called on this element

    const checkbox = wrapper.find(QCheckbox)
    // CONSOLE OUTPUT:
    // wrapper.find() must be passed a valid CSS selector, 
    // Vue constructor, or valid find option object

     const checkbox = wrapper.find('input[type="checkbox"]')
    // This finds the checkbox
    
    checkbox.setChecked(true)
    // This has no effect, even on checkbox.element.checked

    checkbox.element.checked = true
    checkbox.trigger('click')
    checkbox.trigger('change')
    // setChecked is supposedly the equivalent of these
    // commands, however these do at least change the value
    // of checkbox.element.checked

    expect(wrapper.vm.accept).toBe(true)
    // FAILS 
  })

Anyway, I really just need someone to explain how to emit the events from Quasar components, if possible.

Cheers

[Jezzta667]

Figured it out by attaching a ‘ref’ attribute which returns the Vue instance of that DOM element (otherwise returns the DOM element if it’s a regular element).

I then emitted the correct event from the vm of the QCheckbox through that.

<QCheckbox
    v-model="accept"
    @input="updateAcceptTerms"
    ref="checkbox"
/>

it('will change and update the value', () => {
    expect(wrapper.vm.accept).toBe(false)

    const checkbox = wrapper.vm.$refs.checkbox
    checkbox.$emit('input', true)

    expect(wrapper.vm.accept).toBe(true) // Passes