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 RadioButtonList获取选中值
Apr 09 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 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
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python中单例模式总结
2018/02/20 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Python实现时间序列可视化的方法
2019/08/06 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
python lambda的使用详解
2021/02/26 Python
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
医药大学生求职简历的自我评价
2013/10/17 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
python解析json数据
2022/04/29 Python
Python实现简单得递归下降Parser
2022/05/02 Python