Karma+Jasmine+istanbul+webpack自动化单元测试

本文介绍了如何配置并使用Karma、Jasmine、istanbul和webpack进行自动化单元测试,包括Karma、Jasmine、istanbul和webpack的基本介绍,以及详细配置和测试过程。通过一个简单的add函数测试示例,展示了如何实现代码覆盖率检查。
摘要由CSDN通过智能技术生成

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工程,开始新生上路

  1. 创建一个文件test-demo
  2. 进入test-demo,在当前文件夹里打开命令行,输入npm init -y;
    image

  3. 自动生成package.json文件。
    image

ps: 我的环境:nodejs v8.2.1 npm v5.3.0

安装相关依赖

安装Karma

npm install karma -g

并且还有安装项目中使用

npm install karma  --save-dev

需要全局安装,可以使用命令行。
安装完成以后,命令行输入 karma start
image

在浏览器输入http://localhost:9876/
image

如果出现以上信息,表示karma已经安装成功。

Karma配置

初始化karma配置文件karma.conf.js

ctrl+c 结束刚才启动的Karma

在命令行输入karma init

image

接下就是一段询问关于配置的问题。(ps:karma.conf.js配置可以自己修改,这里是快速生成配置)
1. Which testing framework do you want to use ?(你想要使用哪个测试框架?)
默认是jasmine。(如果你想用其他可以自己修改),直接回车下一步

  1. 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) ,直接回车下一步

  2. Do you want to capture any browsers automatically ? &

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值