脚本宝典收集整理的这篇文章主要介绍了现代JS代码测试流程,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
有质量的代码是要有代码测试来保证的,本文就大致谈谈现在我们是如何实现使用es6甚至es7(async/await)标准的JS代码的高效测试的。
我们会用到以下工具
webpack 前端打包工具
mocha 测试框架
karma 命令行下执行浏览器测试
istanbul 代码覆盖率工具
travis-ci 自动集成
安装mocha
npm i -D mocha
代码没有后端依赖可直接测试:
mocha test.js
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。
以上是脚本宝典为你收集整理的现代JS代码测试流程全部内容,希望文章能够帮你解决现代JS代码测试流程所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。