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运行单元测试即可。
karma与webpack结合的更多相关文章
- Karma 4 - Karma 集成 Webpack 进行单元测试
可以将 karma 与 webpack 结合起来,自动化整个单元测试过程. 配置环境 1. 首先根据 1 完成基本的 karma 测试环境. 2. 安装 webpack 和 webpack 使用的 l ...
- #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)
目标: 为已有的vue项目搭建 karma+mocha+chai 测试框架 编写组件测试脚本 测试运行通过 抽出共通 一.初始化项目 新建项目文件夹并克隆要测试的已有项目 webAdmin-web 转 ...
- Rails 5 Test Prescriptions 第10章 Unit_Testing JavaScript(新工具,learn曲线太陡峭,pass)
对Js的单元测试是一个大的题目.作者认为Ruby的相关测试工具比Js的测试工具更灵活 大多数Js代码最终是关于响应用户的行为和改变DOM中的元素 没有什么javascript的知识点.前两节用了几个新 ...
- [React Unit Testing] React unit testing demo
import React from 'react' const Release = React.createClass({ render() { const { title, artist, outO ...
- [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 ...
- 学习Karma+Jasmine+istanbul+webpack自动化单元测试
学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma? Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...
- #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(二)
学习对vue组件进行单元测试,先参照官网编写组件和测试脚本. 1.简单的组件 组件无依赖,无props 对于无需导入任何依赖,也没有props的,直接编写测试案例即可. /src/testSrc/si ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- [笔记]ng2的webpack配置
欢迎吐槽 前言 angular.cn教程中用的是systemjs加载器,那用webpack应该怎么配置呢?本文 demo: https://github.com/LeventZheng/angular ...
随机推荐
- PHP面向对象
面向对象 1.类由众多的对象抽象出来的 2.对象 一起皆对象 由类实例化出来的 求两个圆之间阴影的面积 $sr1=10; $sr2=5; $mj=3.14*$sr1*$sr1-3.1 ...
- iOS-----正则表达式
摘要: 正则表达式在字符串检验和查找中用处很广,IOS中也有其支持的类. 正则表达式在iOS开发中的应用 正则表达式在字符串查找,替换,检测中的应用非常广泛,正则表达式是什么,有怎样的语法,可以参考我 ...
- Struts框架
Struts是最早的Java开源框架之一,它是MVC设计模式的一个优秀实现. Struts定义了通用的Controller(控制器),通过配置文件(通常是 Struts -config.xml) Ec ...
- 【最后的抒情】【离NOIP还有9个小时】
学了NOIP 大概十一个月左右,中途的插班生.从2015年12月底开始学信息竞赛,在寒假的时候还笑着我还有九个月才考试呢,生竞就只有两个月了.没错我是从生物竞赛转过来的.记得当初写申请的时候,写的理由 ...
- 传智播客--XAML布局--连连看界面(小白内容)
一个简单的10*10连连看,有100个格子,可以在XAML里面用ColumnDefinition和RowDefinition各写10组,但是这样效率会很慢,因此,可以采用动态生成的方式进行. publ ...
- MySQL 外键
在MySQL中 (1)MySQL 数据表主要支持六种类型 ,分别是:BDB.HEAP.ISAM.MERGE.MYISAM.InnoBDB.这六种又分为两类,一类是”事务安全型”(transaction ...
- 【开源】OSharp3.0框架解说系列(6.2):操作日志与数据日志
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
- 外网访问原理分析 - 每天5分钟玩转 OpenStack(105)
本节我们会将上节创建的 ext_net 连接到 router,并验证内外网的连通性. 更重要的,我们会分析隐藏在表象之下的原理. 将外网连接到 Neutron 的虚拟路由器,这样 instance 才 ...
- 为 Neutron 准备物理基础设施(I) - 每天5分钟玩转 OpenStack(75)
前面讨论了 Neutron 的架构和基础知识,接下来就要通过实验深入学习和实践了. 第一步就是准备实验用的物理环境,考虑如下几个问题: 需要几个节点? 如何分配节点的角色? 节点上部署哪些服务? 配几 ...
- UCOSII内核代码分析
1 UCOSII定义的关键数据结构 OS_EXT INT8U OSIntNesting; OSIntNesting用于判断当前系统是否正处于中断处理例程中. OS_EXT ...