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

前面我写了一篇博客是《前端自动化测试工具PhantomJS+CasperJS结合使用教程》其中使用CasperJS不仅可以进行单元测试，还可以进行浏览器测试，是个很不错的工具，今天介绍的工具是Karma+Jasmine+PhantomJS组合的前端javascript单元测试工具。

1.介绍

Karma是由Google团队开发的一套前端测试运行框架，karma会启动一个web服务器，将js源代码和测试脚本放到PhantomJS或者Chrome上执行。

2.安装

• 包管理package.json

npm init

一路回车下去即可
- 在项目中安装karma包

npm i karma --save-dev

• karma初始化

karma init

按照下面的选择好

E:\javascript\auto-test\karma-demo>karma initWhich testing framework do you want to use ?Press tab to list possible options. Enter to move to the next question.> jasmineDo 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.> noDo you want to capture any browsers automatically ?Press tab to list possible options. Enter empty string to move to the next question.> PhantomJS>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.> src/**/*.js> test/**/*.js14 10 2016 10:49:43.958:WARN [init]: There is no file matching this pattern.>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.> yesConfig file generated at "E:\javascript\auto-test\karma-demo\karma.conf.js".

上图是选项的示例，这里使用jasmine测试框架，PhantomJS作为代码运行的环境（也可以选择其他浏览器作为运行环境，比如Chrome，IE等）。最后在项目中生成karma.conf.js文件
- 安装jasmine-core

npm i jasmine-core --save-dev

3.demo1–ES5

目录结构

karma-example    ├──  src         ├──  index.js    ├──  test    ├──  package.json

源码：src–index.js

function isNum(num) {    if (typeof num === 'number') {        return true;    } else {        return false;    }}

测试：test–index.js

describe('index.js: ', function() {  it('isNum() should work fine.', function() {    expect(isNum(1)).toBe(true)    expect(isNum('1')).toBe(false)  })})

运行，执行命令

karma start

命令行结果

14 10 2016 10:56:13.038:WARN [karma]: No captured browser, open http://localhost:9876/14 10 2016 10:56:13.067:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/14 10 2016 10:56:13.101:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency14 10 2016 10:56:13.119:INFO [launcher]: Starting browser PhantomJS14 10 2016 10:56:16.207:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#JoOdYxAeCS4xvhHHAAAA with id 87859111PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 1 of 1 SUCCESS (0.009 secs / 0.004 secs)

4.demo2-ES6

安装使用Webpack+Babel

npm i  karma-webpack --save-devnpm i  babel-loader babel-core babel-preset-es2015 --save-dev

源码src–index2.js

function isNum(num) {  if (typeof num === 'number') {    return true;  } else {    return false;  }}export {isNum};// export default isNum;

测试test–index2.js

import {isNum} from '../src/index2';// import isNum from '../src/index2';describe('index2.js:', () => {  it('isNum() should work fine.', () => {    expect(isNum(1)).toBe(true);    expect(isNum('1')).toBe(false);  });});

修改配置文件karma.conf.js

config.set({        basePath: '',        frameworks: ['jasmine'],        //修改        files: [            // 'src/**/*.js',            'test/**/*.js'        ],        exclude: [],        preprocessors: {            'test/**/*.js': ['webpack', 'coverage'] //新增            //coverage为覆盖率测试，这里不再介绍        },        reporters: ['progress', 'coverage'],        // 新增--覆盖率测试        coverageReporter: {            type: 'html',            dir: 'coverage/'        },        port: 9876,        colors: true，        logLevel: config.LOG_INFO,        autoWatch: true,        browsers: ['PhantomJS'],        singleRun: false,        concurrency: Infinity,        //新增        webpack: {            module: {                loaders: [{                    test: /\.js$/,                    loader: 'babel',                    exclude: /node_modules/,                    query: {                        presets: ['es2015']                    }                }]            }        }    })

参考阅读：
- http://karma-runner.github.io/
- https://github.com/karma-runner/karma
- 前端单元测试之Karma环境搭建