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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jQuery对val和atrr("value")赋值的区别介绍
2014/09/26 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
setTimeout学习小结
2017/02/08 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python3安装Pymongo详细步骤
2017/05/26 Python
python如何读写csv数据
2018/03/21 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
人力资源经理自我评价
2014/01/04 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
大学学生个人总结
2015/02/15 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
少先队中队工作总结
2015/08/14 职场文书
六年级语文教学反思
2016/03/03 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
Python中的嵌套循环详情
2022/03/23 Python