karma与webpack结合
时间:2022-04-22
本文章向大家介绍karma与webpack结合,主要内容包括一、必备插件、二、实现步骤、2.创建webpack.test.config.js文件,此文件的配置用于单元测试、3. 通过karma init命令创建karma.conf.js配置文件、4.创建需要测试的源码与单元测试文件、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
一、必备插件
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运行单元测试即可。
- 微软.NET Core RC2正式发布,横跨所有平台
- 二帮主:央行数字货币的崛起,会给比特币带来什么影响
- cas原理介绍
- 结合Jexus + Kestrel 部署 asp.net core 生产环境
- C#全角和半角转换
- 浅谈Scala在大数据处理方面的优势
- 利用mybatis-generator自动生成代码
- 微信年终放大招!小程序再次升级,这个功能超想要!
- WordPress 中禁止文章自动保存和修订版本的方法
- 第一届机器人学习大会总结
- Hadoop: MapReduce2的几个基本示例
- 使用 nRoute 框架来实现基于 Silverlight 的桌面应用
- oracle:如何用sql生成日历
- 极品双拼“马仔”mazai.com易主终端
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Lua语言-入门语法
- Redis 三种启动方式
- OpenWRT结合tinc组自己的SDLAN
- 通过Cloudflare API更新DNS记录
- Vedastr:基于PyTorch的场景文本识别工具箱
- vue-element-admin项目关闭eslint校验
- 搞了半天,终于弄懂了TCP Socket数据的接收和发送,太难~
- 每天一个小技巧:CSS clip-path 的妙用 Clip Path分类Clippy
- 20 个值得学习的 Vue 开源项目
- 小白入门WEB前端编程,必看知识点!核心干货
- 新网站 Robots 和 SiteMap 优化
- Java代理IP池 ( Proxy Pool ) - 改进版
- Lvs+Keepalived 保障HA高可用
- 基于前端JS导出Excel文件(减轻服务端压力)
- 本机IDEA远程调试远端服务器代码