Vitest integration with Quasar

Question

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 an HTML element and I get the next error:

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('[email protected]')
       |           

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

<q-input type="text" filled="" label="Email" placeholder="[email protected]" 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>

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

Answer 1

The OP found their answer on this GitHub discussion on Quasar's repository. I am linking it here for future wanderers.

For anyone facing the same issue, I just made it work with @yusufkandemir recommendation but with a different approach than the one I showed before. 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. 💯