最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istanbul代码覆盖率。

据我了解,Nodejs领域: Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm做nodejs的包依赖管理,bower做javascript的包依赖管理。

Karma的介绍

Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行,通过console.log显示测试结果。

Karma的安装

我的开发环境:

  • win7 64bit,
  • node v8.11.2
  • npm 5.6.0

1、全局安装karma、Jasmine-core、Karma-Jasmine

npm install -g karma
npm install -g Jasime-core
npm install -g karma-Jasmine

2、局部局安装karma、Jasmine-core、Karma-Jasmine

npm install --save-dev karma
npm install --save-dev Jasime-core
npm install --save-dev karma-Jasmine

3、测试是否安装成功

karma start

4、Karma + Jasmine配置

karma init

自动化单元测试

1). 创建源文件:用于实现某种业务逻辑的文件,就是我们平时写的js脚本

有一个需求,要实现单词倒写的功能。如:”ABCD” ==> “DCBA”

//src/index.js
function reverse(word){
return word.split("").reverse().join("");
}

2). 创建测试文件:符合jasmineAPI的测试js脚本

//test/test.js
describe("A suite of basic functions", function() {
it("reverse word",function(){
expect("DCBA").toEqual(reverse("ABCD"));
});
});

3). 修改karma.conf.js配置文件

我们这里需要修改:files和exclude变量

files: ['./src/*.js'],
exclude: ['karma.conf.js'],

4). 启动karma

单元测试全自动执行

karma start karma.conf.js

Karma和istanbul代码覆盖率

1、全局安装istanbul依赖karma-coverage

npm install -g karma-coverage

2、局部安装istanbul依赖karma-coverage

npm install --save-dev karma-coverage

3、修改karma.conf.js配置文件

reporters: ['progress','coverage'],

preprocessors : {'src.js': 'coverage'},

coverageReporter: {

​ type : 'html',

​ dir : 'coverage/'

}

4、启动karma start

在工程目录下面找到index.html文件,coverage/chrome/index.html

接下来,我们修改src.js,增加一个if分支

function reverse(word){
if(word=='AAA') return "BBB";
return word.split("").reverse().join("");
}

再看覆盖率报告,下降得有点恐怖

出现的坑

千万记住要先全局安装再局部安装,不然老是报错:jasmine-core模块未找到

原文:搭建Karma+Jasmine的自动化单元测试,欢迎star,欢迎交流。

项目地址KarmaDemo

参考:

Error: Cannot find module 'jasmine-core'

搭建Karma+Jasmine的自动化单元测试的更多相关文章

  1. Karma+Jasmine实现自动化单元测试

    1.Karma介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的名字 ...

  2. 在WebStorm中集成Karma+jasmine进行前端单元测试

    在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...

  3. 前端单元测试环境搭建 Karma Jasmine

    Karma 官网On the AngularJS team, we rely on testing and we always seek better tools to make our life e ...

  4. Karma和Jasmine自动化单元测试

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  5. Karma和Jasmine 自动化单元测试环境搭建

    最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 ...

  6. 学习Karma+Jasmine+istanbul+webpack自动化单元测试

    学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma?  Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...

  7. Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试

    1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...

  8. karma、jasmine做angularjs单元测试

    引用文:karma.jasmine做angularjs单元测试 karma和jasmine介绍 <1>技术介绍 karma karma是Testacular的新名字 karma是用来自动化 ...

  9. 使用karma+jasmine做单元测试

    目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner. ...

随机推荐

  1. vue实现数据双向绑定的原理

    一.知识准备Object.defineProperty( )方法可以直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象.Object.defineProperty(obj,pr ...

  2. 关于FastReport在winform中的使用(包含FastReport.net的安装步骤链接)

    一.FastReport的简介 FastReport是功能齐全的报表控件,使开发者可以快速并高效地为·NET/VCL/COM/ActiveX应用程序添加报表支持. 二.FastReport的安装(推荐 ...

  3. windows应用程序框架及实例

    应用程序框架:同一类型应用程序的结构大致相同,并有很多相同的源代码,因此可以通过一个应用程序框架AFX(Application FrameWorks)编写同一类型应用程序的通用源代码. 主要向导: D ...

  4. BZOJ.2823.[AHOI2012]信号塔(最小圆覆盖 随机增量法)

    BZOJ 洛谷 一个经典的随机增量法,具体可以看这里,只记一下大体流程. 一个定理:如果一个点\(p\)不在点集\(S\)的最小覆盖圆内,那么它一定在\(S\bigcup p\)的最小覆盖圆上. 所以 ...

  5. pymongo使用手册

    MongoDB是由C++语言编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储形式类似JSON对象,它的字段值可以包含其他文档.数组及文档数组,非常灵活.在这一节中,我们就来看 ...

  6. CSS(四)

    css元素溢出 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: 1.visible 默认值.内容不会被 ...

  7. docker修改容器信息,打包等

    https://blog.csdn.net/x6_9x/article/details/72891404

  8. JDK8之The type java.util.Map$Entry cannot be resolved

    eclipse+tomcat7+jdk1.6上面报错的方式我的解法方法是吧jre8换成6的就好了选中项目->右键->java build path ->找到jre system li ...

  9. 使用 JProbe 调试 Linux 内核(转)

    https://liam.page/2018/04/28/debug-in-Linux-kernel-jprobe/

  10. Codeforces 1154 - A/B/C/D/E/F/G - (Undone)

    链接:https://codeforces.com/contest/1154 A - Restoring Three Numbers - [水] #include<bits/stdc++.h&g ...