转载

搭建现代的 Karma 测试环境

之前写过的测试都是针对简单的工具方法，用的 mocha + chai 写，最近在研究前端路由，想写写测试代码，遇到 window.location ，突然意识到前后端的差异问题，需要一个浏览器环境，于是想到之前用过的 Karma + phamtonjs 环境，搭的过程中遇到一些坑，因为涉及到了 Babel 和 commonjs 模块系统，于是这里记录分享下。

开始搭环境

由于 Karma 只是一个 Test Runner ，咱们的测试框架和断言库还是需要的，于是先装这些东西：

> npm install --save-dev karma karma-mocha karma-chai

对于 npm 版本 >=3.0 的话，这几个 peerDependencies：

> npm install --save-dev mocha chai

这些装完后，利用 karma-cli 来初始化一份配置文件：

> ./node_modules/.bin/karma init

按照提示填写配置即可，完成后生成一份 karma.config.js ，把里面 singleRun 设成 false，结束。

接下来给 Karma 准备 Browsers 了，我这里选择 PhantomJS（在上面初始化 Karma 配置的时候就可以选了），不过这东西的安装过程是真的纠结：

> npm install --save-dev karma-phantomjs-launcher phantomjs-prebuilt

在安装的过程中，发现 PhantomJS 需要从 https://bitbucket.org/ariya/phantomjs/downloads/ 下载，速度非常慢，反正我是没有成功下载下来过。好在有淘宝镜像，哈哈，太棒了！cnode 帖子的链接在这里。

> PHANTOMJS_CDNURL=https://npm.taobao.org/dist/phantomjs npm install phantomjs-prebuilt --registry=https://registry.npm.taobao.org --no-proxy

然后贴出一部分配置：

module.exports = function (config) {     config.set({     basePath: './',     frameworks: [ 'mocha', 'chai' ],     files: [       'src/**/*.js',       'test/**/*.js'     ],     plugins: [       'karma-mocha',       'karma-chai',       'karma-mocha-reporter',       'karma-phantomjs-launcher'     ],     reporters: [ 'mocha' ],     port: 9876,     colors: true,     logLevel: config.LOG_INFO,     autoWatch: false,     browsers: [ 'PhantomJS' ],     singleRun: true,     concurrency: Infinity   }) }

这些顺利安装完后，并且你的配置文件正确配置的情况下，理应是可以跑了，然而我现在的工作流已经深度依赖于 Babel + commonjs 模块系统，所以如果你和我一样的话，那么我们的环境还没搭好。

Babel 加入

这边我用的 Babel 版本是 v6.0+，根据 Babel 官网说的：

> npm install --save-dev karma-babel-preprocessor

并在配置里添加预处理配置：

plugins: [     ...   'karma-babel-preprocessor',   ... ], preprocessors: {     "src/**/*.js": [ "babel" ],   "test/**/*.js": [ "babel" ] },

然而即便是这样也还是不行，考虑到 Babel 是将 ES6 的模块系统转换为 commonjs 的模块系统，而 Karma 是直接把匹配到的脚本放在浏览器环境里跑的，浏览器环境里肯定没有 require 、 module.exports 这种东西，所以在看了几个例子之后，发现还需要 karma-commonjs 这个东西。

> npm install --save-dev karma-commonjs

完整的配置文件如下：

module.exports = function(config) {     config.set({     basePath: './',     frameworks: [ 'mocha', 'chai', 'commonjs' ],     files: [       'src/**/*.js',       'test/**/*.js'     ],     exclude: [     ],     preprocessors: {       'src/**/*.js': [ 'babel', 'commonjs' ],       'test/**/*.js': [ 'babel', 'commonjs' ]     },     plugins: [       'karma-mocha',       'karma-chai',       'karma-mocha-reporter',       'karma-commonjs',       'karma-babel-preprocessor',       'karma-phantomjs-launcher'     ],     reporters: [ 'mocha' ],     port: 9876,     colors: true,     logLevel: config.LOG_INFO,     autoWatch: false,     browsers: [ 'PhantomJS' ],     singleRun: true,     concurrency: Infinity   }) }

好了，现在只需要在 npm scripts 里加上一条：