上篇文章中，对 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 的系列套件。
关于具体的代码，我在下篇文章中专门进行陈列。
完。
