如何 mock API 调用以进行 Enzyme 测试
Enzyme 是一个非常流行的 React 测试工具，它提供了一系列 API 来帮助我们测试 React 组件。但是，在测试组件时，我们经常需要调用后端 API 来获取数据。这会导致测试变得非常依赖网络和后端服务，因此我们需要 mock API 调用以进行 Enzyme 测试。
本文将介绍如何使用 Jest 和 Enzyme 来 mock API 调用，以便更轻松地进行单元测试。
- 安装依赖
首先，我们需要安装一些依赖项：
- jest-mock：一个用于创建 Jest mock 函数的库。
- axios-mock-adapter：一个用于 mock Axios 请求的库。
--- ------- ---------- --------- ------------------
- 创建 mock API
我们将使用 axios-mock-adapter 来 mock API 调用。我们可以创建一个名为 mockAxios 的模块，该模块将导出一个已经配置好的 AxiosMockAdapter 实例，并且可以使用一些预定义的响应数据来 mock API 调用。
-- ------------ ------ ----- ---- -------- ------ ----------- ---- --------------------- ----- --------- - --- ------------------- ----------------------------------------- - --- -- ----- ----- ----- --- ------ ------- ----------
在这个例子中，我们 mock 了一个 GET 请求，它的 URL 是 /api/user/1，返回的数据是一个对象，包含 id 和 name 两个属性。
- 使用 mock API 进行测试
现在，我们可以使用 mockAxios 模块来 mock API 调用，并在测试中使用它。
-- -------------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- --------------
------ ----------- ---- ----------------
----------------------- -- -- -
------------ -- -
------------------
---
---------- ------ ---- ------ ----- -- -- -
----------------------------------------- -
--- --
----- ----- -----
---
----- ------- - -------------------- ---------- ----
----- ---------------------------------------
-------------------------------------- ------
---
---------- ------ --- ------- ----- -- -- -
------------------------------------------
----- ------- - -------------------- ---------- ----
----- ---------------------------------------
------------------------------------------
---
---在这个例子中，我们使用 mockAxios 模块来 mock API 调用，并使用 Jest 的 async/await 语法来等待 API 响应。我们还测试了两种情况：正常响应和错误响应。
- 总结
本文介绍了如何使用 Jest 和 Enzyme 来 mock API 调用，以便更轻松地进行单元测试。我们创建了一个名为 mockAxios 的模块来 mock API 调用，并在测试中使用它。这种方法可以帮助我们更轻松地测试 React 组件，而不必依赖网络和后端服务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66010facd10417a222c38e4f