如何在Cypress组件测试中为Vue3引入Element-Plus？

在 Vue2 的 Cypress 组件测试中，我们通常这样配置 ElementUI：

// cypress/component.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

但切换到 Vue3 + Element-Plus 时，直接照搬类似写法可能会失效。你尝试的代码问题在于对 options.global.plugins 的用法理解有误，正确的配置方式如下：

// cypress/support/component.js
import { mount } from 'cypress/vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

Cypress.Commands.add('mount', (component, options = {}) => {
  // 初始化全局配置对象
  options.global = options.global || {}
  options.global.plugins = options.global.plugins || []
  
  // 直接将 ElementPlus 插件加入到 plugins 数组，无需额外包装
  options.global.plugins.push(ElementPlus)

  return mount(component, options)
})

关键说明 #

Vue3 的 Cypress 组件测试中，options.global.plugins 可以直接接收符合 Vue3 插件规范的对象，ElementPlus 本身就满足这个要求，不需要再手动包装成带有 install 方法的对象。

另外要确保你的项目已经正确安装了 element-plus 依赖，并且 Cypress 版本支持 Vue3 组件测试（建议使用 Cypress 10+ 版本）。

内容的提问来源于stack exchange，提问作者秦小琳