一、必备插件

1.babel：es6的语法支持

2.karma：测试框架

3.jasmine：断言框架

4.webpack:打包工具

5.karma-webpack：karma调用webpack打包接口的插件

二、实现步骤

1.通过npm安装上述必备的插件包

2.创建webpack.test.config.js文件，此文件的配置用于单元测试

var path = require('path');var webpack = require('webpack');module.exports={    module:{        loaders:[{            test:/\.js$/,            loader:'babel',            query:{                presets:['es2015']            },            exclude:[               path.resolve( __dirname, '../test' ), path.resolve( __dirname, '../node_modules' )            ]        }]    }};

注意：

1.此配置参数中没有entry、output两个节点的配置，打包的输入和输出karma会指定

3. 通过karma init命令创建karma.conf.js配置文件

此文件创建好之后，手动添加对webpack.test.config.js文件的引用，且需要增加如下节点：

1.webpack：设置webpack相关配置参数，也就是导入的webpack.test.config.js的对象

2.webpackMiddleware：设置webpack-dev-middleware（实现webpack的打包，但可以控制输入和输出）插件的相关参数

3.preprocessors：增加对webpack引用。

var webpackConfig = require('./webpack.test.config');module.exports = function(config) {  config.set({    // base path that will be used to resolve all patterns (eg. files, exclude)    basePath: '',    // frameworks to use    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter    frameworks: ['jasmine'],    // list of files / patterns to load in the browser    files: [        '../test/index.js'    ],    // list of files to exclude    exclude: [    ],    // preprocess matching files before serving them to the browser    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor    preprocessors: {      '../test/index.js':['webpack']    },    // test results reporter to use    // possible values: 'dots', 'progress'    // available reporters: https://npmjs.org/browse/keyword/karma-reporter    reporters: ['progress'],    // web server port    port: 9876,    // enable / disable colors in the output (reporters and logs)    colors: true,    // level of logging    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG    logLevel: config.LOG_INFO,    // enable / disable watching file and executing tests whenever any file changes    autoWatch: true,    // start these browsers    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher    browsers: ['Chrome'],    // Continuous Integration mode    // if true, Karma captures browsers, runs the tests and exits    singleRun: false,    // Concurrency level    // how many browser should be started simultaneous    concurrency: Infinity,    webpack: webpackConfig,    webpackMiddleware:{      noInfo:false    }  })}

 

注意：配置的files与preprocessors节点都是指向单元测试的入口文件(test/index.js)

4.创建需要测试的源码与单元测试文件

1.src/cache/index.js：cache模块导出接口，本次只导出的memoryCache.js，代码如下：

export { default as MemoryCache } from './memoryCache';

2.src/cache/memoryCache.js：实现缓存数据的操作，也是需要单元测试的类，代码如下：

export default class MemoryCache extends abCache{    constructor( limit ){        super( limit );        this._map = [];    }}var p = MemoryCache.prototype;p.push = function(key, item){    var entry = {        key: key,        value: item    };    this._map.push(entry);};p.get = function(key,ruturnEntry){    for(let item of this._map){        if(item.key == key){            return ruturnEntry ? item.value : item;        }    }    return null;};p.remove = function(key){    for(let index in this._map){        if(this._map[index].key == key){            this._map.splice(index,1);            return;        }    }}

 

3.test/cache/memoryCacheTest.js：单元测试用例类

var _memory = require('../../src/cache/index.js').MemoryCache;describe('memoryCache test',function(){    var _memeoryCache;    _memeoryCache = new _memory();    beforeEach(function(){ //每运行一个it时，之前执行    });    it('push',function(){        var foo = {"name":"foo.Name"};        _memeoryCache.push("foo",foo);        var _destFoo = _memeoryCache.get('foo',true);        expect(_destFoo).toBe(foo);    });    it('get', function(){       expect(_memeoryCache.get('foo',true)).not.toBeNull();    });    it('remove',function(){        _memeoryCache.remove('foo');        expect(_memeoryCache.get('foo')).toBeNull();    });});

 

4.test/index.js：单元测试的入口文件

require('./cache/memoryCahceTest.js');

 

 

5. karma start运行单元测试即可。