Combination of karma and Webpack

First, the necessary plug-in

Syntax support for 1.BABEL:ES6

2.karma: Test Framework

3.jasmine: Assertion Framework

4.webpack: Packaging Tools

5.karma-webpack:karma calling the plug-in for Webpack packaging interface

Second, the implementation of step 1. Install the required plug-in packages above with NPM 2. Create a webpack.test.config.js file that is configured for unit testing

var path = require (' path '); var webpack = require (' Webpack '); Module.exports={    module:{        loaders:[{            test: /\.js$/,            loader:' Babel ',            query:{                presets:[' es2015 ']            },            exclude:[               '. /test '), Path.resolve (__dirname, ' ... /node_modules ' )            ]}        ]}    ;

Attention:

1. This configuration parameter does not have a configuration of entry, output two nodes, and the packaged input and output karma will specify

3. Create a karma.conf.js profile from the Karma init command

After this file is created, manually add a reference to the Webpack.test.config.js file and you need to add the following node:

1.webpack: Set webpack related configuration parameters, that is, the imported Webpack.test.config.js object

2.webpackMiddleware: Set Webpack-dev-middleware (implement Webpack packaging, but can control input and output) plug-in related parameters

3.preprocessors: Add reference to Webpack.

varWebpackconfig = require ('./webpack.test.config ')); Module.exports=function(config) {config.set ({//base path that would be used to resolve all patterns (eg. files, exclude)BasePath: ",    //Frameworks to use    //available Frameworks:https://npmjs.org/browse/keyword/karma-adapterFrameworks: [' Jasmine '],    //List of files/patterns to load in the browserfiles: [‘.. /test/index.js '    ],    //list of files to excludeexclude: [],//preprocess matching files before serving them to the browser    //available Preprocessors:https://npmjs.org/browse/keyword/karma-preprocessorpreprocessors: {‘.. /test/index.js ': [' Webpack ']    },    //test results reporter to use    //possible values: ' dots ', ' progress '    //available Reporters:https://npmjs.org/browse/keyword/karma-reporterReporters: [' Progress '],    //Web server Portport:9876,    //enable/disable colors in the output (reporters and logs)Colorstrue,    //Level of logging    //possible values:config. log_disable | | Config. Log_error | | Config. Log_warn | | Config. Log_info | | Config. Log_debugLoglevel:config. Log_info,//enable/disable watching file and executing tests whenever any file changesAutowatch:true,    //start these browsers    //Available Browser Launchers:https://npmjs.org/browse/keyword/karma-launcherBrowsers: [' Chrome '],    //Continuous Integration Mode    //if True, Karma captures browsers, runs the tests and exitsSinglerun:false,    //Concurrency Level    //How many browser should is started simultaneousconcurrency:infinity, Webpack:webpackconfig, webpackmiddleware:{noinfo:false    }  })}

Note: Both the files and Preprocessors nodes that are configured are entry files that point to Unit tests (test/index.js)

4. Create the source code and unit test files that need to be tested

1.src/cache/index.js:cache module Export interface, this time only exported memorycache.js, the code is as follows:

default as MemoryCache} from './memorycache ';

2.src/cache/memorycache.js: The operation to implement cached data is also a class that requires unit testing, with the following code:

Exportdefaultclass MemoryCache extends abcache{constructor (limit) {super (limit);  This. _map = []; }}varp =Memorycache.prototype;p.push=function(key, item) {varEntry ={key:key, value:item};  This. _map.push (entry);}; P.get=function(key,ruturnentry) { for(Let item of This. _map) {        if(Item.key = =key) {            returnRuturnentry?Item.value:item; }    }    return NULL;}; P.remove=function(key) { for(Let Indexinch  This. _map) {        if( This. _map[index].key = =key) {             This. _map.splice (index,1); return; }    }}

3.test/cache/memorycachetest.js: Unit Test Case class

var_memory = require ('.. /.. /src/cache/index.js '). Memorycache;describe (' MemoryCache test ',function(){    var_memeorycache; _memeorycache=New_memory (); Beforeeach (function(){//each time you run an IT, before executing    }); It (' Push ',function(){        varFoo = {"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: Entry file for unit test

Require ('./cache/memorycahcetest.js ');

5. Karma start to run unit test.

Combination of karma and Webpack