JavaScript 是一门动态语言，支持异步编程。而异步编程则意味着代码的执行顺序不一定按照代码编写的顺序执行。这为我们编写健壮的 JavaScript 程序带来了挑战。Mocha 和 Sinon 是目前较为流行的 JavaScript 测试框架。本文将重点介绍使用 Mocha 和 Sinon 进行 JavaScript 异步代码测试的实践。
什么是 Mocha？
Mocha 是 JavaScript 的一种测试框架，用于编写简单而灵活的单元测试。它提供了丰富的 API，能够支持异步测试，使用各种断言库及测试报告的生成等功能。Mocha 既可以在 Node.js 环境下使用，也可以在浏览器中直接测试。
什么是 Sinon？
Sinon 是一个 JavaScript 的独立测试工具，用于创建可用于测试的存根、模拟和间谍。Sinon 可以模拟浏览器环境，使得我们可以在 Node.js 或浏览器环境下测试异步代码及事件驱动的代码。
使用 Mocha 和 Sinon 的实践
在深入探讨如何使用 Mocha 和 Sinon 进行 JavaScript 异步代码测试前，我们先来回顾 JavaScript 的异步编程概念。在 JavaScript 中，常见的异步编程方式有以下几种：
- 回调函数
- Promise
- async/await
我们将会在下面的示例中讲解使用 Mocha 和 Sinon 框架的异步测试方法。
回调函数的异步测试实践
回调函数是 JavaScript 异步编程中最常见的方式。正如它的名字所表示的，一个回调函数就是在其他函数“回调”时执行的函数。回调函数通常在异步执行完成后被调用。
现在我们来考虑一个简单的“平方数”函数，在异步计算完成后返回所计算得的数值：
-- -------------------- ---- -------
-------- ---------------- ----------
------------- -- -
--------- ----------------
------------ --------------- ---- --------- ------ -------------
-------
-
----- ------ - --- - ----
-------------- --------
-- -----
-这个函数有两个参数。第一个参数是计算的数值，第二个参数是一个回调函数。当计算完成并获得结果时，该回调函数将被调用。这是一个使用 Callback 进行的异步代码测试的实战示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ------------
----- ----- - -----------------
-----------------------
----------------------- -----------
----------------------
---------- - ----------------------
------------- - ------------
-------------- ---------------
---------------------
---
---------------------
---------------------
---
---------- ---- -------- -------- ---- -------- -----------
----------------------------------------------------
---
---------- --- ---- -------- -------- ---- ------ ---- ---------- ---------- -----------
------------------ ---------------
----------------------------------- --------------- ---- --------- ------ -------------------------
---
---在此示例中，我们使用了 Mocha 的 beforeEach 和 afterEach 钩子函数。它们分别在每个测试之前和之后执行，用于设置和清理测试。
我们还使用了 sinon.useFakeTimers() 来控制时间，确保我们在测试中执行异步操作。此外，我们还使用了 sinon.spy() 来检查回调函数是否被调用。作为一个测试的最后一步，我们使用 expect() 函数来断言回调函数的预期行为。
Promise 的异步测试实践
Promise 是 JavaScript 中的另一种异步编程方式。它可以在异步操作成功或失败时返回一个值或错误。
我们拿一个简单的异步 add 函数来作为示例：
-- -------------------- ---- -------
-------- ----------- -- -
------ --- ------------------------- ------- -
--------------------- -
--------- ------------ -- ------ --------------
---------- ---------------- ---- -- -----------
-------
-
--------- - ---
-- -----
---
-这个函数以两个参数 a 和 b 作为输入，并返回一个 Promise 对象，它在异步操作完成时将一个数字返回。
下面是使用 Mocha 和 Sinon 进行的异步测试实例：
-- -------------------- ---- -------
-------------------- -----------
----------------------
---------- - ----------------------
------------ - ----------- ---
------------ - ------------
------------- - ------------
--------------------------------
----------------------------------
---------------------
---
---------------------
---------------------
---
---------- ------- --- ------- ---- --- ------- ------- -----------
----------------------------------------------
---
---------- --- ------- --- ------- ---- --------- ----------- -----------
------------ - ------------- -----
--------------------- -- ----
---------------------------------------------------
---
---在此示例中，我们使用了 Mocha 的 beforeEach 和 afterEach 钩子函数，使用 sinon.useFakeTimers 控制时间，确保我们在测试中执行异步操作。我们还使用了 sinon.spy 来检查 Promise 对象是否被正确调用。
无论 Promise.resolve() 或 Promise.reject() 是否被调用，都应该调用 this.catchSpy，我们使用 expect 断言来检查是否捕获到了错误。
async/await 的异步测试实践
async/await 是 ES7 中引入的语法糖，用于更简便地编写异步代码。async 函数是函数定义前加上 async 关键字的函数。await 关键字则可以在异步操作上异步等待异步操作完成。下面我们举例介绍如何编写采用 async/await 编写的异步代码和异步测试实现：
-- -------------------- ---- -------
----- -------- ----------- -- -
------ --- ------------------------- ------- -
--------------------- -
--------- ------------ -- ------ --------------
---------- ---------------- ---- -- -----------
-------
-
--------- - ---
-- -----
---
-这是一个使用了 async/await 进行的异步测试的示例：
-- -------------------- ---- -------
-------------------- -----------
---------------- -----------
---------- - ----------------------
------------ - ----------- ---
------------- - ------------
------------ - ------------- -
----------------
-
----------------------------------------------------
----- --------------------------
---
---------------------
---------------------
---
---------- ------- --- ------- ---- --- ------- ------- ----- -----------
------------ --------------------------
---
---------- --- ------- --- ------- ---- --------- ----------- ----- -----------
------------ - ------------- -----
-- -
----- ---------------------- -- ----
- ----- -----------------------
---------------------------------------------
---
---在此实例中，使用 sinon.useFakeTimers 控制时间，确保我们在测试中执行异步操作。我们使用了 async/await 异步等待执行，使用 sinon.spy 来检查异步函数是否被正确调用。
我们在异步等待 this.promise.catch(err => {})，以确保我们捕获了错误并调用了回调函数中的捕获部分。
总结
使用 Mocha 和 Sinon 进行 JavaScript 异步代码的测试可以帮助我们更有效地测试异步代码。在使用时，我们应该将异步操作视为一个整体，并使用适当的方式等待它的执行完成。在测试过程中，我们可以使用 sinon.spy() 来检查代码的行为是否符合预期，并使用 expect() 来作为结果的断言。
我们应当谨慎处理 JavaScript 的异步代码，避免发生不必要的错误。只有正确地测试我们的代码才能保证其正确性，并确保最终的用户体验。（文末）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ddf672f6b2d6eab3942a48