使用 element-ui 组件测试 Vue 组件答案

【问题标题】：Testing a Vue component using element-ui component使用 element-ui 组件测试 Vue 组件
【发布时间】：2018-07-25 21:25:04
【问题描述】：

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

Tree.vue

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

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

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 组件，包括它的子组件吗？

【问题讨论】：

我认为这里的问题是你如何传递treeData 属性 - 我认为它看起来好像在输出中解析错误。
您的Tree.vue 似乎无法识别el-tree 组件。

标签： vue.js element-ui vue-test-utils

【解决方案1】：

我有一个类似的问题，元素 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);
})

【讨论】：

【解决方案2】：

您似乎没有正确导入el-tree 组件。 Vue 不会将 <el-tree> 标签翻译成组件，而是简单地将其视为 html 元素。

查看元素 quick start page 了解导入组件的不同方法，并确保您已正确设置。

如果您仍有问题，请添加更多详细信息。

【讨论】：

【解决方案3】：

您应该在测试文件中导入 element-ui。看看这个：https://vue-test-utils.vuejs.org/guides/#applying-global-plugins-and-mixins。

但是我不知道如何全局导入element-ui，这样就不用在每个测试文件中手动导入了

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。