unit-testing - Vue 组件在使用 element-ui 的单元测试中注册警告

Question

通过element-ui文档，可以“全部导入，或者只导入你需要的”。我已将其完全导入到应用程序入口点 main.js 中。

主要.js

import Vue from 'vue'
import ElementUI from 'element-
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

const Component = () => import(/* webpackChunkName: "component" */ './views/Component.vue')

// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  components: {Component}
})

这样就可以在我的自定义组件中使用所有 element-ui 组件。例如我用过 button Component.vue 中的组件。这看起来不错，按钮在 App.vue 中呈现。

组件.vue

<template>
  <div>
    <el-button>{{ buttonText }}</el-button>
  </div>
</template>

<script>
  export default {
    name: 'component',

    data () {
      return {
        buttonText: 'Button Text'
      }
    },

    components: {}
  }
</script>

现在我已经使用 vue-jest 和 @vue/test-utils 针对这个组件创建了测试，我正在测试按钮中的文本是否正确呈现。测试通过，但 Vue 警告按钮组件未注册:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

这可能是因为我已将所有 element-ui 组件直接导入到 main.js 文件中(正如他们在文档中建议的那样)，而不是导入到 Component.vue 中。有谁知道如何避免此警告或如何在测试中导入组件？

组件.spec.js

import { shallow } from '@vue/test-utils'
import Component from '../Component.vue'

describe('Component.vue', () => {
  test('sanity test', () => {
    expect(true).toBe(true)
  })

  test('renders button title', () => {
    const wrapper = shallow(Component)
    wrapper.setData({buttonText: 'This is text'})
    expect(wrapper.text()).toEqual('This is text')
  })
})

Answer 1

在您的测试中，创建一个本地 Vue，在其中调用 .use 并将其传递给 shallow:

import { shallow , createLocalVue} from '@vue/test-utils';   // changed
import Vue from 'vue';                                       // added
import ElementUI from 'element-ui';                          // added
import Component from '../Component.vue'

const localVue = createLocalVue();                           // added
localVue.use(ElementUI);                                     // added

describe('Component.vue', () => {
  test('sanity test', () => {
    expect(true).toBe(true)
  })

  test('renders button title', () => {
    const wrapper = shallow(Component, {localVue})           // changed