一、必备插件

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

karma与webpack结合的更多相关文章

  1. Karma 4 - Karma 集成 Webpack 进行单元测试

    可以将 karma 与 webpack 结合起来,自动化整个单元测试过程. 配置环境 1. 首先根据 1 完成基本的 karma 测试环境. 2. 安装 webpack 和 webpack 使用的 l ...

  2. #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)

    目标: 为已有的vue项目搭建 karma+mocha+chai 测试框架 编写组件测试脚本 测试运行通过 抽出共通 一.初始化项目 新建项目文件夹并克隆要测试的已有项目 webAdmin-web 转 ...

  3. Rails 5 Test Prescriptions 第10章 Unit_Testing JavaScript(新工具,learn曲线太陡峭,pass)

    对Js的单元测试是一个大的题目.作者认为Ruby的相关测试工具比Js的测试工具更灵活 大多数Js代码最终是关于响应用户的行为和改变DOM中的元素 没有什么javascript的知识点.前两节用了几个新 ...

  4. [React Unit Testing] React unit testing demo

    import React from 'react' const Release = React.createClass({ render() { const { title, artist, outO ...

  5. [Webpack 2] Use Karma for Unit Testing with Webpack

    When writing tests run by Karma for an application that’s bundled with webpack, it’s easiest to inte ...

  6. 学习Karma+Jasmine+istanbul+webpack自动化单元测试

    学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma?  Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...

  7. #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(二)

    学习对vue组件进行单元测试,先参照官网编写组件和测试脚本. 1.简单的组件 组件无依赖,无props 对于无需导入任何依赖,也没有props的,直接编写测试案例即可. /src/testSrc/si ...

  8. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  9. [笔记]ng2的webpack配置

    欢迎吐槽 前言 angular.cn教程中用的是systemjs加载器,那用webpack应该怎么配置呢?本文 demo: https://github.com/LeventZheng/angular ...

随机推荐

  1. iOS-----写一个规范的单例--->

    1.集成了一个宏 2.两句代码集成单例 3.一句代码调用单例 -------------> 1.集成了一个宏 //这里就要注意了,因为每个单例中,方法名可以不一样,那么我们就不能把名字写死,要灵 ...

  2. WPF入门教程系列十九——ListView示例(一)

    经过前面的学习,今天我做一个比较综合的WPF程序示例,主要包括以下功能: 1) 查询功能.从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,然后展示到WPF的Windo ...

  3. Kafka随笔一

    一.KafKa所涉及到的名词概念: 1.    Topic:用于划分Message的逻辑概念,一个Topic可以分布在多个Broker上. 2.    Partition:是Kafka中横向扩展和一切 ...

  4. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

  5. SSISDB3:Environments 和 Environment Variables

    Environment 是ETL执行时使用的Parameters的集合,可以为一个Project引用不同的Environment variables,从而改变ETL执行的属性. 查看Environme ...

  6. 彻底理解nth-child和nth-of-type的区别。

    最近又有些天没写博客了,主要写一篇下来,太浪费时间了,其实这不是根本,根本是最近比较忙,忙什么呢?最近发现一个问题觉得学习速度太慢了,时间倒是花的很多,但大部分时间都花在无意义的事情上,所有打算改变政 ...

  7. SVN代码冲突解决方案小集合

    对于刚接触svn的人来说,svn冲突后,不能提交是件让人很郁闷的事情.最让人郁闷的事,是代码间的覆盖.你把我代码盖了,我会很火大的.谁把谁的盖了都不爽. 为什么会出现代码冲突问题呢,因为不同的人,同时 ...

  8. Android 之 ProgressDialog用法介绍

    布局文件测试: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi ...

  9. 【原创】开源Math.NET基础数学类库使用(09)相关数论函数使用

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  10. karma单元测试入门

    学习angularjs,都会遇到karma单元测试,可是初学者面对复杂的测试配置往往不知从何入手,下面我们将抛开angularjs,单独使用两个js文件,完成一次测试入门. 0,karma原理