Karma 4 - Karma 集成 Webpack 进行单元测试

可以将 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.
Time: 10ms
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
Hash: a7a4dbb23c1393742816
Version: webpack 1.12.
Time: 46ms
          Asset     Size  Chunks             Chunk Names
karma-bundle.js  1.88 kB         [emitted]  karma-bundle.js
chunk    {} karma-bundle.js (karma-bundle.js)  bytes [rendered]
    [] ./karma-bundle.js  bytes {} [built]
    [] ./app/add.js  bytes {} [built]
    [] ./test/unit/add.spec.js  bytes {} [built]
webpack: bundle is now VALID.
   ::35.044:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
   ::35.055:INFO [launcher]: Starting browser Chrome
   ::36.697:INFO [Chrome 47.0. (Windows  0.0.)]: Connected on socket /#S8gDNP6eDACwVLy6AAAA with id 

Chrome 47.0. (Windows  0.0.): Executed  of  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. test C:\study\karmaStudy\karma2
> karma start

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Hash: 8344a6c0a9b3c44a5636
Version: webpack 1.12.
Time: 9ms
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
Hash: a7a4dbb23c1393742816
Version: webpack 1.12.
Time: 45ms
          Asset     Size  Chunks             Chunk Names
karma-bundle.js  1.88 kB         [emitted]  karma-bundle.js
chunk    {} karma-bundle.js (karma-bundle.js)  bytes [rendered]
    [] ./karma-bundle.js  bytes {} [built]
    [] ./app/add.js  bytes {} [built]
    [] ./test/unit/add.spec.js  bytes {} [built]
webpack: bundle is now VALID.
   ::53.371:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
   ::53.391:INFO [launcher]: Starting browser Chrome
   ::56.044:INFO [Chrome 47.0. (Windows  0.0.)]: Connected on socket /#GAQtOyOe56YFuQ0vAAAA with id 

Chrome 47.0. (Windows  0.0.): Executed  of  SUCCESS (0.01 secs / 0.002 secs)
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

总结

使用 Karma 集成 webpack 需要解决模块化问题，代码入口问题。