Vue component register warning in unit tests with element-ui

Question

By element-ui documentation, it can be imported "entirely, or just import what you need". I have imported it entirely in application entry point 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}
})

Like that it is possible to use all element-ui components in my custom components. For example I've used button component in Component.vue. That looks fine and button is rendered in 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>

Now I have created test against this component using vue-jest and @vue/test-utils where I am testing is text in the button is rendered correctly. The test passed but I have Vue warning that button component is not registered:

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

This is probably happening because I have imported all element-ui components directly in main.js file (as they propose in documentation) and not in Component.vue. Does anybody know how can I avoid this warning or how can I import component in the test?

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

In your tests, create a local Vue, call .use in it and pass it to 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

Try to import the required module using Vue.use(Module) in your .spec file.

// + Vue.use(ElementUI)

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

You might get an error stating that you cannot import entire module because preventFullImport setting is true. To prevent it, modify your .babelrc or equivalent file and change your settings accordingly. All I did was preventFullImport: false (personally for test cases only).

Answer 3

TESTED

Hello, after many hours of looking I find an another answer, here you dont need to manually set each custom component, as in the first answer.

add a components.js file where you register all of your global vue components:

componentsbind.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)

In jest.config.js add

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

add a setup.js file in test folder

import '../componentsbind.js'

structure

└── 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

and last run! this works for me!

npm run test:unit

for more info: https://github.com/vuejs/vue-test-utils/issues/1116