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')
  })
})

acdcjunior · Accepted Answer · 2018-04-10 02:43:14Z

15

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

answered Apr 10, 2018 at 2:43

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rjbaj · Accepted Answer · 2018-04-09 05:23:07Z

5

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

edited Apr 9, 2018 at 5:23

answered Apr 9, 2018 at 5:17

rjbaj

3237 silver badges17 bronze badges

2 Comments

Diego Armando Maradona Over a year ago

Thanks, that helps. Now I have imported entirely ElementUI in .spec file and there is no more warning, but it is not possible to use ElementUI components in the test. For example if I want to test am I using 3 <el-button> components in Component.vue file, my test should be something like: expect(wrapper.findAll(ElButton)).toEqual(3) But in the .spec file ElButton is not defined. Do you know how it can be imported from ElementUI?

rjbaj Over a year ago

If importing that component directly from node_elements didn't help then you could try with Vue.use(ElementUI, { components: { _componentA_, _componentB_ } }). I cant seem to point out why you wouldn't be able to see a defined object if you have already imported it.

Non404 · Accepted Answer · 2021-01-20 14:24:12Z

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

Collectives™ on Stack Overflow

Vue component register warning in unit tests with element-ui

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related