使用 karma 实现 mock 测试数据

Question

karma 是一个著名的浏览器测试框架，他的特色是启动一个 nodejs 服务器，在浏览器端通过 http 下载脚本，并通过 websocket 实现 karma 和浏览器实现双向通信。网上甚少有使用 karma 做 mock 的教程。但是因为 karma 使用了 connect 模块，有中间件的能力，因此值得一试。

引入 karma

karma 官方支持的是 jasmine，所以省事一点就直接用 jasmine（不过这货返回 promise 没有官方支持）。

在项目中新建文件 karma.conf.js

module.exports = config => {
    config.set({
        basePath: './test',
        files: ['**/*.spec.js'],
        browsers : [
          'Chrome',
        ],
        frameworks: ['jasmine'],
        singleRun: true,
    });
}

新建 test/entry.spec.js

describe('Hello, test', () => {
    it('should work', () => {
        const data = 0;
        expect(data).toEqual(0);
    });
});

安装依赖

npm i karma karma-jasmine karma-chrome-launcher jasmine-core -D

执行测试

node_modules/.bin/karma start

执行之后，可以看到浏览器被自动打开然后关闭，控制台出现一片绿色提示，表示测试成功了。

实现 mock

吐槽一下，karma 深受 Java/AngularJS 的影响，什么都搞依赖注入，怪恶心的。karma 支持插件，插件的结构应该如此:

.......
// optional
fn.$injector = [xxx, xxx ,xxx]

module.exports = {
    `${plugin type}:${plugin name}`: [`${fn type, factory or value}`, fn]
}

插件主要有4种类型分别是 frameworks, reporters, launchers and preprocessors，另外还有我们要用的 middleware。

插件默认会接收到 config 作为参数（就是我们写的配置文件），也可以通过对 fn 执行 $injector 属性指定fn被注入的参数。

如此我们就开始实现一个我们的 middleware。

新建 test/mock/middleware.js 文件

// 比较简单，当路径匹配到指定的mockUriStart时
// 则加载processors下的模块处理请求

function mockFactory(config) {
  const mockUrl = config.mockUriStart || '/mock-api/';
  return function (req, res, next) {
    if (req.url.indexOf(mockUrl) === 0) {
      const path = req.url.slice(mockUrl.length);
      try {
        const processor = require(`./processors/${path}`);
        processor(req, res);
      }
      catch (e) {
        next();
      }
    }
    else {
      next();
    }
  };
};
// 我们只需要config，因此就不指定$injector属性了
module.exports = {
  'middleware:mock': ['factory', mockFactory]
};

新建 test/mock/processors/simple.js 文件

module.exports = function (req, res) {
  res.end('Simple data');
};

修改 karma.conf.js， 这里有个大坑点，如果你想加载不处于 node_modules 的插件，则需要手动在 plugins 中添加。但是一旦有了 plugins 选项，那么所有的插件加载都要手动添加，包括在 node_modules 中的插件。

module.exports = config => {
    config.set({
        basePath: './test',
        files: ['**/*.spec.js'],
        browsers : [
          'Chrome',
        ],
        frameworks: ['jasmine'],
        middleware: ['mock'],
        plugins: [
            require('./test/mock/middleware'),
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
        ],
        singleRun: true,
    });
}

修改 test/entry.spec.js

describe('Hello, test', () => {
    it('should work', (done) => {
       const xhr = new XMLHttpRequest();
       xhr.open('GET', '/mock-api/simple', true);
       xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
               console.log(xhr.response);
               done();
             }
      };
    xhr.send(null);
    });
});

执行测试

node_modules/.bin/karma start

将会看到 karma 的控制台有 LOG: 'Simple data' 的字样。至此，就完成了一个简单的 mock server，只要扩充 mock 中间件对路由的处理逻辑或者让 mock 中间件做其他 mock 服务器的代理，就可以拥有更加完整的功能。