Testing a Vue component using element-ui component

Question

I have a component that is using an element-ui component.

Tree.vue

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

I want to test the interactivity with the component (for example, to be able to click on one of the el-tree html elements), but when I'm using vue-test-utils mount to mount the Tree component, it doesn't render it's children component, like it shallowing the component instead.

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 can I fully render the Tree component, including it's children?

I think the problem here is how do You pass `treeData` property - I think it looks like it's somehow parsed wrong in the output. — lukaszkups, Feb 19 '18 at 10:10
It seems like your `Tree.vue` unable to recognize the `el-tree` component. — whbb, Mar 27 '18 at 05:27

score 6 · Answer 1 · answered May 10 '18 at 17:41

I had a similar problem where element ui components were not recognized.

Had to import createLocalVue and ElementUI in the 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);
})

score 0 · Answer 2 · answered Apr 01 '18 at 01:51

This looks like you're not importing the el-tree component properly. Vue is not translating the <el-tree> tag into a component, and is simply treating it as an html element instead.

Have a look at the element quick start page for different ways to import the components and make sure you've got things set up correctly.

Add some more details if you still have problems.

score 0 · Answer 3 · answered Apr 18 '19 at 09:23

0

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

however, I don't know how to import element-ui globally, so that I don't need to import it manually in every test file

answered Apr 18 '19 at 09:23

fatbin

91
3

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Rot-man Apr 18 '19 at 09:28

Testing a Vue component using element-ui component

3 Answers3