Question

通过element-ui文档，它可以“完全导入，或者只导入你需要的东西”。我已经完全在应用程序入口点main.js中导入了它。

main.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组件一样。例如，我在Component.vue中使用了button组件。看起来很好，按钮在App.vue中呈现。

Component.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警告]：未知的自定义元素： - 你注册了吗？组件正确吗？对于递归组件，请务必提供 “名称”选项。

这可能正在发生，因为我已经在main.js文件中直接导入了所有element-ui组件（正如他们在文档中提出的那样），而不是在Component.vue中。有谁知道如何避免此警告或如何在测试中导入组件？

Component.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

Answer 2

尝试使用 .spec 文件中的Vue.use(Module)导入所需的模块。

// + Vue.use(ElementUI)

describe('Component.vue', () => {
  ...
})

由于preventFullImport设置为true，您可能会收到错误消息，指出您无法导入整个模块。要防止这种情况发生，请修改您的.babelrc或同等文件，并相应更改您的设置。我所做的只是preventFullImport: false（仅针对测试用例）。

Answer 3

已测试

您好，经过几个小时的查找，我找到了另一个答案，在这里您不需要像第一个答案那样手动设置每个自定义组件。

添加一个 components.js 文件，您可以在其中注册所有全局 vue 组件：

componentsbind.js

select * from data
where data.colB like '%words[0]%' or data.colB like '%words[1]%'...etc

在 jest.config.js 中添加

import Vue from 'vue'
//this are the components I want to import
import MyHeader from '@/components/MyHeader'
import MyNav from '@/components/MyNav'
Vue.component('MyHeader', MyHeader)
Vue.component('MyNav', MyNav)

在 test 文件夹中添加 setup.js 文件

modules.exports = {
moduleNameMapper:{
    "~(.*)$": "<rootDir>/resources/js/$1",
},
setupFilesAfterEnv: ['<rootDir>resources/src/tests/setup.js']
}

结构

import '../componentsbind.js'

最后一次运行！这对我有用！

└── src
    ├── assets
    ├── components
    └── tests
       └─ unit
          └─ example.spec.js
       └─ setup.js
    └── etc
└──index.js //here in my case I register all of my global vue components
└──componentsbind.js //that is why I put my components.js file in this place

了解更多信息： https://github.com/vuejs/vue-test-utils/issues/1116

使用element-ui进行单元测试中的Vue组件寄存器警告

3 个答案: