vue/test-utils failed to trigger events on quasar q-input

Question

Code sample as below:

vue/test-utils failed to trigger events on quasar q-input. I am trying to write a unit test using vue/test-utils and using quasar framework. What I am thinking to test is "a error message should display after touch input field". here quasar demos. Please guide if I am going in wrong direction.

<!-- registration.vue -->
<q-input
      outlined
      v-model="fullName"
      label="Full Name *"
      lazy-rules
      :rules="[val => !!val || 'Field is required']"
      data-cy="fullName">
</q-input>

// registration.spec.ts

import RegistrationForm from "./registration.vue"
import { Quasar } from "quasar"
import { mount } from "@vue/test-utils"

describe("test registration vue component", () => {
  test("should show error when focus on full name", async () => {
    const wrapper = mount(RegistrationForm, {
      global: {
        plugins: [Quasar],
      },
    })
    const fullName = wrapper.get("[aria-label='Full Name *']")
    fullName.trigger("focus")
    fullName.trigger("blur")
    wrapper.get("[role='alert']")
  })
})

Error

Error: Unable to get [role='alert']

Environment

"quasar": "^2.6.6"
"vue": "^3.2.31"
"vite": "^2.9.1"
"vitest": "^0.8.1"
"@quasar/vite-plugin": "^1.0.9"

Answer 1

try adding 'await' before the trigger methods. Also try adding a value to the input.

fullname.setValue('your value here...')
await  fullName.trigger("focus")
await fullName.trigger("blur")