Karma+Jasmine+istanbul+webpack自动化单元测试
前言
一直用别人配置好的东西,经常看别人写教程来写简单的单元测试,闲来无事自己也来撸个配置玩玩。说干就干,从开始到运行成功差不多5个小时。遇到各种问题,主要是各种模块的配置版本问题。
简单介绍一下要用到东西是什么
Karma的介绍
Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字,表示佛教中的缘分,因果报应,比Cassandra这种名字更让人猜不透!
Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行,通过console.log显示测试结果。
Jasmine的介绍
Jasmine是单元测试框架,我将用Karma让Jasmine测试自动化完成。jasmine提出行为驱动【BDD(Behavior Driven Development)】,测试先行理念,Jasmine的官网
istanbul的介绍
istanbul是一个单元测试代码覆盖率检查工具,可以很直观地告诉我们,单元测试对代码的控制程度。(ps:这个玩意浪费我好久时间,后面详细说怎么配置)
webpack的介绍
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。(引用webpack中文网介绍)
构建Test工程,开始新生上路
- 创建一个文件test-demo
进入test-demo,在当前文件夹里打开命令行,输入
npm init -y
;
自动生成package.json文件。
ps: 我的环境:nodejs v8.2.1 npm v5.3.0
安装相关依赖
安装Karma
npm install karma -g
并且还有安装项目中使用
npm install karma --save-dev
需要全局安装,可以使用命令行。
安装完成以后,命令行输入karma start
在浏览器输入http://localhost:9876/
如果出现以上信息,表示karma
已经安装成功。
Karma配置
初始化karma配置文件karma.conf.js
ctrl+c 结束刚才启动的Karma
在命令行输入karma init
接下就是一段询问关于配置的问题。(ps:karma.conf.js配置可以自己修改,这里是快速生成配置)
1. Which testing framework do you want to use ?(你想要使用哪个测试框架?)
默认是jasmine。(如果你想用其他可以自己修改),直接回车下一步
Do you want to use Require.js ? (你要使用Require.js吗?)
This will add Require.js plugin. (这将添加Require.js插件。)
Press tab to list possible options. Enter to move to the next question. (按选项卡列出可能的选项。 输入转到下一个问题。)
默认是no。(现在都在使用webpack打包,这也是为什么你肯定奇怪的地方,单元测试为什么要用webpack) ,直接回车下一步Do you want to capture any browsers automatically ? &