在前端开发中，我们经常需要使用 API 来获取数据或执行操作。对于很多项目来说，API 的效果与开发效率都至关重要。因此，我们需要确保 API 的质量和正确性。为了确保正确性，我们需要使用测试来测试 API 的结果。Jest 是当前非常流行和强大的测试框架之一，它的文档和示例也比较详细。在本文中，我们将介绍如何使用 Jest 测试调用 API 的结果。
环境搭建
前提是你需要已经安装了 Node.js 和 npm。
安装 Jest
打开终端（这里以 macOS 为例），在终端中运行以下命令以全局安装 Jest：
$ npm install --global jest
安装完成后，您应该能在终端中运行 Jest 命令。
创建项目并安装依赖
首先，需要新建一个 Node.js 项目，并安装依赖。在终端中运行以下命令：
$ mkdir jest-demo $ cd jest-demo $ npm init -y $ npm install jest node-fetch --save-dev
在这个示例中，我们使用了 node-fetch 模块来发起 HTTP 请求和获取 API 响应。
使用 Jest 测试调用 API 的结果
接下来，我们将编写测试来测试 API 的响应是否正确。
编写测试
在根目录下创建 index.test.js 文件，并编写以下测试用例：
-- -------------------- ---- -------
----- ----- - ----------------------
----------- ---- ------ ----- -- -- -
----- --- - ----- ------------------------------------------------------
----- ---- - ----- -----------
----------------------
--- --
----- ------- --------
--------- -------
------ --------------------
-------- -
------- ------ -------
------ ----- -----
----- --------------
-------- -------------
---- -
---- -----------
---- ----------
--
--
------ --------------- --------
-------- ----------------
-------- -
----- ------------------
------------ -------------- ------------- ------------
--- -------- --------- -----------
--
---
---该测试用例发起了一个 HTTP GET 请求，请求 URL 是 https://jsonplaceholder.typicode.com/users/1，并检查响应是否与预期一致。如果是，测试就会通过；如果不是，测试就会失败。
运行测试
现在我们已经编写了测试用例，接下来执行 jest 命令以运行测试：
$ jest
如果一切顺利，你应该会看到以下输出：
PASS ./index.test.js ✓ fetch user data (84 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.345 s, estimated 2 s Ran all test suites matching /.\/index.test.js/i.
这意味着测试通过了！
我们还可以通过运行以下命令以实时监视代码的更改和自动运行测试：
$ jest --watch
使用 jest.mock() 模拟 API 响应
在实际开发中，测试 API 调用时，我们并不希望真的访问原始的 API，因为它会使测试变得缓慢、不可预测和不可靠。这是我们希望使用 jest.mock() 函数来模拟 API 响应。
我们可以使用以下方式模拟 API 响应：
-- -------------------- ---- -------
----- ----- - ----------------------
----------- ---- ------ ----- -- -- -
----- --------- - -- --
-----------------
----- -- --
-----------------
--- --
----- ------- --------
--------- -------
------ --------------------
-------- -
------- ------ -------
------ ----- -----
----- --------------
-------- -------------
---- - ---- ----------- ---- --------- --
--
------ --------------- --------
-------- ----------------
-------- -
----- ------------------
------------ -------------- ------------- ------------
--- -------- --------- -----------
--
---
--- -----
---
------------------ ---------------------------------------
----- --- - ----- ------------------------------------------------------
----- ---- - ----- -----------
----------------------------------------------
------------------------------------------
-----------------------------------------------------------------------
--
----------------------
-- ---
---
---------------------------
---该测试用例将 global.fetch 函数 (jest 全局变量) 模拟，因此不会实际触发 HTTP 请求，而是返回一个模拟的响应对象。
使用 jest.fn() 模拟 API 响应
我们还可以使用 jest.fn() 函数来模拟 API 响应。这是一种非常方便和简单的方式。下面是一个示例：
-- -------------------- ---- -------
----- ----- - ----------------------
----------- ---- ------ ----- -- -- -
----- --------------- - -----------------
--- --
----- ------- --------
--------- -------
------ --------------------
-------- -
------- ------ -------
------ ----- -----
----- --------------
-------- -------------
---- - ---- ----------- ---- --------- --
--
------ --------------- --------
-------- ----------------
-------- -
----- ------------------
------------ -------------- ------------- ------------
--- -------- --------- -----------
--
---
----- ---------------- - -----------------
----- -- -- ----------------
--- -----
---
----- --------- - ------------------------------- -- ------------------
------------ - ----------
----- --- - ----- ------------------------------------------------------
----- ---- - ----- -----------
-------------------------------------------
---------------------------------------
-----------------------------------------------------------------------
--
----------------------
-- ---
---
-------------------------
------ -------------
---此示例与前一个示例非常相似，区别在于我们使用了 jest.fn() 函数来模拟 global.fetch()，而不是将其拦截和模拟。
结论
Jest 可以方便地测试前端代码，这里主要介绍了如何使用 Jest 测试调用 API 的结果。我们可以使用 node-fetch 模块来获取 API 响应，并使用 Jest 进行验证。我们还可以使用 jest.mock() 或 jest.fn() 函数来模拟 API 响应。模拟响应通常是测试 API 调用时的最好选择，因为它们是非常快速、稳定和可重复的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67511e88050cf9039c1a8bdf