上篇文章中，对 Karma 进行了简单的介绍，本文是上篇文章的一些延伸，主要是 Karma 和 ES6 相关的配置以及代码覆盖率的配置。

首先来让 Karma 实现 ES6 支持。

ES6 支持

默认情况下，Karma 是不支持 ES6 的，比如我们有这样一个 utils.js 文件：

function add(x){

return(y)=>{

return x + y

}

}

export {

add

}

该文件中使用 ES6 的export 关键字向外暴露了一个 add 函数。然后在 src 文件夹中再创建一个 main.js 文件，并使用 import 关键字导入模块：

import {

add,

} from "./utils.js";

...

在不进行其他配置之前，我们来运行 karma start 命令：

PS E:\charley-praise> karma start

05 11 2017 17:03:10.128:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/

05 11 2017 17:03:10.135:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency

05 11 2017 17:03:10.146:INFO [launcher]: Starting browser PhantomJS

05 11 2017 17:03:13.416:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket gfnyTuv0Hz4bH7JBAAAA with id 98139962

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR

SyntaxError: Use of reserved word 'import'

at src/main.js:1

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR

SyntaxError: Unexpected token '>'

at src/utils.js:17

这里就报错了，因为我们使用了浏览器和 Node 都不支持的 ES6 Modules。为了让 Karma 支持 ES6 Modules，我们需要使用 Webpack 和 Babel。下面有请这两位选手：

// 安装 webpack 相关的套件

yarn add webpack karma-webpack -D

// 安装 babel 相关的套件

yarn add babel-core babel-loader babel-preset-env -D

安装完成后，修改 karma.conf.js 配置文件：

1)增加 webpack 配置：

...

webpack:{

module: {

rules: [

{

test: /\.js$/,

use: {

loader: 'babel-loader',

options: {

presets: ['env'],

}

},

exclude: /node_modules/

}]

}

},

...

2)修改配置项中的 preprocessors，应用我们的 webpack 插件：

...

preprocessors: {

'./src/**/*.js':['webpack'],

'./test/**/*.spec.js':['webpack']

},

...

因为我们的原始文件和测试文件都使用了 ES6，因此需要对它们都应用 webpack 的配置。

现在运行 karma start 命令，就不会发生错误了。

代码覆盖率支持

接下来，让 Karma 实现代码覆盖率的支持，让我们隆重请出 Istanbul 大佬：

yarn add istanbul-instrumenter-loader -D

yarn add babel-plugin-istanbul -D

yarn add karma-coverage-istanbul-reporter -D

安装完成后，我们需要做以下配置：

1)修改 karma.conf.js 配置文件中的 webpack 配置项：

...

webpack:{

module: {

rules: [{

test: /\.js$/,

use: {

loader: 'istanbul-instrumenter-loader',

options: { esModules: true }

},

enforce: 'pre',

exclude: /node_modules|\.spec\.js$/,

},

{

test: /\.js$/,

use: {

loader: 'babel-loader',

options: {

presets: ['env'],

plugins: ['istanbul']

}

},

exclude: /node_modules/

}]

}

},

...

2)修改 karma.conf.js 中的 reporters 选项：

...

reporters: ['coverage-istanbul'],

...

3)对覆盖率测试做一些配置

...

coverageIstanbulReporter: {

reports: ['html', 'text-summary'],

dir: 'coverage/',

fixWebpackSourcePaths: true,

skipFilesWithNoCoverage: true,

'report-config': {

html: {

subdir: 'html'

}

}

},

...

现在可以来测试一下单元测试覆盖率的情况了，我们不加入任何单元测试代码，看下运行效果：

05 11 2017 17:04:22.020:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket 6UUDaNimVpEfxhKDAAAA with id 72046933

=============================== Coverage summary ===============================

Statements : 0% ( 0/2 )

Branches : 100% ( 0/0 )

Functions : 0% ( 0/2 )

Lines : 0% ( 0/2 )

================================================================================

对于代码覆盖率的测试，会从语句(Statements)、分支(Branches)、函数(Functions)和行(Lines)四个维度进行。对于这几个维度的解释如下：

行覆盖率(line coverage)：是否每一行都执行了？

函数覆盖率(function coverage)：是否每个函数都调用了？

分支覆盖率(branch coverage)：是否每个if代码块都执行了？

语句覆盖率(statement coverage)：是否每个语句都执行了？

接下来，对 utils.js 中的 add 进行单元测试，下面是 utils.spec.js 中的代码：

import { add } from "../src/utils"

describe("测试算数运算",()=>{

it("测试加法运算",()=>{

const add5 = add(5)

expect(add5(5)).toBe(10)

})

})

然后执行 karma start 命令，看下运行效果：

05 11 2017 17:11:09.487:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket WKhEFarUgA8QPn2HAAAA with id 38737854

=============================== Coverage summary ===============================

Statements : 100% ( 2/2 )

Branches : 100% ( 0/0 )

Functions : 100% ( 2/2 )

Lines : 100% ( 2/2 )

================================================================================

恩，不错，现在我们的代码覆盖率为 100%，看来升值加薪，是在所难免了。

查看 HTML 报表

除了可以在命令行的运行结果中查看代码覆盖率的情况，Karma 还为我们生成了 HTML 报表(上面在配置 coverageIstanbulReporter 对生成路径进行了配置)，看起来更加直观。您可以自行打开 coverage (或其他您自行配置的路径)进行查看，这里就不截图了。

总结

本文主要在前文的基础上，为 Karma 增加了 ES6 和代码覆盖率的支持，让 Karma 支持 ES6 需要用到 Webpack 和 Babel 的一些套件， 对于代码覆盖率的支持，我选用了 Istanbul 的系列套件。

关于具体的代码，我在下篇文章中专门进行陈列。

完。