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

Question

我有一个使用元素-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

在元素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);
})

Answer 2

这看起来好像您没有正确导入el-tree组件。Vue并不是将<el-tree>标记转换为组件，而是将其简单地视为html元素。

查看元素快速开始页，了解导入组件的不同方法，并确保设置正确。

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

Answer 3

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

但是，我不知道如何全局导入元素-ui，所以我不需要在每个测试文件中手动导入它。