资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端测试框架mocha使用小结

前端测试框架mocha使用小结

asoren / 2347人阅读

摘要：称为测试用例，表示一个多带带的测试，是测试的最小单位。它使用的浏览器环境，通过事件监听的方式检测测试的执行过程。前端的自动化测试还需慢慢探索，任重而道远。前端技术交流群欢迎加入

安装 
</>复制代码 
  1. npm i -g mocha
  2. npm i chai -D  //断言库
模块测试

比如有一个add函数

</>复制代码 
  1. //add.js
  2. function add(a, b){
  3.   return a + b
  4. }
  5. module.exports = add

新建一个测试文件add.test.js(一般测试文件命名都是以被测文件后加.test后缀)
describe:称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（"加法函数的测试"），第二个参数是一个实际执行的函数。
it:称为"测试用例"（test case），表示一个多带带的测试，是测试的最小单位。

</>复制代码 
  1. // add.test.js
  2. var add = require("./add.js")
  3. var expect = require("chai").expect;
  4. describe("add功能测试", function(){
  5.   it("1 + 1 = 2", function(){
  6.     expect(add(1, 1)).to.be.equal(2)  //断言库的用法
  7.   })；
  8.   it("返回值为数字", function(){
  9.     expect(add(1, 1)).to.be.a("number")
  10.   });
  11. })

chai中的expect模块的语法很接近自然语言的风格，常见的有:

</>复制代码 
  1. // 相等或不相等
  2. expect(4 + 5).to.be.equal(9);
  3. expect(4 + 5).to.be.not.equal(10);
  4. expect(foo).to.be.deep.equal({ bar: "baz" });
  5. // 布尔值为true
  6. expect("everthing").to.be.ok;
  7. expect(false).to.not.be.ok;
  8. // typeof
  9. expect("test").to.be.a("string");
  10. expect({ foo: "bar" }).to.be.an("object");
  11. expect(foo).to.be.an.instanceof(Foo);
  12. // include
  13. expect([1,2,3]).to.include(2);
  14. expect("foobar").to.contain("foo");
  15. expect({ foo: "bar", hello: "universe" }).to.include.keys("foo");
  16. // empty
  17. expect([]).to.be.empty;
  18. expect("").to.be.empty;
  19. expect({}).to.be.empty;
  20. // match
  21. expect("foobar").to.match(/^foo/);

以上方法可以很轻松的测试封装的方法和模块

基于浏览器的测试，如ajax 
</>复制代码 
  1. 在这里使用我自己的ajax库 baby-ajax
    mocha-phantomjs:是一个 通过 PhantomJS 执行 mocha 浏览器环境测试的工具库。它使用 PhantomJS 的浏览器环境，通过事件监听的方式检测 mocha 测试的执行过程。
    mocha-phantomjs-core:是 mocha-phantomjs的核心依赖库。作者将它多带带提取出来，是因为它也可以支持 SlimerJS。
    SlimerJS :基于的 Gecko 内核(Firefox)的与 PhantomJS 的 API 几乎相同的工具，而且SlimerJS在执行过程中默认会启动有界面的浏览器窗体，可以看到整个执行过程
</>复制代码 
  1. npm i baby-ajax mocha-phantomjs-core mocha-phantomjs -D

在项目目录下创建测试目录

</>复制代码 
  1. mocha init test

mocha会自己为我们创建测试模板，包含html，css，js

手动引用mocha.js，chai.js,和自己的测试js

</>复制代码 
  1. //ajax.test.js
  2. var Ajax = require("../example/static/ajax.js");
  3. var expect = require("chai").expect;
  4. expect(Ajax).to.be.an("object");
  5. describe("get测试", function(done){
  6.     Ajax.get("./data.json")
  7.     .then(function(res){
  8.         expect(res).to.have.include.keys("data","status") //返回值必须有两个key，一个是data，一个是status
  9.         done()
  10.     }, function(){
  11.          expect(res).to.have.include.keys("data","status")
  12.          done()
  13.     })
  14. })

这样就可以在node中模拟浏览器环境，从而可以获取在浏览器中的对象，如window等

总结
使用mocha配合chai以及mocha-phantomjs可以很方便的对函数的执行进行一步一步的监控，数值的类型做限定。但是如果一旦设计到业务逻辑的测试和UI的测试，可能就有点力不从心了，业务功能测试需要数据源的支撑，一味的使用假数据很难覆盖异常情况；而UI的测试虽然可以借助jq的trigger来模拟用户行为，但是这显然是个巨大的任务量，首先要在测试目录下的html写入需要测试的dom元素，再写测试逻辑。可能一个小时就完成的UI需要一天或者更长的时间来写测试逻辑。
前端UI的自动化测试还需慢慢探索，任重而道远。 前端技术交流群：709397872（欢迎加入）
云服务器 GPU云服务器 单元测试-mocha-jasmine 前端框架 前端技术框架 最新前端框架

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

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

相关文章

  • 聊一聊前端自动化测试

    摘要：在真正写了一段时间的基础组件和基础工具后，才发现自动化测试有很多好处。有了自动化测试，开发者会更加信任自己的代码。由于维护测试用例也是一大笔开销毕竟没有多少测试会专门帮前端写业务测试用例，而前端使用的流程自动化工具更是没有测试参与了。 本文转载自 天猫前端博客，更多精彩文章请进入天猫前端博客查看 前言 为何要测试 以前不喜欢写测试，主要是觉得编写和维护测试用例非常的浪费时间。在真正写了...

    wthee 评论0 收藏0

  • 探知js测试(3)

    摘要：模块测试模块语法我这里提及一点。基本工程目录一个良好的工程目录，能够帮助你测试成本降到最低。这一块算是独立于单元测试的。 前面两篇已经把，js测试的模式，框架，断言库基本介绍了一遍。这里，我们要上升到整体测试架构上来.首先，单元测试的对象是模块，这里我们就要将自己测试目标调整到对模块测试上来。所以，这里我们需要使用CommonJS或者es6的模块的写法了。另外需要了解,mocha框架测...

    陈江龙 评论0 收藏0

  • 探知js测试(3)

    摘要：模块测试模块语法我这里提及一点。基本工程目录一个良好的工程目录，能够帮助你测试成本降到最低。这一块算是独立于单元测试的。 前面两篇已经把，js测试的模式，框架，断言库基本介绍了一遍。这里，我们要上升到整体测试架构上来.首先，单元测试的对象是模块，这里我们就要将自己测试目标调整到对模块测试上来。所以，这里我们需要使用CommonJS或者es6的模块的写法了。另外需要了解,mocha框架测...

    pakolagij 评论0 收藏0

发表评论

登陆后可评论

0条评论

asoren

男|高级讲师
我要私信

TA的文章

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