Cypress Vue组件测试时如何封装带v-app外层的挂载函数？

错误原因 #

你封装代码时直接使用的<v-app>component</v-app>属于Vue JSX语法，Cypress组件测试的默认webpack/vite配置没有包含Vue JSX的转译loader，因此会抛出loader缺失的错误，和你项目本身的vue loader是否正常无关。

解决方案（无需额外配置loader） #

方案1：使用Vue渲染函数封装通用mount方法 #

完全避开JSX语法，改用Vue原生h渲染函数实现组件外层包裹v-app的逻辑：

import { mount as cypressMount } from '@cypress/vue'
import { h } from 'vue'
import vuetify from '../../resources/js/vuetify'
// Vuetify 2/3的VApp导入路径略有差异，根据你的项目版本调整
import { VApp } from 'vuetify/components'
// 若为Vuetify 2，导入路径为 import VApp from 'vuetify/lib/components/VApp'

export function mount(component, options = {}) {
  // 用渲染函数嵌套v-app和待测组件
  const wrappedComponent = h(VApp, null, {
    default: () => h(component, options.props || {})
  })
  // 合并vuetify配置和自定义参数
  return cypressMount(wrappedComponent, {
    vuetify,
    ...options
  })
}

封装完成后测试用例可直接调用该方法，不需要每次传入vuetify：

import DebuggingTemporaryComponent from "./DebuggingTemporaryComponent";
// 导入你封装后的mount方法
import { mount } from '你的封装文件路径'

it('mounts the component with vuetify', () => {
  mount(DebuggingTemporaryComponent)
  cy.contains('Hello World').should('be.visible')
})

方案2：全局注入v-app根容器 #

直接在Cypress组件测试的全局支持文件中预先挂载v-app容器，不需要修改单测的挂载逻辑：

1. 打开cypress/support/component.js文件，添加如下代码：

import { createApp } from 'vue'
import vuetify from '../../resources/js/vuetify'
import { VApp } from 'vuetify/components'
// 全局导入Vuetify样式，若项目已全局导入可省略
import 'vuetify/dist/vuetify.min.css'

beforeEach(() => {
  // 清空原有测试根节点
  const oldRoot = document.querySelector('[data-cy-root]')
  if (oldRoot) oldRoot.remove()
  // 创建新的根节点并挂载v-app
  const root = document.createElement('div')
  root.setAttribute('data-cy-root', '')
  document.body.appendChild(root)
  createApp(VApp).use(vuetify).mount(root)
})

2. 原有测试用例不需要修改，运行时Vuetify样式会自动生效。

额外注意事项 #

如果是Vuetify 3项目，需要确保Cypress配置中已经正确处理了Vuetify的按需导入规则，避免组件样式丢失。

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