博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用mocha前端单元测试
阅读量:6359 次
发布时间:2019-06-23

本文共 3360 字,大约阅读时间需要 11 分钟。

Mocha

  • 需求


因为之前的项目没有涉及到测试这一块,没有完整的测试体系。最近看了阮一峰老师的

来总结一下。

  • 小试牛刀


具体的教程在阮一峰老师的博客上有介绍,这里就不再赘述。

以自己的github上的小工具klocation.js做了个示例:

/** * Created by caozheng on 2016/11/28. */require('./../KLoction');var expect = require('chai').expect;(function (win) {    var testUrl = "https://github.com/karzanOnline?a=1";    describe('constructor', function () {        var testResult =  KLocation(testUrl);        describe('#output', function () {            it("return value is an object", function () {                expect(testResult).to.be.an("object")            });            it("property url is string", function () {                expect(testResult.url).to.be.a("string")            });            it("property port is number", function () {                expect(testResult.port).to.be.a("number")            });            it("property host is string", function () {                expect(testResult.host).to.be.a("string")            });            it("property protocol is string", function () {                expect(testResult.protocol).to.be.a("string")            });            it("property pathname is string", function () {                expect(testResult.pathname).to.be.a("string")            });        });        describe("#method", function () {            it("getParam", function () {                expect(testResult.getParam()).to.be.deep.equal({a : '1'})            });            it("getProtocol", function () {                expect(testResult.getProtocol()).to.be.equal("https:")            });            it("getHost", function () {                expect(testResult.getHost()).to.be.equal("github.com")            });            it("getPort", function () {                expect(testResult.getPort()).to.be.empty;            });            it("getPathname", function () {                expect(testResult.getPathname()).to.be.equal("/karzanOnline")            })        })    })})(this);

在github上还要去注册一下,然后通过配置.travis.yml文件(确定使用的语言和node的版本),如果测试通过就会生成一个图标

然后把url放到README.md就可以了。

  • expect(经常用到的方法)


// 相等或不相等expect(4 + 5).to.be.equal(9);expect(4 + 5).to.be.not.equal(10);expect(foo).to.be.deep.equal({ bar: 'baz' });// 布尔值为trueexpect('everthing').to.be.ok;expect(false).to.not.be.ok;// typeofexpect('test').to.be.a('string');expect({ foo: 'bar' }).to.be.an('object');expect(foo).to.be.an.instanceof(Foo);// includeexpect([1,2,3]).to.include(2);expect('foobar').to.contain('foo');expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');// emptyexpect([]).to.be.empty;expect('').to.be.empty;expect({}).to.be.empty;// matchexpect('foobar').to.match(/^foo/);
  • mochawesome


这里阮一峰老师给的code是(三个步骤改进一下)

$ npm install --save-dev mochawesome$ ../node_modules/.bin/mocha --reporter mochawesome

首先安装mochawesome必须!但是第二步可以通过package.json来设置,由于node_modules/.bin/目录会在运行时加入系统的PATH变量,因此在运行npm时,就可以不带路径,直接通过命令来调用这些脚本。

  1. 根目录创建test文件(mocha.opts配置项加一下)

  2. 放入测试的脚本

  3. package.json配置scripts

"scripts": {    "test": "mocha --reporter mochawesome"  },

将会在同级目录生成mochawesome-reports,访问html即可。

  • 异步测试


var fetch = require ('node-fetch');var expect = require('chai').expect;it('异步请求应该返回一个对象', function (done) {    return fetch("https://api.github.com")        .then(function (res) {          return res.json()        }).then(function (json) {          expect(json).to.be.an('object');          done();        })    })
  • 测试用例管理


it.only :如果测试代码中有only,那么只有带有only方法的测试用例会运行。

it.skip :与only相反

转载地址:http://cabma.baihongyu.com/

你可能感兴趣的文章
Java支付宝扫码支付[新]
查看>>
SpringMVC 拦截器 筛选
查看>>
第十八章:MVVM(八)
查看>>
点击表头切换升降序排序方式
查看>>
第26天,Django之include本质
查看>>
Java中静态变量和实例变量的区别
查看>>
秋名山老司机(详解)——bugku
查看>>
RED | Robot Framework集成开发环境
查看>>
育碧同 Mozilla 联手开发 AI 代码助手
查看>>
【实用】面对枯燥的源码,如何才能看得下去?
查看>>
智库说 | 徐远:数字时代的城市潜力
查看>>
《JSP极简教程》jsp c:forEach用法
查看>>
WebSocket详解(六):刨根问底WebSocket与Socket的关系
查看>>
用 Go 写一个轻量级的 ssh 批量操作工具
查看>>
网站设计之合理架构CSS 架构CSS
查看>>
D语言/DLang 2.085.1 发布,修复性迭代
查看>>
感觉JVM的默认异常处理不够好,既然不好那我们就自己来处理异常呗!那么如何自己处理异常呢?...
查看>>
Java 基础 之 算数运算符
查看>>
Windows下配置安装Git(二)
查看>>
一个最简单的基于Android SearchView的搜索框
查看>>