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"