karma与webpack结合

一、必备插件

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运行单元测试即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏草根专栏

使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端

由于手头目前用项目, 所以与前几篇文章不同, 这次要讲的js客户端这部分是通过我刚刚开发的真是项目的代码来讲解的. 这是后端的代码: https://githu...

62250
来自专栏Seebug漏洞平台

使用 XML 内部实体绕过 Chrome 和 IE 的 XSS 过滤器

来源:BypassingXSSFiltersusingXMLInternalEntities 原作者:DavidLitchfield (david@davidl...

415100
来自专栏py+selenium

linux 安装weblogic12.1.3.0步骤

需注意:fmw_12.1.3.0.0_wls.jar     需要jdk1.7.0_15以上的版本

1.5K50
来自专栏智能大石头

NewLife.Net——开始网络编程

网络编程的重要性就不说了,先上源码:https://github.com/nnhy/NewLife.Net.Tests

10200
来自专栏Netkiller

PHP高级编程之守护进程

PHP高级编程之守护进程 http://netkiller.github.io/journal/php.daemon.html 摘要 2014-09-01 发表...

40270
来自专栏bboysoul

如何黑入安卓手机(ezsploit)

安装很简单clone git clone https://github.com/rand0m1ze/ezsploit.git cd ezsploit ch...

16920
来自专栏Android干货

Android项目实战(二十五):Android studio 混淆+打包+验证是否成功

36270
来自专栏我和未来有约会

Silverlight 3.0 中的 Local Connection

现在很多的需求中需要一个插件实例和另一个实例进行通讯。在同一个页面中调用Html、js等来通讯,而这个往往有一些限制,需要专门的去设置一些权限。在Silverl...

22170
来自专栏行者常至

数据库连接池简单连接

模型      -----     Model 视图      -----     View 控制器  -----     Controller

10530
来自专栏野路子程序员

【Laravel5】Auth组件重写密码认证方式为MD5加密

1.4K60

扫码关注云+社区

领取腾讯云代金券