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')
})
})
From a granularity perspective, component testing sits somewhere above unit testing and can be considered a form of integration testing. Much of your Vue Application should be covered by a component test and we recommend that each Vue component has its own spec file.
The idea of 'mounting' means the loading of an individual component to be able to test it. There are two methods for this in Vue Test Utils: Since our focus is on testing an individual component (the Header component), we'll use shallowMount ().
Vue Test Utils is the official library for unit testing Vue components. The vue-cli webpack template comes with either Karma or Jest, both well supported test runners, and there are some guides in the Vue Test Utils documentation.
Automated testing allows large teams of developers to maintain complex codebases. Vue Test Utils is the official library for unit testing Vue components. The vue-cli webpack template comes with either Karma or Jest, both well supported test runners, and there are some guides in the Vue Test Utils documentation.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With