Интеграция Vitest с Quasar

Question

Я пытался интегрировать Vitest с проектом, реализующим Quasar, но мне это не удалось. Основная проблема, с которой я столкнулся при тестировании, заключается в том, что компоненты quasar не отображаются в элементах HTML, поэтому, когда я пытаюсь установить текст для элемента, vitest не идентифицирует его как элемент HTML, и я получаю следующую ошибку:

      Error: wrapper.setValue() cannot be called on Q-INPUT
 ❯ DOMWrapper.setValue node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7417:19
 ❯ src/modules/Auth/LoginView.spec.ts:8:60
      6|   const wrapper = mount(LoginView)
      7|   test('should render correctly', async() => {
      8|     const inputEmail = await wrapper.get('[label="Email"]').setValue('[e-mail]')
       |           

я попробовал и я получил следующее:

      <q-input type="text" filled="" label="Email" placeholder="[e-mail]" lazy-rules="" modelvalue="" rules="(val) => val &amp;&amp; val.length > 0 || &quot;El correo es obligatorio&quot;,(val) => {
  const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/;
  return emailPattern.test(val) || &quot;No es un correo valido&quot;;
}" data-v-5d16ad28=""></q-input>

Как видите, элемент не «преобразовывается» в HTML-тег. Возможна ли интеграция quasar с vitest? Если да, то не могли бы вы сообщить мне, как это должно быть?

ТИА

Answer 1

ОП нашел свой ответ в этом обсуждении GitHub в репозитории Quasar. Я связываю это здесь для будущих странников.

Для тех, кто сталкивается с той же проблемой, я только что заставил ее работать с рекомендацией @yusufkandemir, но с другим подходом, чем тот, который я показал ранее. Я приведу свой код ниже: vite.config.ts:

       import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    environment: 'jsdom'
  },
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    quasar({
      sassVariables: 'src/quasar-variables.sass'
    })
  ],
})

Реализация плагина quasar в тесте:

       import { test, expect, describe } from 'vitest'
import { mount } from '@vue/test-utils'
import { Quasar } from 'quasar'

import HelloWorld from "../components/HelloWorld.vue"

const wrapperFactory = () => mount(HelloWorld, {
  global: {
    plugins: [Quasar]
  },
})

test('mount component', () => {
  expect(HelloWorld).toBeTruthy();
  const wrapper = wrapperFactory();

  console.log(wrapper.html());
})

Теперь, когда он печатает html из оболочки, элементы Quasar отображаются как простые элементы HTML.