Vuetify 3 + Vitest单元测试配置求助：注入缺失报错

一、修复Vuetify注入警告 #

Vue Test Utils移除createLocalVue后，需在测试中手动初始化Vuetify并挂载到测试实例：

1. 测试文件中创建Vuetify实例，挂载组件时传入global.plugins：

import { mount } from '@vue/test-utils'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import YourComponent from './YourComponent.vue'

// 创建Vuetify实例
const vuetify = createVuetify({
  components,
  directives,
})

// 挂载组件时注入Vuetify
const wrapper = mount(YourComponent, {
  global: {
    plugins: [vuetify],
  },
})

2. 若仍存在display注入警告，手动提供Vuetify内部依赖的注入项：

import { mount } from '@vue/test-utils'
import { createVuetify, Vuetify } from 'vuetify'
import YourComponent from './YourComponent.vue'

const vuetify = createVuetify()

const wrapper = mount(YourComponent, {
  global: {
    plugins: [vuetify],
    provide: {
      'vuetify:display': new Vuetify().display,
    },
  },
})

二、修复invoicePagination.total读取错误 #

该错误因组件依赖的invoicePagination未正确初始化导致，根据传递方式处理：

1. 若invoicePagination是组件props，挂载时直接传入模拟数据：

const wrapper = mount(YourComponent, {
  global: {
    plugins: [vuetify],
  },
  props: {
    invoicePagination: {
      total: 0,
      current_page: 1,
      per_page: 10
      // 补充组件需要的其他分页属性
    },
  },
})

2. 若通过Inertia的$page传递，模拟全局$page对象：

const wrapper = mount(YourComponent, {
  global: {
    plugins: [vuetify],
    mocks: {
      $page: {
        props: {
          invoicePagination: { total: 0 }
        },
      },
    },
  },
})

三、Vitest全局配置示例（vitest.config.js） #

确保Vitest正确解析Vuetify和Vue文件：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true })
  ],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./tests/setup.js'] // 可选：全局测试前置文件
  },
})

四、全局测试前置文件（setup.js，可选） #

避免重复初始化Vuetify，创建全局配置文件：

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { config } from '@vue/test-utils'

const vuetify = createVuetify({
  components,
  directives,
})

// 全局注入Vuetify
config.global.plugins.push(vuetify)

内容的提问来源于stack exchange，提问作者Daniel Haven