使用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组件吗？

- Guy

---

我认为这里的问题是如何传递 treeData 属性 - 我认为它在输出中被某种方式解析错误。 - lukaszkups

似乎你的 Tree.vue 无法识别 el-tree 组件。 - whbb

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

- Adi

Answer 2

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

然而，我不知道如何全局导入element-ui，以便我不需要在每个测试文件中手动导入它。

- fatbin

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。仅有链接的答案如果链接页面发生更改可能会变得无效。 - RtmY

Answer 3

看起来你没有正确地导入el-tree组件。Vue没有将<el-tree>标签转换为组件，而是将其视为HTML元素。

查看快速入门页面以了解导入组件的不同方法，并确保已正确设置。

如果仍然有问题，请添加更多细节。

- Jordan Shurmer