前端测试环境Karma简介

转载 2015年11月19日 11:29:20

转:http://www.wonsikin.com/2014/11/26/%E5%89%8D%E7%AB%AF%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83Karma%E7%AE%80%E4%BB%8B/

在开发软件的过程中,进行单元测试是非常不错的工作,也是有必要的工作。它帮助你觉得你的代码是无懈可击的,确保产品的可靠性。作为一名追求进步的的前端码农,学习前端的测试很有必要。

###Karma简介
Karma是由Angular团队创造的JavaScript测试运行器,实际上,它更是一个测试环境,它让你更方便的运行测试,在不知不觉中监听着源码或者测试代码的改变,然后自动执行测试。

在前端测试上,传统时代的测试方法是在js脚本中写上几个console或者alert语句,然后刷新浏览器,查看打印或者弹出的信息。再后来,有了火狐的firebug和Chrome DevTools,js的测试进入了打断点的时代。然而,使用Chrome DevTools也是需要刷新浏览器,然后手动的点击跳步等操作。以上两个时代,前端的测试预期说是测试,不如说是调试,因为此时的测试是代码混着调试语句,在网页应用中(浏览器上)运行。Karma改变了前端测试的工作流程,它让开发者在开发过程中只需关注编写测试用例,编写实现方法等,而无需花费太多精力在无关代码的工作上。

###Karma安装
Karma运行在Node.js上,你可以从NPM包里面获取到。

假设你已经安装了Node.js,按照官方推荐的方法,你可以如下安装Karma以及相关的插件:

# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher --save-dev

以上命令将会在你的当前目录下的node_modules下安装karmakarma-jasminekarma-chrome-launcher。并且将开发依赖包保存进package.json,方便项目的其他开发人员只需在该目录下运行npm install就能够安装所有的开发依赖包。

# Run Karma:
$ ./node_modules/karma/bin/karma start

以上的命令是运行Karma,但是每次都打这么长的命令很费劲啊,所以,你可以如下安装karma-cli,并配置到全局中:

$ npm install -g karma-cli

成功之后,只需运行karma start就能启动Karma测试了。

###Karma配置

但是启动之前有个很重要的步骤--配置Karma的测试环境。运行karma init可以生成配置文件:

$ karma init my.conf.js

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
> Safari
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> *.js
> test/*Spec.js
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

Config file generated at "/path/to/your/project/my.conf.js".

配置文件的详细语法和选项说明请参考Karma官网的configuration file docs

###Karma运行

当启动Karma的时候,配置文件的路径会作为第一个参数传递过去。默认地,Karma会在当前目录下查找karma.conf.js或者karma.conf.coffee。但是你也可以指定配置文件启动Karma,例如,启动上一步骤生成的my.conf.js配置文件:

# Start Karma using your configuration:
$ karma start my.conf.js

###第一个测试
在当前目录下创建一个test目录,然后新建一个js文件,命名为testSpec.js

|--module
|--test
  |--testSpec.js
|--my.conf.js

testSpec.js中以下内容:

/**
* Created by ArthurWANG on 14/11/26.
*/
describe('hello world', function () {
  it('should contains world', function () {
    expect('Hello world').toContain('world');
  });
});

上面测试用例用的是Jasmine语法。Jasmine是一个专为JavaScript代码测试的行为驱动开发框架。它不依赖其它的JavaScript框架,不需要DOM。并且它有一个整洁明朗,一目了然的语法,让你能够简单地写测试用例。详细说明与语法介绍请戳此

打开my.conf.js,修改files配置如下:

// list of files / patterns to load in the browser
files: [
  'test/*Spec.js'
],

启动Karma测试环境:

启动成功启动成功
开启你的Karma测试之旅!

karma+webpack搭建vue单元测试环境

最近做了一次关于vue组件自动化测试的分享,现在将vue组件单元测试环境搭建过程整理一下。这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境。 准备 这篇文章的重点在于搭建测试...

angular+karma+bower搭建自动化测试环境

angular+karma+bower搭建自动化测试环境目录angularkarmabower搭建自动化测试环境 目录 express创建项目 bower bower的安装 Git bower的使用 ...

前端单元测试之Karma环境搭建

https://segmentfault.com/a/1190000006895064 前言 在前端开发中,测试常常是被忽略的一环。因此最近在研究前端自动化测试框架Karma,把个人的学习过程分享出来...

前端自动化测试环境搭建

YUI TEST + SELENIUM + HUDSON = 前端自动化测试 一、安装包准备 1.yuitest_1.0.0b2.zip (http://yui.zenfs.com/rel...

前端项目本地测试环境搭建

2016.7.25入职跟谁学做前端,第一个周基本是在搭建环境。为了在本地测试,需要搭建本地服务器,然后将项目下载到指定文件夹中,再使用npm下载依赖包,最后就可以在项目的文件夹中开启服务器,然后在浏览...

ShowSlow+Yslow页面前端性能测试环境搭建

----//工具介绍 Yslow:YSlow是Yahoo发布的一款基于FireFox的插件。 YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。 Sh...

Python 基础爬虫简介(测试环境为 Python 2.7)

1、什么是爬虫?爬虫是一种自动访问互联网,并提取数据的一个程序。归根结底,所谓爬虫,不过是我们用Python语言编写的一个小程序而已。 针对的问题:有些网页需要我们登陆后才能访问,而有些网页则不需要。...

前端单元测试工具-karma

前言 前端开发过程中,往往容易忽略测试的重要性。最近发现了一个非常好用的前端自动化测试和代码覆盖率统计的框架Karma,给大家分享一下。 Karma简介 Karma是由Google团队开发的前端测试框...

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

使用的工具/框架 webstorm 这个做前端的童鞋们应该都比较熟悉了吧,jetBrain出品的IDE神器,做Web开发、Node.js开发都可以。功能十分强大,我们今天的测试框架就是要与...

前端自动化测试工具--使用karma进行javascript单元测试

前面我写了一篇博客是《前端自动化测试工具PhantomJS+CasperJS结合使用教程》其中使用CasperJS不仅可以进行单元测试,还可以进行浏览器测试,是个很不错的工具,今天介绍的工具是Karm...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端测试环境Karma简介
举报原因:
原因补充:

(最多只允许输入30个字)