How to load element-plus with Vue3 in cypress component test?

Question

If in Vue2 , we can use the components of ElementPlus like this:

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

But how to use 'element-plus' with Vue3?

---

I try the following code, but no effect.

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
Cypress.Commands.add('mount', (component, options = {}) => {
  // Setup options object
  options.global = options.global || {}
  options.global.components = options.global.components || {}
  options.global.plugins = options.global.plugins || []

  options.global.plugins.push({
    install(app) {
      app.use(ElementPlus)
    },
  })

  return mount(component, options)
})

Answer 1

I have the same question with you but I use your code is work. I just run npx cypress open and config in components.ts

// component.ts
import './commands'
import { mount } from 'cypress/vue'
declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
Cypress.Commands.add('mount', (component, options = {}) => {
  options.global = options.global || {}
  options.global.components = options.global.components || {}
  options.global.plugins = options.global.plugins || []

  options.global.plugins.push({
    install(app) {
      app.use(ElementPlus)
    },
  })

  return mount(component, options)
})