解决Vue单元测试的问题
这篇文章主要讲解了解决Vue单元测试的问题,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、做网站、维西网络推广、重庆小程序开发、维西网络营销、维西企业策划、维西品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联建站为所有大学生创业者提供维西建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com
一、写在前面
这篇文章的代码使用karma,mocha,chai,sinon-chai配合Vue的实例属性进行单元测试
二、全局的组件的坑
由于我的g-icon是全局注册的,所以使用g-input组件时的时候g-icon是直接用的,所以测试时有关icon的代码永远是错的。
把g-icon局部注册的组件
三、在测试中触发点击事件
模拟我在app.vue里使用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 = ``; 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 = ``; 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单元测试的问题
路径分享:http://scyanting.com/article/gjpjcc.html