在 React 开发中，我们经常需要使用 fetch 来获取数据。但是在测试中，我们不希望实际发起请求，而是希望模拟请求的返回结果。这时候，Enzyme 就可以帮助我们实现这个目标。
Enzyme 简介
Enzyme 是一个 React 组件测试工具，它提供了一些 API 来方便地测试 React 组件的行为和状态。Enzyme 支持三种渲染方式：浅渲染、完全渲染和静态渲染。其中，浅渲染只渲染当前组件，不渲染子组件；完全渲染会递归渲染子组件；静态渲染则不会渲染组件，只会返回组件的静态 HTML。
模拟 fetch 请求
在 React 组件中，我们通常会使用 fetch 或 axios 等工具来获取数据。为了避免实际发起请求，我们可以使用 Enzyme 提供的 mock 函数来模拟 fetch 请求。
下面是一个示例代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ---------- -
----- ------- --------- - -------------
------------ -- -
-------------------
--------- -- -----------
---------- -- ----------------
-- ----
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
------ ------- ---------这是一个获取用户列表的组件，它会在组件挂载时发起 fetch 请求，并将返回的用户列表渲染到页面上。现在我们来看一下如何使用 Enzyme 模拟这个请求。
首先，我们需要安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
然后，在测试文件中引入 Enzyme：
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });接下来，我们可以使用 Enzyme 提供的 mock 函数来模拟 fetch 请求。具体做法是在测试文件中定义一个 mock 函数，并将它传递给 global.fetch：
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }])
})
);这个 mock 函数会返回一个 Promise，它的 json 方法会返回一个包含两个用户的数组。现在我们可以测试组件是否能够正确地渲染用户列表：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
------------- -- -
------------ - ---------- --
-----------------
----- -- -- ------------------ --- -- ----- ------- -- - --- -- ----- ----- ---
--
--
---
----------- - ---- -- ------- ----- -- -- -
----- ------- - ----------------- ----
----- --- --------------- -- -----------------------
-------------------------------------------
---------------------------------------------------------
-------------------------------------------------------
---
---在测试中，我们先定义了一个 beforeEach 函数，在每个测试之前都会执行。这个函数会定义一个 mock 函数，并将它传递给 global.fetch。然后，我们使用 Enzyme 的 shallow 函数来渲染组件，并等待 Promise 返回。最后，我们可以使用 Enzyme 的 find 函数来查找渲染出来的 li 元素，并测试它们的文本内容是否正确。
总结
Enzyme 是一个非常实用的 React 组件测试工具，它提供了一些方便的 API 来测试组件的行为和状态。在测试中，我们可以使用 Enzyme 的 mock 函数来模拟 fetch 请求，避免实际发起请求。希望本文能够帮助你更好地理解 Enzyme 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6586e82cd2f5e1655d136a52