[BUG] - Vitest support?

[frisch-raphael]

Checks

• [X] I have searched the existing issues for a similar bug and it does not exist!

Environment

• Operating System: Windows_NT
• Node Version: v16.15.0
• Nuxt Version: 3.3.2
• Nitro Version: 2.3.2
• Package Manager: yarn@1.22.15
• Builder: vite
• User Config: modules, pinia, imports, quasar, vite, css, config, runtimeConfig, components
• Runtime Modules: @pinia/nuxt, nuxt-quasar-ui@1.6.0
• Build Modules: -

Quasar version

2.11.10

Browsers

Other

Description

First of all thanks a lot for your work. Sorry if that's not the right place to ask, as it is not really a bug, but is vitest testing supported for quasar components? I've been trying for a few hours to integrate vitest but to no avail yet. I tried several things, from using installQuasarPlugin() as per this documentation https://github.com/quasarframework/quasar-testing/tree/dev/packages/unit-vitest

Also tried to follow the answer on this stackoverflow post : https://stackoverflow.com/questions/71486252/vitest-integration-with-quasar

But I figured it works differently since it's not Quasar per see we're using.

import { DataIds } from '~~/tests/data-ids'
import { mount, VueWrapper } from '@vue/test-utils'
import { selector } from '~~/tests/test-utils'
import TileCard from '~~/components/layout/resource/TileCard.vue'
import { mockEngagements } from '~~/dtos/engagement.mock'
import { engagementColumns } from '~~/components/layout/engagement/table/engagement-table-columns'
// import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest'
// installQuasarPlugin()
let wrapper: VueWrapper<any>
describe('the TileCard', () => {
  beforeEach(() => {
    wrapper = mount(TileCard, {
      props: {
        resource: mockEngagements[0],
        columns: engagementColumns
      }
    })
  })

  test('checkbox works', () => {
    const html = wrapper.html()
    console.debug(html) 
// <q-card bordered="" flat="" class="">
//    <q-card-section>
//     <q-checkbox dense="" modelvalue="false" data-id="resource-tile-card-checkbox"></q-checkbox>
//    </q-card-section>
//    <q-separator></q-separator>
//    <q-list dense="">
// ...
//  ^---------- i'm not getting the full html of the quasar components
  })
})

Any direction I should go ?

Reproduction steps

1. Install Vitest
2. Try to test a component that contains quasar components

Screenshots

Here's what I get when I try to use installQuasarPlugin() at the top of the file.

Logs

No response

[Maiquu]

I suggest you checkout nuxt-vitest if you are trying to test components in nuxt environment.

[Maiquu]

Will keep the issue open until I can provide a example.