vue.js - 使用 element-ui 组件测试 Vue 组件

Question

我有一个使用 element-ui 的组件成分。

Tree.vue

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

我想测试与组件的交互性(例如，能够单击 el-tree html 元素之一)，但是当我使用 vue- test-utils mount 挂载 Tree 组件，它不会渲染它的子组件，就像它 shallow 组件一样相反。

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

输出:

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

知道如何完全渲染 Tree 组件，包括它的子组件吗？

Answer 1

我遇到了一个类似的问题，无法识别 element ui 组件。

必须在测试文件中导入 createLocalVue 和 ElementUI

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

然后

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

然后

describe('Editor', () => {
 let wrapper
 beforeEach(() => {
  wrapper = shallow(Editor, {localVue}, {
    data : {
      x: '0',
      y: '0',
    }
  })
})

it('renders a vue instance', () => {
  expect(wrapper.isVueInstance()).toBe(true);
})