vue-cli3.x下的vue-test-utils 初始搭建

2019-10-10 admin

初次接触单元测试,通过vue-test-utils的官方推荐配置发现一堆问题,按官方的配置来看是vue-cli2.x版本的,这里记录下cli3.x版本下的初步搭建过程

技术栈

karma+mocha+chai+@vue/test-utils ( vue-cli3.x版本下 )

首次搭建

创建项目时没有选择开启单元测试,单元测试为后续手动添加

单元测试相关的依赖列表:

首次配置的依赖

然后按照搬了官方的测试用例,在测试用例中发现IDE提示在从chai中引入expect时报错

再次添加依赖

虽然前面已经添加了karma-chai,但既然报错那就再添加下chai吧。

添加chai依赖.jpg

继续看到IDE提示’describe’以及’it’ is not defined

继续配置

这里需要在eslintrc.js的env中添加mocha

添加mocha.jpg

运行后报错,Cannot find module ‘./webpack.config.js’

最后修改

由于用vue-cli3.x创建的项目根目录不再有webpack.config.js,所以需要修改karma.conf.js中引入webpack.config.js的路径

修改前.jpg

改为

修改后.jpg

再次运行,总算成功了。

总结

虽然在vue-cli3.x下单元测试成功运行了,但这次仅尝试了karma+mocha+chai的方式,测试用例也非常基础,并且怀疑某些依赖属于重复安装,例如karma-chai和chai,应该能够通过改写配置进行优化。

希望带佬们能对上述中有问题的地方提出改进意见,这里统一感谢。

转载请注明出处。

[转载]原文链接:https://segmentfault.com/a/1190000020635877

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77017.html

文章标题:vue-cli3.x下的vue-test-utils 初始搭建

相关文章
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
回到顶部