Karma入门

前言：

折腾两天，算是折腾完了，踩了一堆坑，算是过来了，记一下。

本文示例代码：下载。

参考学习文章：Karma入门。

一、Karma介绍：

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

二、安装

nodejs版本：8.9.1

npm版本：5.5.1

1、创建项目目录：

$ mkdir karma-test

$ cd karma-test

$ mkdir test

说明：test文件夹下放测试代码

2、创建初始化package.json

$ npm init

3、安装karma和karma-cli

$ npm install karma --save-dev

$ npm install karma-cli --save-dev

$ karma start

karma地址

karma官方文档

三、配置

运行karma init开启配置向导。

4、配置

$ karma init

命令执行完后会生成一个karma.conf.js配置文件，package.json中也加入两个了karma相关依赖项。

5、安装mocha和karma-mocha

$ npm install mocha --save-dev

$ npm install karma-mocha --save-dev

$ karma start

安装完成后package.json中会加入相应的依赖项，然后运行karma start一切正常。

mocha地址

四、编写测试用例

6、test/hello.js

describe('A spec suite', function(){

it('contains a passing spec', function(){

console.log('Hello Karma');

})

});

$ karma start # 【运行karma】

$ karma run #【命令行运行测试用例】

$ karma run -- --grep 'A spec suite' #【运行特定测试用例】

在test文件夹下建hello.js,test文件夹即为karma init执行配置的代码存放目录。

运行特定测试用例：karma run -- --grep 'A spec suite'，第一个‘--’表示后面的选项--grep 'A spec suite'是传递给测试框架的选项，这里指mocha。

五、测试ES6转换

7、安装babel

$ npm install karma-babel-preprocessor --save-dev

$ npm install babel-preset-env --save-dev

$ npm install babel-core --save-dev

test/es6.js

describe('ES6 spec', function(){

it('es6 arrows feature', function(){

let add = (x, y) => x + y;

console.log(add(1, 2));

})

})

创建 .babelrc,配置转换格式：

{"presets": ["env"]}

修改karma.conf.js,编辑preprocessors部分,让所有的js文件都先用babel转换一下。

preprocessors: {"test/*.js": ['babel']},

六、集成webpack

测试用例，引入第三方库lodash

8、test/use_lodash.js

import _ from 'lodash';

describe('Use lodash suite', function () {

it('fill array', function () {

let array = [1, 2, 3];

_.fill(array, 'a');

console.log(array);

})

})