My Vue App uses Quasar plugin. Quasar includes ripple directive, which my component uses.

How can I test v-ripple has been used?

I've been trying this way but it does not work.

import { mount } from '@vue/test-utils'

const vRipple = { beforeMount: () => console.log('Ripple used')}
mount(myComponent, {
  global: { plugins: [], directives: { Ripple: vRipple } }
})

This is my Vitest setup:

import { config } from '@vue/test-utils'
import { Quasar, LocalStorage } from 'quasar'

config.global.plugins = [[Quasar, { plugins: { LocalStorage } }]

This is my Vitest configuration:

import { defineConfig } from 'vite'
import ViteRails from 'vite-plugin-rails'
import { fileURLToPath } from 'node:url'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import jsconfigPaths from 'vite-jsconfig-paths'

export default defineConfig({
  plugins: [
    ViteRails(),
    vue({
      template: { transformAssetUrls }
    }),
    quasar({
      sassVariables: fileURLToPath(
        new URL('/stylesheets/quasar-variables.scss', import.meta.url)
      )
    }),
    jsconfigPaths()
  ]
})

I was suggested to not install Quasar to make the ripple test work. However, most of my tests wouldn't work without Quasar.