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?

Answer 1

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