资讯专栏INFORMATION COLUMN

现代JS代码测试流程

supernavy / 1591人阅读

摘要:有质量的代码是要有代码测试来保证的,本文就大致谈谈现在我们是如何实现使用甚至标准的代码的高效测试的。每次代码修改页面都会自动刷新,更强大的是它只会执行你修改了代码的测试用例简直神器。

有质量的代码是要有代码测试来保证的,本文就大致谈谈现在我们是如何实现使用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%的覆盖率努力吧!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/8719.html

相关文章

  • 现代JS代码测试流程

    摘要:有质量的代码是要有代码测试来保证的,本文就大致谈谈现在我们是如何实现使用甚至标准的代码的高效测试的。每次代码修改页面都会自动刷新,更强大的是它只会执行你修改了代码的测试用例简直神器。 有质量的代码是要有代码测试来保证的,本文就大致谈谈现在我们是如何实现使用es6甚至es7(async/await)标准的JS代码的高效测试的。 我们会用到以下工具 webpack 前端打包工具 moch...

    cyqian 评论0 收藏0
  • 前端每周清单第 13 期:Webpack CLI 发布、解密现代浏览器引擎构建之道

    摘要:前端每周清单第期前端每周清单发布可期待的新特性解密现代浏览器引擎构建之道前端前端每周清单前端每周清单专注前端领域内容,分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。该过程可用于确定出现变更的具体时间,并将变更传递给渲染器。 前端每周清单第 13 期:Webpack CLI 发布、Angular 5 可期待的新特性、解密现代浏览器引擎构建之道 为InfoQ中文站特供稿件,首...

    kuangcaibao 评论0 收藏0
  • 前端面试题(3)现代技术

    摘要:什么是单页面应用单页面应用是指用户在浏览器加载单一的页面,后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时,将导航页传输到客户端,其余请求通过获取数据实现数据的传输通过或远程过程调用。 什么是单页面应用(SPA)? 单页面应用(SPA)是指用户在浏览器加载单一的HTML页面,后续请求都无需再离开此页 目标:旨在用为用户提供了更接近本地...

    EasonTyler 评论0 收藏0
  • 前端面试题(3)现代技术

    摘要:什么是单页面应用单页面应用是指用户在浏览器加载单一的页面,后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时,将导航页传输到客户端,其余请求通过获取数据实现数据的传输通过或远程过程调用。 什么是单页面应用(SPA)? 单页面应用(SPA)是指用户在浏览器加载单一的HTML页面,后续请求都无需再离开此页 目标:旨在用为用户提供了更接近本地...

    AaronYuan 评论0 收藏0
  • 前端面试题(3)现代技术

    摘要:什么是单页面应用单页面应用是指用户在浏览器加载单一的页面,后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时,将导航页传输到客户端,其余请求通过获取数据实现数据的传输通过或远程过程调用。 什么是单页面应用(SPA)? 单页面应用(SPA)是指用户在浏览器加载单一的HTML页面,后续请求都无需再离开此页 目标:旨在用为用户提供了更接近本地...

    trigkit4 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<