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

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

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

第一步：安装 sinon

yarn add sinon --dev

---

第二步：引入 sinon 文件

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

1. 安装 karma-requirejs

 yarn add karma-requirejs requirejs --dev

1. 在 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)
        }
    })
    // 测试完成之后还原 xhr
    after(() => {
        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 路径