使用karma + mocha + sinon 测试 Ajax 请求

在用 karma + mocha 进行 JS 代码测试的时候，难免会遇到要测试 Ajax 发请求的情况。然后查找一下网上的资料，发现可以使用 sinon 来进行造假：）。下面来进行详细讲解：

第一步：安装 sinon

yarn add sinon --dev

第二步：引入 sinon 文件

引入 sinon 文件有很多种方式，我在这里使用的是：利用 karma-requirejs 包，进行引用。

安装 karma-requirejs

 yarn add karma-requirejs requirejs --dev

在 karma.conf.js 文件中修改 files 属性

 files: ['../src/xx.js', // 此处为要测试的源文件'../node_modules/chai/chai.js', // 引入 chai '../node_modules/sinon/pkg/sinon.js', // 引入 sinon'./test.js' // 测试用例
],
// 需要注意的是，所有包的引入必须放在用例之前，使用之前要先引入，很容易理解吧 :)

第三步：写测试用例

假设在源文件中有一个 myGet 函数，用来发送 get 请求。然后又有一个 myPost 函数，来发送 post 请求。

describe('验证Ajax请求', () => {// 在测试用例开始之前，初始化一个 fakeXMLHttpRequest// 将其推入到 requests 数组中，方便之后调用before(() => {this.xhr = sinon.useFakeXMLHttpRequest()this.requests = []this.xhr.onCreate = (xhr) => {this.requests.push(xhr)}})// 测试完成之后还原 xhrafter(() => {this.xhr.restore()})it('使用Get方法正确获取Json数据', (done) => {var data = { 'foo': 'bar' }var URL = 'https://jsonplaceholder.typicode.com/comments' // 使用模拟服务器var returnData = JSON.stringify(data)// 调用需要测试的 get 函数，发送一个 get 请求// 在其 success 回调函数中验证获取的数据是否传送的数据myGet(URL, (result) => {expect(result).to.deep.equal(returnData)done() // 不要忘记调用 done ，告诉 mocha 测试用例已完成})// 直接将在每个测试用例之前生成 xhr 的状态码设置为 200， 内容设置为 json 格式，并且将返回数据设置为 returnData。设置完成之后，myGet拿到的数据就为我们设置的数据了。this.requests[0].respond(200, { 'Content-Type': 'text/json' }, returnData)})it('使用POST方法传送JSON数据', () => {var data = { hello: 'world' }var dataJson = JSON.stringify(data)var URL = 'https://jsonplaceholder.typicode.com/posts' // 使用模拟服务器// 使用 mypost 方法发送一个 post 请求，将 data 传送到服务器myPost(URL, data)// xhr 拿到的数据就是刚刚发送的数据expect(this.requests[0].requestBody).to.deep.equal(dataJson)})
})

至此，测试 Ajax 完成。是不是很简单：）
需要说明的一点是，karma 虽然模拟了浏览器环境，但上述代码并没有真的发送网络请求，URL 可以随便写哒。所有模拟发送请求返回的东西，都是我们自己通过 fakeXMLHttpRequest 自己设置的。

karma 如果是全局安装，你安装任何它需要使用的 plugins 都需要进行全局安装。非常麻烦。所以不建议全局安装。不过项目内的安装使用时最好配置 scripts，不然每次运行路径写起来也很头疼。

// package.json
"scripts": {"test": "node .\\node_modules\\karma\\bin\\karma start .\\test\\karma.conf.js"
}
// .\node_modules\karma\bin\karma : 为 karma 路径
// .\test\karma.conf.js : 为 karma config 路径

使用karma + mocha + sinon 测试 Ajax 请求相关推荐

ajax请求node.js_Node.js测试：模拟HTTP请求
ajax请求node.js Writing tests for an application that relies on external services, say, a RESTful API, ...
前端新手使用karma+mocha+chai+sinon 进行angularjs 单元测试
这里只谈如何搭建环境. 选型:在jasmine 和 mocha+chai中间比较了一下,根据项目需要选择了后者. 安装依赖包和环境直接执行下列命令安装或在项目目录下运行npm install(pa ...
前端测试 karma mocha should 都是什么鬼？
测试TDD和BDD的区别 TDD是测试驱动开发,通过用测试用例来规范约束开发者,编写出质量更高的代码 BDD是行为驱动开发,描述行为路径,就像描述故事,产品和前线业务人员可参与到开发流程中,减轻测试和 ...
怎么测试ajax get请求,为什么我的AJAX在运行测试时请求dev中的PUT请求，但请求了GET请求？...
在我的Rails应用程序中,我制作了一个AJAX PUT请求(使用Coffeescript),该请求在我的开发环境中正常工作.当我检查按钮,点击后,会触发使用Firefox的AJAX请求时,它看起来是 ...
搭建 vue2 单元测试环境(karma+mocha+webpack3)
从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一 ...
大前端的自动化工厂（5）—— 基于Karma+Mocha+Chai的单元测试和接口测试
一. 前端自动化测试大多数前端开发者对测试相关的知识是比较缺乏的,一来是开发节奏很快,来不及写,另一方面团队里也配备了"人肉测试机",完全没必要自己来.但随着项目体量的增大,许多 ...
vue-cli自动化测试karma + mocha + chai
最近再为团队团队选择可行的测试方案.前端目前是vue-cli技术栈.试着在vue项目添加测试.把测试完整的方案记录下来. vue官网给的例子用的是karma + mocha + chai. karma ...
为什么ajax请求状态码为0,ajax请求状态码为0的解决办法
原文链接:https://blog.csdn.net/changqing5818/article/details/53932463 前言今天遇到个奇怪的问题,使用JQuery的ajax请求,后台的C ...
关于 x-requested-with 请求头区分ajax请求还是普通请求
今天做Spring MVC异常统一处理这块,在处理的时候需要区分发送过来的请求是传统请求还是ajax请求,网上有现成的代码,我是参考http://www.2cto.com/kf/201412/3643 ...

使用karma + mocha + sinon 测试 Ajax 请求

使用karma + mocha + sinon 测试 Ajax 请求

第一步：安装 sinon

第二步：引入 sinon 文件

第三步：写测试用例

使用karma + mocha + sinon 测试 Ajax 请求相关推荐

最新文章

热门文章