Vue3+Vite+Vuetify项目Cypress组件测试遇Vuetify实例错误

问题原因 #

你的Vue应用运行正常是因为入口文件（比如main.ts）中已经通过app.use(vuetify)注入了Vuetify实例，但Cypress组件测试是单独挂载单个组件，默认不会自动引入Vuetify上下文，导致组件找不到Vuetify提供的defaults实例。

解决方案 #

方案1：全局配置（推荐，所有测试通用） #

在Cypress的组件支持文件（cypress/support/component.ts）中，自定义cy.mount命令，全局注入Vuetify实例：

// cypress/support/component.ts
import { mount } from 'cypress/vue'
import vuetify from '../../src/plugins/vuetify' // 替换为你项目中Vuetify配置文件的实际路径
import 'vuetify/styles'

// 重写mount命令，自动注入Vuetify
Cypress.Commands.add('mount', (component, options = {}) => {
  options.global = options.global || {}
  options.global.plugins = options.global.plugins || []
  // 加入Vuetify插件
  options.global.plugins.push(vuetify)

  return mount(component, options)
})

配置完成后，你的原测试代码无需修改，直接运行即可。

方案2：单个测试中手动注入 #

如果只需要在特定测试中使用Vuetify，可以在测试文件中手动传入Vuetify插件：

import ProgressCircular from './ProgressCircular.vue'
import vuetify from './path/to/your/vuetify/config' // 替换为实际路径

describe('<ProgressCircular />', () => {
  it('renders', () => {
    cy.mount(ProgressCircular, {
      global: {
        plugins: [vuetify]
      }
    })
  })
})

两种方案的核心都是在Cypress挂载组件时，为Vue实例注入Vuetify插件，和你在应用入口中做的app.use(vuetify)逻辑一致。

内容的提问来源于stack exchange，提问作者Hssan Bouzlima