Testing a Vue Component Using the -ui Element

Question

I have a component that uses the element-ui component.

Tree.vue

<div> <el-tree :data="treeData" :props="config"></el-tree> </div> 

I want to test interactivity with a component (for example, to click one of the el-tree html elements), but when I use the vue-test-utils mount to mount the Tree component, it does not make it a child component, such as shallow instead of the component.

Tree.test.js

 import Vue from 'vue'; import { mount } from 'vue-test-utils'; import Tree from './Tree.vue'; const wrapper = mount(Tree); it('renders element ui tree component', () => { console.log(wrapper.html()); }); 

Outputs:

 <div><el-tree data="[object Object],[object Object]" props="[object Object]"></el-tree></div> 

Any idea how I can fully display the Tree component, including its children?

Answer 1

It looks like you are not importing the el-tree component correctly. Vue does not translate the <el-tree> into a component, but simply processes it as an html element.

Take a look at the quick start item for the different ways to import components and make sure that you have the correct settings.

Add more information if you still have problems.

Answer 2

I had a similar problem when the user interface components were not recognized.

I had to import createLocalVue and ElementUI into a test file

 import { shallow, mount, createLocalVue } from '@vue/test-utils' import Vue from 'vue'; import ElementUI from 'element-ui'; import Editor from '../src/components/layout/Editor' 

and then

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

and then

 describe('Editor', () => { let wrapper beforeEach(() => { wrapper = shallow(Editor, {localVue}, { data : { x: '0', y: '0', } }) }) it('renders a vue instance', () => { expect(wrapper.isVueInstance()).toBe(true); }) 

Answer 3

You must import element-ui into your test file. check this out: https://vue-test-utils.vuejs.org/guides/#applying-global-plugins-and-mixins .

However, I do not know how to import element-ui globally, so I do not need to import it manually in each test file.