vue-cli3 karma单元测试的实现


Posted in Javascript onJanuary 18, 2019

Karma

Karma是一个测试工具,能让你的代码在浏览器环境下测试。代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来(比如要做样式的测试),如果你的代码只会运行在node端,那么你不需要用karma。

vue-cli3 结合karma

经过查找搜索到vue-cli-plugin-unit-karma插件, 集成vue-cli3与karma,但是结果不那么完美,执行的时候还是报错。

不过功夫不负有心人,终于找到解决方法,步骤如下

安装依赖

npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha

在package.json层创建karma.conf.js (注意,是conf,不是config!!!)

内容如下

var webpackConfig = require('@vue/cli-service/webpack.config.js')
module.exports = function (config) {
  config.set({
    frameworks: ['mocha'],
    files: [
      'tests/**/*.spec.js'  //tests目录下,所有.spce.js结尾的测试文件
    ],
    preprocessors: {
      '**/*.spec.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    reporters: ['spec'],
    browsers: ['ChromeHeadless']
  })
}

package.json内增加script命令

"test": "karma start"

最后执行 npm run test 即可

参考

Testing Single-File Components with Karma

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
详解vue组件之间的通信
Aug 30 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 #Javascript
如何解决.vue文件url引用文件的问题
Jan 18 #Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
vue.js实现的幻灯片功能示例
Jan 18 #Javascript
vue ssr 实现方式(学习笔记)
Jan 18 #Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 #Javascript
jquery的$().each和$.each的区别
Jan 18 #jQuery
You might like
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
原生js写的放大镜效果
2012/08/22 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
python使用递归解决全排列数字示例
2014/02/11 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python解析树及树的遍历
2016/02/03 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python中生成ndarray实例讲解
2021/02/22 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
工艺工程师岗位职责
2014/03/04 职场文书
《社戏》教学反思
2014/04/15 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
校长四风对照检查材料
2014/09/27 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
运动会宣传稿50字
2015/07/23 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
python urllib库的使用详解
2021/04/13 Python