我有一个使用 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
组件,包括它的子组件吗?
最佳答案
我遇到了一个类似的问题,无法识别 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);
})
关于vue.js - 使用 element-ui 组件测试 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48801862/