vue + element-ui 单元测试出错。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue + element-ui 单元测试出错。相关的知识,希望对你有一定的参考价值。

参考技术A vue + element-ui 当多个页面使用el-select时,使用单元测试测试所有页面时,出现错误。

环境;vue:v2.5.1,element-ui:v2.7.0,karma:1.4.1, mocha:3.2.0

修改vue和element-ui版本无效;修改单元测试插件,使用 @vue/cli-plugin-unit-mocha无效。

ERROR LOG: '[Vue warn]: Error in callback for watcher "options": "TypeError: undefined is not an object (evaluating 'this.$el.querySelectorAll')";

ERROR LOG: '[Vue warn]: Error in directive clickoutside update hook: "TypeError: Attempted to assign to readonly property."

ERROR LOG: '[Vue warn]: Error in created hook: "TypeError: undefined is not an object (evaluating 'el._transitionClasses')"

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

【中文标题】使用 element-ui 组件测试 Vue 组件【英文标题】:Testing a Vue component using element-ui component 【发布时间】: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 组件。 【参考方案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 不会将 &lt;el-tree&gt; 标签翻译成组件,而是简单地将其视为 html 元素。

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

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

【讨论】:

【参考方案3】:

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

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

【讨论】:

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

以上是关于vue + element-ui 单元测试出错。的主要内容,如果未能解决你的问题,请参考以下文章

第1129期对vue.js单文件(.vue)进行单元测试

使用 element-ui 和 vue-test-utils 模拟选择

Vue Element-UI 中列表单选的实现

vue+element-ui 实现table单元格点击编辑,并且按上下左右键单元格之间切换

vue2.0+element-ui(01简单点的单页面)

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