有质量的代码是要有代码测试来保证的，本文就大抵谈谈如今我们是怎样完成运用es6以至es7（async/await）规范的JS代码的高效测试的。
我们会用到以下东西
webpack 前端打包东西
mocha 测试框架
babel 编译es6/7代码
karma 敕令行下实行浏览器测试
istanbul 代码掩盖率东西
coveralls 代码掩盖统计服务商
travis-ci 自动集成
装置mocha
npm i -D mocha代码没有后端依靠可直接测试：
mocha test.js
运用浏览器/node不支持的es6须要babel来编译代码
npm i babel -D启用es6，这类体式格局新版本的babel会自动启动async/await
mocha --compilers js:babel/register test.js假如用到了前端的代码，就须要webpack如许的东西
npm i webpack mocha-loader -D
webpack 'mocha!./test.js' testBundle.js
//index.html 包括 testBUndle.js
open index.html须要babel和webpack一同运用的话，先装loader
npm i babel-loader -D敕令行的 babel-loader 只会编译当前的文件，如需编译别的文件须要在 require 处增加才编译胜利，假如须要启用 async/await 还须要到场 runtime 选项，比方：require('babel?optional[]=runtime!./index.js')
假如每次require都去加就显得太烦琐了，所以发起运用 webpack.config.js 增加
module.exports = {
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?optional[]=runtime'
}
]
}
}到 webpack.config.js, 如今能够在敕令行和require上省去babel了。
这类体式格局每次修正都要手动去编译再革新浏览器，比较烦琐，所以引荐运用webpack-dev-server及时调试。
npm i webpack-dev-server -D
webpack-dev-server 'mocha!./test.js' --hot --inline --output-filename test.js
open http://localhost:8080/test每次代码修正页面都邑自动革新，更壮大的是它只会实行你修正了代码的测试用例 (几乎神器)。
如今能够用浏览器测试我们的es6代码了，下一步是在敕令行也能测试浏览器跑的代码，这里我们用 karma 以启用 firefox 为例，装置依靠：
npm i -D karma karma-cli karma-firefox-launcher karma-mocha karma-webpack
然后在 karma.conf.js 文件中到场:
// Karma configuration
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['mocha'],
files: [ 'test/test.js' ],
exclude: [ ],
preprocessors: {
'test/test.js': ['webpack']
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Firefox'],
webpack: {
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?optional[]=runtime'
}
]
}
},
webpackMiddleware: {
noInfo: true
},
singleRun: true
})
}实行
./node_modules/.bin/karma start
最先测试
光有测试还不足以让你佩服你的代码，我们还须要测试掩盖，这里以运用 istanbul 为例：
npm i -D istanbul babel-istanbul-instrumenter-loader karma-coverage
修正 karma.conf.js
...
reporters: ['progress', 'coverage']
...
webpack: {
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?optional[]=runtime'
}
],
preLoaders: [
// instrument only testing sources with Istanbul
{
test: /\.js$/,
include: path.resolve('lib/'),
loader: 'babel-istanbul-instrumenter'
}
]
}
}
....
coverageReporter: {
dir: 'coverage/',
reporters: [
{type: text}
{ type: 'html', subdir: 'html' },
{ type: 'lcovonly', subdir: 'lcov' },
{ type: 'cobertura', subdir: 'cobertura' }
]
}这里生成了3中报告，html是给人看的（浏览器翻开 coverage/html/index.html 能够直接检察），别的两种便于别的的东西剖析。
以上东西的用法搭配多样，这里只是深刻引见，真正运用请仔细浏览相干文档。
末了是怎样延续集成，ravis-ci 和 coveralls.io 能够很好的协作处理这个题目。
你须要先到 travis-ci 注册，然后经由过程 github 受权，启用相干的项目。在项目中增加 .travis.yml 配置文件
language: node_js
node_js:
- '0.12'
before_script:
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start推送到 github 以后，每次提交 travis-ci 都邑先实行 npm install 然后实行 npm test 中的敕令举行测试 （另有别的自定义的设置，本文略过）
运用 coveralls.io 须要先装置一个包来发送数据
npm i -D coveralls然后也是注册、受权、启用相干项目，末了是做一个测试敕令把测试报告发给它，以 Makefile 为例：
test-coveralls:
@echo TRAVIS_JOB_ID $(TRAVIS_JOB_ID)
@node_modules/.bin/karma start --single-run && \
cat ./coverage/lcov/lcov.info | ./node_modules/coveralls/bin/coveralls.js修正package.json的测试敕令
scripts: {
test: make test-coveralls
}如许 travis-ci 每次实行完测试都邑把 lcov.info 里的测试效果经由过程 coveralls.js 发送给 coveralls.io 网站。
做为树模，这是一个实际的组件项目 chemzqm/exgrid，另有一个榜样项目 chemzqm/es6-test-sample。
做为一个有寻求的开发者，向着100%的掩盖率勤奋吧！
