How to test Vue ripple directive has been used?

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

How can I test v-ripple has been used?

<template>
  <q-item v-ripple>...</q-item>
</template>

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.