Chai 和 Sinon.js：如何测试 JavaScript AJAX 调用
在前端开发中，我们需要确保我们的代码能够正确调用后端 API 并处理返回结果。这就需要我们进行 AJAX 请求的测试。本文将介绍使用 Chai 和 Sinon.js 进行 AJAX 请求测试的方法。
Chai 是一个 JavaScript 测试库，提供了多种断言风格，方便我们编写测试代码。Sinon.js 是一个独立的 JavaScript 测试库，提供了各种工具用于测试 JavaScript 代码。我们将使用这两个库结合进行 AJAX 请求测试。
为了演示这种方法，我们将创建一个简单的 AJAX 请求示例，并使用 Chai 和 Sinon.js 进行测试。
示例代码：
-- -------------------- ---- -------
-- -------
-------- -------- -
------ --- ------------------------- ------- -
--- --- - --- -----------------
--------------- -----
---------- - ---------- -
-- ----------- --- ---- -
----------------------
- ---- -
------------------------------
-
--
----------- - ---------- -
--------------------- ---------
--
-----------
---
-我们的 get() 函数将使用 XMLHttpRequest 发送 GET 请求，并返回一个 Promise，这个 Promise 将在 AJAX 请求返回时被解决。
让我们来编写我们的测试代码：
-- -------------------- ---- -------
-- -------
--- ------ - ------------
--- ----- - ------
---------------- ---------- -
----------- --- -------- --- ---------- ---------- -------------- -
--- --- - ------------------------------
--- -------- - ---
------------ - ------------- -
-------------------
--
---------------------------------------- -
---------------------- ------ --------
-------
---
------------------------ - --------------- ------------ -- ------ --------
--------------
---
---这段代码使用 Sinon.js 来模拟 XMLHttpRequest 对象，从而模拟 AJAX 请求。我们也使用了 Chai 的断言库，它使得测试代码更具可读性。我们创建了一个该测试套件的一个测试，该测试验证如果我们使用正确的 URL 调用 get() 函数，我们能够从服务器返回 “Hello World”的响应。
我们使用了一个类似桩（stub）的概念，检查 requests[0] 对象非常重要，用 respond() 模拟 AJAX 请求的响应。
最后，我们确保在测试完成后恢复我们的模拟 XMLHttpRequest 对象，这样可以避免现有代码出现不必要的干扰。
总结
我们已经学习了使用 Chai 和 Sinon.js 测试 AJAX 请求的方法。我们使用了 Sinon.js 来模拟 AJAX 请求，并创建了一个断言库使用了 Chai 来验证我们的代码。对于那些面向对象的 JavaScript 项目来说，这是一种非常有用的做法，它在一定程度上将测试分离出来，可使您的代码更加健壮和可维护。
这里是一些其他的主题，可以帮助您更好的理解 JavaScript 测试：
- 测试驱动的开发：在为代码编写测试的同时，也为实现代码的过程提供了框架。
- 单元测试：针对代码的最小部件编写测试，找出它们的行为是否按照预期。
- 集成测试：将多个部分组合在一起，确保它们共同工作并按照预期运行。
希望本文能够帮助您更好的理解测试 JavaScript AJAX 请求的方法，并启发您编写更好的测试代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aec3d348841e9894afa32b