结合使用Babel Mocha Istanbul进行ES6代码测试和覆盖率测试

题外话：
一直以为mocha读作“抹茶”并且一直这么读了很久，直到最近看了一个mocha的教学视频，才知道这是摩卡咖啡的摩卡…而抹茶的抹茶应该是matcha…

在还没有babel的时候，一切都很简单，基础的问题就先不讨论了，这里主要记录一下Babel转码和Istanbul测覆盖率的一些坑。

基本设置

通常我们会有好几个文件夹，例如

  • src用来存放源文件，也就是包含es6,7的代码；
  • lib用来存放编译后的代码
  • test用来放测试脚本

在test文件夹下，通常有一个mocha.opts文件用来存放mocha的参数

1
2
--compilers js:babel-register
--require babel-polyfill

如果用到了需要用babel-polyfill才能实现的方法就需要加上第二句，别忘了npm install babel-polyfill --save-dev

生成覆盖率的测试命令：（_mocha 是有下划线的）[^1]

1
istanbul cover _mocha --  --opts ./test/mocha.opts

编译

1
babel src/ -d lib/ --presets es2015 --source-map both

使用--source-map both参数将会生成source map，有了source map，istanbul就能够追踪到src下的源代码的覆盖率

正确的require

在mocha中，一定要require src文件夹下的文件，而不是lib文件夹下的文件。虽然两个文件夹下的文件mocha都能测，但是覆盖率会有一些问题。

可能的问题

  • 出现以下错误提示时，很可能因为istanbul的版本过低，使用1.0.0-alpha.2版本可以正常运行

    1
    No coverage information was collected, exit without writing coverage information

  • istanbul生成的覆盖率文件里代码几乎都是红色的，这是因为编译时没有 --source-map both 参数，追踪的是lib文件夹下的覆盖率

  • istanbul生成的覆盖率文件总是显示100%，就算有些地方没测，也显示100%，这是因为在Mocha里require的是lib而非src

其他

我最喜欢mocha的报告形式是-R nyan，一只可爱的喵星人，没有错的时候是这样的^_^，有错的时候是这样的O_O，反正就是萌萌萌。

然而最实用的报告形式可能是-R mochawesome，需要npm i mochawesome安装插件，生成直观的html测试报告[^2]

平时遇到的问题十有八九一搜都能找到阮一峰老师的教程…这覆盖率也太高了？！

参考

[1] http://www.ruanyifeng.com/blog/2015/06/istanbul.html
[2] http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
[^1]: http://www.ruanyifeng.com/blog/2015/06/istanbul.html
[^2]: http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html