搭建现代的 Karma 测试环境

也可以在这里看：https://leozdgao.me/modern-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 里加上一条：

scripts: {
  test: 'karma start'
}

Webpack 加入

上面的 karma-commonjs 有个问题，它只能加载配置里 files 选项匹配的模块，这一点很不方便，于是想到 webpack 是否可以和 karma 协同工作，果然是有的，于是找我最终使用了这个方式。

> npm install --save-dev karma-webpack

karma-webpack 提供了两种方式加载测试文件，配置如下：

files: [
  'test/*_test.js',
  'test/**/*_test.js'
],
preprocessors: {
  'test/*_test.js': ['webpack'],
  'test/**/*_test.js': ['webpack']
},
webpack: {
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('test')
    })
  ]
}

此时，被加入 files 配置匹配的文件都被认为是入口点（entry），并加上 webpack 的预处理配置即可（有了 webpack 结合 commonjs 的模块系统，就不需要手动加入项目源码了，仅引入测试代码就行）。不过下面这种方式更加简单，只需要一个文件：

// tests.webpack.js
// require all modules ending in ".spec.js" from the
// current directory and all subdirectories
var testsContext = require.context("./test", true, /\.spec\.js$/)
testsContext.keys().forEach(testsContext)

本质上就是把所有匹配到的文件都 require 一遍，比如我上面就把所有 test 文件夹下的 .spec.js 结尾的文件都跑了一遍，Karma 的配置也稍微精简了点。

files: [
  'tests.webpack.js'
],
preprocessors: {
  'tests.webpack.js': [ 'webpack' ]
},
webpack: {
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('test')
    })
  ]
}

项目如果比较大，代码量较多的时候，webpack 打包会比较慢（对于打开 watch 选项的同学，可能会比较崩溃），大家自己取舍吧。

最后

大功告成，这里推荐大家写个 yo generator 来减少重复工作，之前写过 一篇文章 来介绍。

好了，结束，水文一篇，不过还是希望对大家有帮助。 :)