Trigger events on QCheckbox using Jest & Vue Test Utils?



  • 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



  • 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