用 mocha 和 istanbul 测试你的 Babel 应用

补一篇文章,攒了好几篇想写的内容,今天先补一篇,然后慢慢补

单元测试这种东西大家都很熟悉了,它可以很方便的帮助你进行自检,增加代码的稳定性,同时可以帮助我们完成持续集成。mocha 大家也比较熟悉了,这里也不说了

先说一下 istanbul 这货吧,没错,就是伊斯坦布尔,其实就是一个检测代码覆盖率的一个工具,然后 Github 长这样儿 istanbul

这货可以帮你检测你各个地方的 js 代码,服务端、浏览器端都可以,也可以生成多种格式的检测报告。好吧,我知道你们对这个不感兴趣,那就直接来试试喽~

npm install -g istanbul

安装完成后,我们就可以去我们的代码目录试一下啦~

istanbul cover test.js

如果你在使用 mocha 也可以这样:

istanbul cover mocha

然后你就会发现,你的文件夹下出现了一个 coverage 的文件夹。对了!这就是我们的检测报告~

报告里会标注你的测试覆盖率以及那些代码没有被覆盖到,是不是感觉一下子就清楚了要完善什么了呢,哈哈哈哈哈

然后有小伙伴会问,那么,如果我想给 mocha 设置参数怎么办? 因为根据我们的常识可以知道,命令后面的空格分隔的参数是会传给这个命令的,也就是说如果我们直接在后面这样跟参数:

istanbul cover mocha --reporter spec

后面的参数是会传递给 istanbul 而不会传递给 mocha,那么我们该怎么办呢?

很简单,只要加上一个 -- 就好了~

istanbul cover mocha -- --reporter spec

istanbul 会把 -- 后面的参数传递给 mocha,这样就可以啦~

等等,话说你叨叨了这么大半天,不是说好测试 Babel 应用的么?怎么连一句话都没有提到?

好吧,下面就聊一下测试 Babel 的坑,首先是 mocha 测试 Babel 应用,这个很简单,Babel 官网就直接有文档,就先不说了,地址在这里 Babel + Mocha

然后就是 istanbul 加进来的时候你就会发现,特喵的根本不行!

是的,没办法,因为它现在还不支持 Babel 的检测,不过还好,istanbul 已经在做这方面的工作了,所以我们可以用它的测试版来完成我们的覆盖率检测~

npm install -g instanbul@1.0.0-alpha.2

alpha.2 了,感觉离正式版也不太远了~

然后你就可以愉快的和 Babel 玩耍了~ ( 切~ 感觉好失望~

好吧,其实就是这样。 那么如果我想要再好玩一点儿,我们想在 travis 帮我们做持续集成的时候,顺便我我的检测报告发送到我的 codecov 上面去,我该怎么办呢?

嘿嘿~ follow me ~

travis.yml

...

before_script:
    - npm install istanbul@1.0.0-alpha.2

script:
    - node_modules/.bin/istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- --compilers js:babel-register --require babel-polyfill

after_success:
    - npm install codecov
    - ./node_modules/.bin/codecov

嗯嗯,就是这样喽,很简单吧~

为了美好的(gai)明(xu)天(qiu),快去把你的代码加上测试吧~

晚安喽~

标签: mocha, istanbul, babel, 单元测试, code coverage

仅有一条评论

  1. 原来你还木有死。哈哈哈哈 icon_evil.gif icon_evil.gif icon_evil.gif icon_evil.gif icon_evil.gif

添加新评论

icon_question.gificon_razz.gificon_sad.gificon_evil.gificon_exclaim.gificon_smile.gificon_redface.gificon_biggrin.gificon_surprised.gificon_eek.gificon_confused.gificon_cool.gificon_lol.gificon_mad.gificon_twisted.gificon_rolleyes.gificon_wink.gificon_idea.gificon_arrow.gificon_neutral.gificon_cry.gificon_mrgreen.gif