I post my minimal configuration that worked for me at the time of writing for the combination
Vue 3, Vite 4, Vuetify 3, Typescript 4.
It's based on the answers from this page and from other sources I had to investigate to make it work.
The code is based on the default template built with the Vue bootstrap tool, so it has a separate vitest.config.ts
which extends the main vite.config
which doesn't need changes.
The ResizeObserverStub
is needed to resolve ReferenceError: ResizeObserver is not defined
mentioned here: https://github.com/vuetifyjs/vuetify/issues/14749#issuecomment-1481141623.
According to the suggestions from that Github issue, the vite-plugin-vuetify
is not needed, so the solution works without it.
package.json (excerpt)
"dependencies": {
"vue": "^3.2.47",
"vuetify": "^3.1.10"
},
"devDependencies": {
"@vue/test-utils": "^2.3.0",
"vite": "^4.1.4",
"vitest": "^0.29.1",
}
vitest.config.ts
/// <reference types="vitest" />
import { fileURLToPath } from 'node:url'
import { mergeConfig } from 'vite'
import { configDefaults, defineConfig } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
viteConfig,
defineConfig({
test: {
environment: 'jsdom',
exclude: [...configDefaults.exclude, 'e2e/*'],
root: fileURLToPath(new URL('./', import.meta.url)),
deps: {
inline: ["vuetify"]
},
setupFiles: ['./vitest/setup.ts']
}
})
)
vitest/setup.ts
// Fix undefined ResizeObserver error
class ResizeObserverStub {
observe () { }
unobserve () { }
disconnect () { }
}
window.ResizeObserver = window.ResizeObserver || ResizeObserverStub;
HomeView.spec.ts
import { describe, test } from 'vitest'
import { mount } from '@vue/test-utils'
import { createVuetify } from "vuetify"
import * as components from "vuetify/components"
import * as directives from "vuetify/directives"
import HomeView from '@/views/HomeView.vue'
const vuetify = createVuetify({ components, directives })
describe('HomeView', () => {
test('init', async () => {
const view = mount(HomeView, { global: {plugins: [vuetify]} })
console.log(view.html()) // check the Vuetify components are rendered to HTML correctly
// ... test code
})
})