Karma 4 - Karma 集成 Webpack 进行单元测试
Karma 4 - Karma 集成 Webpack 进行单元测试
来源：http://www.cnblogs.com/haogj/p/5209743.html
可以将 karma 与 webpack 结合起来，自动化整个单元测试过程。
配置环境
1. 首先根据 1 完成基本的 karma 测试环境。
2. 安装 webpack 和 webpack 使用的 loader
在最简单的情况下，我们只需要 webpack 和 webpack 的 karma 插件 karma-webpack
npm i -D webpack karma-webpack
模块化代码
webpack 是基于模块进行打包的，所以，我们的代码也应该已经采用了某种模块管理机制，比如 node 直接支持的 commonjs 模块。
这样的话，我们需要将我们的源代码和测试代码进行模块化处理。
原来的 add.js 函数处理为 commonjs 模块。直接导出函数。
function add( a, b ){
return a + b;
}
module.exports = add;
原来的测试用例 add.spec.js，导入我们定义的函数，然后使用这个函数进行测试。
var add = require('../../app/add.js');
describe('add unit test.', function(){
it('2 + 3 = 5', function(){
var result = add(2, 3);
expect( result).toBe( 5 );
});
});
创建入口文件
我们希望将源代码和测试代码通过 webpack 打包为一个文件，然后交给 karma 进行统一的测试，为了将源代码和测试代码组合在一起，我们可以创建一个 karma 的入口文件，通过它来引用我们的源代码和单元测试代码，通过 webpack 将这个文件作为打包的入口来生成最终的脚本文件，然后由 karma 将这个文件交给单元测试环境执行，获取测试的结果。
这里，我们在项目的根目录下，创建一个名为 karma-bundle.js 的入口文件，内容如下：
require('./app/add.js');
require('./test/unit/add.spec.js');
注意，这里统一使用了 commonjs 包格式。
为了测试方便，我们可以创建一个 webpack 的配置文件，自己先进行打包，检查打包的结果是否正确。
创建名为 webpack.config.js 的 webpack 配置文件。内容如下。
var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
entry: "./karma-bundle.js",
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
};
这样，我们可以直接执行 webpack 来检查打包之后的结果是否正确。
配置 Karma
在 Karma 中，我们需要注意两个地方。
1. files 中，我们仅仅需要配置这个入口文件就可以了。
files: [
'karma-bundle.js'
],
2. 这个文件并不是直接注入到测试环境中，我们需要使用 webpack 将这个文件作为入口进行打包处理，webpack 会查找这个文件依赖的内容，将所有的内容打包，最后输出一个打包文件，这个文件才是需要测试环境处理的文件。
这样的工作，我们通过预处理器进行。
preprocessors: { 'karma-bundle.js': ['webpack'] },
注意，你一定要安装了 karma-webpack 这个插件，而且必须有 webpack 。
执行测试
所有工作准备好之后，我们可以通过 karma 将整个过程统一执行了。只需要 karma start 就可以了。
> karma start
Hash: 8344a6c0a9b3c44a5636
Version: webpack 1.12.14
Time: 10ms
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
Hash: a7a4dbb23c1393742816
Version: webpack 1.12.14
Time: 46ms
Asset Size Chunks Chunk Names
karma-bundle.js 1.88 kB 0 [emitted] karma-bundle.js
chunk {0} karma-bundle.js (karma-bundle.js) 334 bytes [rendered]
[0] ./karma-bundle.js 63 bytes {0} [built]
[1] ./app/add.js 70 bytes {0} [built]
[2] ./test/unit/add.spec.js 201 bytes {0} [built]
webpack: bundle is now VALID.
23 02 2016 14:51:35.044:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
23 02 2016 14:51:35.055:INFO [launcher]: Starting browser Chrome
23 02 2016 14:51:36.697:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#S8gDNP6eDACwVLy6AAAA with id 99
231351
Chrome 47.0.2526 (Windows 7 0.0.0): Executed 1 of 1 SUCCESS (0.005 secs / 0.003 secs)
PS C:\study\karmaStudy\karma2>
你可以看到处理的详细过程。
使用 NPM 命令
还可以使用 NPM 的自定义命令来完成自动化。
在 package.json 文件中，自定义 test 命令
"scripts": {
"test": "karma start"
},
现在，可以直接使用 npm test 来执行测试了。
> npm test
> karma2@1.0.0 test C:\study\karmaStudy\karma2
> karma start
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Hash: 8344a6c0a9b3c44a5636
Version: webpack 1.12.14
Time: 9ms
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
Hash: a7a4dbb23c1393742816
Version: webpack 1.12.14
Time: 45ms
Asset Size Chunks Chunk Names
karma-bundle.js 1.88 kB 0 [emitted] karma-bundle.js
chunk {0} karma-bundle.js (karma-bundle.js) 334 bytes [rendered]
[0] ./karma-bundle.js 63 bytes {0} [built]
[1] ./app/add.js 70 bytes {0} [built]
[2] ./test/unit/add.spec.js 201 bytes {0} [built]
webpack: bundle is now VALID.
23 02 2016 14:53:53.371:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
23 02 2016 14:53:53.391:INFO [launcher]: Starting browser Chrome
23 02 2016 14:53:56.044:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#GAQtOyOe56YFuQ0vAAAA with id 21
030194
Chrome 47.0.2526 (Windows 7 0.0.0): Executed 1 of 1 SUCCESS (0.01 secs / 0.002 secs)
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
总结
使用 Karma 集成 webpack 需要解决模块化问题，代码入口问题。
