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

    it('will check the checkbox and change the value', () => {
        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
        // This has no effect, even on checkbox.element.checked
        checkbox.element.checked = true
        // setChecked is supposedly the equivalent of these
        // commands, however these do at least change the value
        // of checkbox.element.checked
        // FAILS 

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


  • 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.

    it('will change and update the value', () => {
        const checkbox = wrapper.vm.$refs.checkbox
        checkbox.$emit('input', true)
        expect(wrapper.vm.accept).toBe(true) // Passes

Log in to reply