手把手教你为 React Boilerplate 添加测试代码覆盖率报告

前言

在上一篇文章中，葱哥从零开始创建了一个react的boilerplate，并使用webpack进行build，使其支持ES6，同时使用karma＋mocha等进行单元测试。虽然单元测试有了，但是代码中哪些写了测试，哪些没写呢？本文就将在上一篇文章的基础上为其增加生成代码覆盖率的功能。

代码

本文的最终代码可以在react_boilerplate_v8中查看。

准备工作

react boilerplate代码

首先拿到上一篇文章的代码：

# git clone https://github.com/jiji262/react_boilerplate.git
# cd _tutorial_/react_boilerplate_v6

在正式开始之前，我们将对之前的代码做一些简单的修改，app目录用于存放源代码，test目录用于存放测试文件，文件结构如下：

|____app
| |____components
| | |____FooBar.js
| | |____HelloWorld.js
| |____index.js
|____test
| |____components
| | |____HelloWorld-spec.js
| |____index.spec.js

其中components目录用于存放React组件，其中有两个小的示例。具体代码可以参考Github.

build和test

现在在我们的项目目录下可以通过如下命令来运行和测试代码了。

# npm run dev # 开发环境，运行后使用http://localhost:3000/看到效果
# npm build  # 生产环境编译
# npm run test # 使用karma+mocha进行测试

测试代码覆盖率

安装插件

除了我们已经安装好的karma-webpack、karma-sourcemap-loader等插件外，我们要实现测试代码的覆盖率检测，还需要安装如下插件：

npm install karma-coverage --save-dev

要支持React的测试代码覆盖率，还需要：

npm install babel-istanbul-loader --save-dev

修改karma配置文件

在karma.config.js文件中，添加对coverage插件的支持，修改后代码如下：

var path = require('path');
var webpackConfig = require('./webpack.config');
webpackConfig.devtool = 'inline-source-map';
webpackConfig.module.preLoaders = [
    //transpile and instrument only testing sources with babel-istanbul
      test: /\.js$/,
      include: path.resolve('app/'),
      loader: 'babel-istanbul',
      query: {
        cacheDirectory: true
          // see below for possible options
          module.exports = function(config) {
  config.set({
    browsers: ['Chrome'],
    singleRun: true,
    frameworks: ['mocha', 'chai', 'sinon', 'sinon-chai'],
    files: [
      'test.webpack.js'
    plugins: [
      ......
      'karma-coverage'
    preprocessors: {
      //'app/**/*.js': ['coverage'],
      'test.webpack.js': ['webpack', 'sourcemap']
    reporters: ['mocha', 'coverage'],
    // optionally, configure the reporter
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    webpack: webpackConfig,
    ......
  });

此处复用了webpack的配置文件webpack.config.js。当然也可以直接将webpack的配置文件写在karma.config.js中。

修改test.webpack.js文件

在test.webpack.js文件中引入所要测试的源代码和测试用例文件，如下：

var context = require.context('./test', true, /spec\.js$/);
context.keys().forEach(context);
var context = require.context('./app', true, /\.jsx?$/);
context.keys().forEach(context);

注意，这里如果没有添加./app，则没有写测试用例的文件（本例中的FooBar.js）就不会出现在coverage的report中。

运行测试

运行命令npm run test 运行karma测试，命令行中显示结果：

> react_boilerplate@1.0.0 test /Users/i301792/Work/react_boilerplate
> karma start
START:
26 07 2016 14:28:20.866:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
26 07 2016 14:28:20.872:INFO [launcher]: Starting browser Chrome
26 07 2016 14:28:21.896:INFO [Chrome 51.0.2704 (Mac OS X 10.11.6)]: Connected on socket /#prlpeNiUX9kDUlWtAAAA with id 1527217
  root
    ✔ renders without problems
  app
    ✔ loads without problems
    Finished in 0.045 secs / 0.024 secs
SUMMARY:
✔ 2 tests completed

同时，在我们的项目目录下生成了一个新的文件夹：coverage：

PVGM50934227A:react_boilerplate i301792$ cd coverage/
PVGM50934227A:coverage i301792$ tree
|____Chrome 51.0.2704 (Mac OS X 10.11.6)
| |____app
| | |____components
| | | |____FooBar.js.html
| | | |____HelloWorld.js.html
| | | |____index.html
| | |____index.html
| | |____index.js.html
| |____base.css
| |____index.html
| |____prettify.css
| |____prettify.js
| |____sort-arrow-sprite.png
| |____sorter.js

打开其中的html文件index.html，即可查看生成的测试覆盖率报告。