搭建现代的 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 是直接把匹配到的脚本放在浏览器环境里跑的,浏览器环境里肯定没有 requiremodule.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 来减少重复工作,之前写过 一篇文章 来介绍。

好了,结束,水文一篇。