Vitest integration with Quasar

[DanielParra05]

Hello,
I have been trying to integrate Vitest with a project that implements Quasar but I have not succeed doing so. The main problem that I am facing when testing is that quasar components are not rendering in HTML elements, so when I try to set a text on an element vitest does not identify it as a HTML element and I get the next error:

I tried a console.log(wrapper.get('[label="Email"]').html()) and I got the follow:

As you can see the element is not being "transformed" to an HTML tag. Is it possible an integration of quasar with vitest? If it is, could you please let me know how it should be ?

TIA

[Demivan]

Do you have Vite plugin for Quasar installed? Looks like quasar components fail to resolve. Automatic component import is handled by Vite plugin. https://quasar.dev/start/vite-plugin
And I do not recommend using mount as you inadvertently will be testing internals of Quasar. For example your snapshots could fail as Quasar changes its internals. Use shallowMount instead.

[DanielParra05]

I already have the vite plug-in for quasar installed. One problem I was having was that I was missing to implement the quasar plug in in vue-test-utils so that the wrapper would recognize the quasar elements. I did it, but now I have this problem

[DanielParra05]

For anyone facing the same issue, I just made it work, I was missing the Quasar plugin injection when mounting the component. I'll let my code below:
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'
    })
  ],
})

Implementation of quasar plugin in test:

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());
})

Now, when it prints the html from the wrapper, Quasar elements are being shown as simple HTML elements. 💯