vue/test-utils не удалось инициировать события на quasar q-input

Question

Пример кода, как показано ниже:

не удалось инициировать события на квазаре q-input. Я пытаюсь написать модульный тест, используяvue/test-utilsи используя . То, что я думаю проверить, это «сообщение об ошибке должно отображаться после сенсорного поля ввода». quasarздесь квазар деморамки . Пожалуйста, направьте, если я иду в неправильном направлении.

      <!-- 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: Unable to get [role='alert']

Окружающая среда

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

Answer 1

Несмотря на то, что эта тема старая, я надеюсь, что мой ответ может каким-то образом помочь. Я тоже наткнулся на этот вопрос с аналогичной проблемой, пытаясь получить сообщение проверки, когда ввод пуст. Мне не удалось заставить его работать ни с фокусом и размытием, ни даже с пустым значением. Я продолжал пытаться заставить его наконец работать с пустым значением.

Решение @Ryan Grahams помогло мне пройти пройденный тест, с которым мне пришлось бороться. После успешного получения сообщения проверки через ссылки он попытался добиться того же, обратившись к методу validate() самого компонента QInput.

Вместо этого используйтекак плагин я импортировали использовал. дополнительный доступ к методу QInputчерез модель представления.

Я провел рефакторинг вашего кода, чтобы понять, как он может работать.

      // registration.spec.ts

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

describe("test registration vue component", async () => {
  test("should show error when focus on full name", async () => {
    const wrapper = mount(RegistrationForm, {
      global: {
        plugins: [QInput],
      },
    })

    const fullName = wrapper.findComponent(QInput)

    await fullName.setValue("")
    await fullName.vm.validate()

    wrapper.get("[role='alert']")
  })
})

Возможно, это может быть полезно, если нет, поправьте меня :)

Answer 2

попробуйте добавить «ожидание» перед методами триггера. Также попробуйте добавить значение к входу.

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