首页 > 代码库 > karma与webpack结合
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结合
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。