已全局引入ElementUI的Vue项目单元测试组件注册警告问题

我之前也碰到过一模一样的问题！核心原因是单元测试环境里的Vue实例是独立创建的，并没有继承你在main.js中做的全局ElementUI注册，所以测试时识别不了Element组件，就会抛出注册警告。下面给你几个实用的解决方案：

方案一：在单个测试文件中手动注册ElementUI #

如果只是个别组件的测试需要处理，直接在对应的.spec.js文件开头注册ElementUI即可：

import Vue from 'vue'
import ElementUI from 'element-ui'
import YourComponent from '@/views/Component.vue'

// 全局注册ElementUI
Vue.use(ElementUI)

describe('YourComponent.vue', () => {
  // 你的测试逻辑
})

方案二：配置全局测试前置文件（推荐） #

要是项目里很多组件都要用到ElementUI，一个个文件加太麻烦，你可以配置一个全局的测试初始化文件，让所有测试自动加载ElementUI：

1. 在tests/unit目录下新建setup.js文件，内容如下：

import Vue from 'vue'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

2. 找到你的测试配置文件（比如Jest的jest.config.js），添加setup文件的引用：

module.exports = {
  // 其他配置...
  setupFiles: ['./tests/unit/setup.js']
}

这样所有测试文件运行前都会自动注册ElementUI，不用重复写代码。

方案三：在组件挂载时局部注册（适合按需测试） #

如果你用的是@vue/test-utils，也可以在挂载组件的时候，通过global.plugins参数单独注册ElementUI，这样不会污染全局Vue实例：

import { mount } from '@vue/test-utils'
import ElementUI from 'element-ui'
import YourComponent from '@/views/Component.vue'

describe('YourComponent.vue', () => {
  it('renders correctly', () => {
    const wrapper = mount(YourComponent, {
      global: {
        plugins: [ElementUI]
      }
    })
    // 断言逻辑
  })
})

选一个适合你项目的方案就行，我自己用的是方案二，一次配置终身省心～

内容的提问来源于stack exchange，提问作者Diego Armando Maradona