详解关于Vue单元测试的几个坑


Posted in Javascript onApril 26, 2020

一、写在前面

这篇文章的代码使用karma,mocha,chai,sinon-chai配合Vue的实例属性进行单元测试

二、全局的组件的坑

由于我的g-icon是全局注册的,所以使用g-input组件时的时候g-icon是直接用的,所以测试时有关icon的代码永远是错的。

把g-icon局部注册的组件

三、在测试中触发点击事件

模拟我在app.vue里使用g-input组件

<g-input v-model="message"></g-input>

使用new event 和 dispatch 模拟事件在组件上触发,虽然这个事件和我们实际的事件不一样,但名字一样就够了,测试回调函数自带的参数

it("支持事件", () => {
   ["change", "input", "focus", "blur"].forEach(eventName => {
    vm = new Constructor({}).$mount();
    const callback = sinon.fake();
    vm.$on(eventName, callback);
    let event = new Event(eventName);
    Object.defineProperty(event, "target", {
     value: { value: "hi" },
     enumerable: true
    });
    let inputElement = vm.$el.querySelector("input");
    inputElement.dispatchEvent(event);
    expect(callback).to.have.been.calledWith("hi");
   });
  });

测试这个组件事件触发时,回调的参数,由于自定义事件没有target,我们需要自己写上去

value: { value: "hi" }第一个value是defineProperty的

四、Vue的版本

坑来自于下面一段代码

it("接受gutter", function(done) {
  Vue.component("g-row", Row);
  Vue.component("g-col", Col);
  const div = document.createElement("div");
  document.body.appendChild(div);
  div.innerHTML = `
  <g-row gutter="20"> 
    <g-col></g-col> 
    <g-col></g-col> 
  </g-row>`;
  const vm = new Vue({
   el: div
  });
  setTimeout(() => {
   const row = vm.$el.querySelector(".row");
   expect(getComputedStyle(row).marginRight).to.eq("-10px");
   expect(getComputedStyle(row).marginLeft).to.eq("-10px");
   const cols = vm.$el.querySelectorAll(".col");
   expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
   expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
   done();
   vm.$el.remove();
   vm.$destroy();
  }, 0);
 });

我使用直接在el上写入template代码,所以我默认的import Vue from "vue"(runtimeonly版本)无法编译这个代码,import Vue from "../node_modules/vue/dist/vue.esm.js"使用上面引入即可

在没有template选项是,el不替换

五、异步测试

还是这个代码,先看以下测试两个组件关系

it("接受gutter", function(done) {
  Vue.component("g-row", Row);
  Vue.component("g-col", Col);
  const div = document.createElement("div");
  document.body.appendChild(div);
  div.innerHTML = `
  <g-row gutter="20"> 
    <g-col></g-col> 
    <g-col></g-col> 
  </g-row>`;
  const vm = new Vue({
   el: div
  });
  setTimeout(() => {
   const row = vm.$el.querySelector(".row");
   expect(getComputedStyle(row).marginRight).to.eq("-10px");
   expect(getComputedStyle(row).marginLeft).to.eq("-10px");
   const cols = vm.$el.querySelectorAll(".col");
   expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
   expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
   done();
   vm.$el.remove();
   vm.$destroy();
  }, 0);
 });

先说为什么需要seTimeout

从created和mounted钩子说起,createElement和appendChild在js代码是同步的,两个钩子分别在这两段代码后执行,钩子异步执行的。

由于我们在g-row组件中有mounted钩子,所以我们必须得进行异步检测,否则我们在new Vue之后立马进行测试,钩子还没执行完。

mocha异步测试

mocha默认不执行异步,加入done参数,调用done()就可以

六、垃圾回收

每一个测试完成之后,都要写下面两条代码

vm.$el.remove();
 vm.$destroy();

有两个作用:

  • 销毁在页面中的数据
  • 销毁在内存的数据

虽然js是单线程,但是还有一个dom线程

var div = document. getElementById('xxx')
div.onclick = function() {
  ///code
}
setTimeout(function(){
  div. remove()
}, 3000)

现在我们讨论,什么时候div上的函数被回收

函数被全局变量div上的onlick引用了

div.remove()只是在页面删掉了,没有被内存删掉

var div = document. getElementById('xxx')
div.onclick = function() {
  ///code
}
setTimeout(function(){
  div = mull
}, 3000)

这个函数并没有被删除,函数是写在dom上的,div变量只是引用了dom对象

var div = document. getElementById('xxx')
div.onclick = function() {
  ///code
}
setTimeout(function(){
  var div2 = document. getElementById('xxx')
}, 3000)

div= null和div.remove同时做就可以了,分别从内存和dom上删除了

ie有bug,即使这样都删不了,div.onlick = null 可以

到此这篇关于关于Vue单元测试的几个坑的文章就介绍到这了,更多相关 Vue单元测试 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
微信小程序页面渲染实现方法
Nov 06 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
es6函数之箭头函数用法实例详解
Apr 25 #Javascript
es6数组之扩展运算符操作实例分析
Apr 25 #Javascript
es6函数之尾调用优化实例分析
Apr 25 #Javascript
es6函数之尾递归用法实例分析
Apr 25 #Javascript
javascript 易错知识点实例小结
Apr 25 #Javascript
javascript执行上下文、变量对象实例分析
Apr 25 #Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 #Javascript
You might like
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
解析php中const与define的应用区别
2013/06/18 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
react项目从新建到部署的实现示例
2021/02/19 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Python 实现简单的客户端认证
2020/07/29 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
学校宣传标语
2014/06/18 职场文书
市场营销工作计划书
2014/09/15 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
人力资源部岗位职责
2015/02/11 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
使用Python拟合函数曲线
2022/04/14 Python
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL