在前端开发过程中，我们经常会遇到需要模拟服务器数据或者测试异步请求的场景。这时候，一个非常便利的工具就是 sinon，它可以模拟 XMLHttpRequest 和服务器响应等，还可以监控函数调用和返回值等。而 sinon-es6 则是一个 ES6 版本的封装，使用更加简洁高效。本文将介绍如何使用 sinon-es6 进行单元测试和 API Mock。
安装
在终端输入以下命令可以安装 sinon-es6：
npm install --save-dev sinon-es6
基础用法
在编写测试用例之前，我们需要先引入 sinon-es6：
import sinon from 'sinon-es6';
模拟函数
使用 sinon.stub 可以模拟函数，并设置返回值：
const myFunc = sinon.stub().returns('hello');
console.log(myFunc()); // 输出 hello
console.log(myFunc.callCount); // 输出 1myFunc 是一个模拟函数，可以像普通函数一样调用。使用 callCount 可以获取函数调用次数。
模拟异步请求
使用 sinon.useFakeXMLHttpRequest 可以模拟 XMLHttpRequest：
-- -------------------- ---- ------- ------------------------------ ----- --- - --- ----------------- --------------- --------- ----------- ------------------------ -- -- ----------- -- ---- ------------------------------- -------- ----- - --------------- ------------------ -- ------------ ------------ ----------------------- ------------------------ -- -- --- ------------------------------------------ -- -- - -------- ------- -
在第一次调用时，xhr.status 输出 STATUS_NONE 表示还未发送请求。使用 sinon.server.respondWith 可以模拟服务器响应，在调用 sinon.server.respond 后，xhr.status 和 xhr.responseText 将被设置为对应的值。
验证函数调用
使用 sinon.assert 可以方便地验证函数调用情况：
const myFunc = sinon.stub();
myFunc('hello', 'world');
sinon.assert.calledOnce(myFunc);
sinon.assert.calledWith(myFunc, 'hello', 'world');sinon.assert.calledOnce 验证函数只被调用了一次，sinon.assert.calledWith 则验证函数被调用时传递的参数。
API Mock
除了用于测试，sinon-es6 还可以用于模拟后端 API。我们可以模拟 HTTP 请求，返回预设的数据。
express
如果你使用的是 express，可以使用 sinon-express-mock 模拟 API：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ ----- ---- ------------ ------ - -------- ------- - ---- --------------------- ----- --- - ---------- ----------------- ----- ---- -- - ---------- -------- ------- --- --- ----- --- - --------- ------ - ----- - - --- ----- --- - ---------- -------- ----- --------------------------------- -- -- ---- --------------------------------- -------- ------- ---- -- -- ----
通过 mockReq 和 mockRes 创建模拟的请求和响应对象，使用 app 处理请求，之后就可以验证响应情况了。
axios
如果你使用的是 axios，可以使用 sinon-axios 模拟 API：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ------------
------ ---------- ---- --------------
----------------- ------------------------
--------------------------------------- ----- - -------- ------- - ---
-------------------
---------------- -- -
--------------------------- -- -- - -------- ------- -
---使用 sinon.stub 可以模拟 axios，使用 returnsPromise 表示该函数返回 Promise 对象。使用 withArgs 可以指定函数调用时传递的参数，使用 resolves 设置函数返回的 Promise 对象的 resolve 值。
总结
sinon-es6 是一个非常方便的工具，可以用于单元测试和 API Mock，提高代码质量和开发效率。本文介绍了部分基础用法和 API Mock，更多信息可以查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb5d3b5cbfe1ea061147a