在开发 React 组件时，我们经常需要进行单元测试。而当一个组件依赖于返回数据的 API，我们需要 mock 掉这个请求以保证测试的可靠性。
在前端使用 fetch API 进行请求时，我们可以使用 fetch-mock 库来模拟请求，它可以在全局范围内覆盖 fetch 和 fetch.Request 对象，从而拦截所有请求。
接下来，我们将介绍如何在测试 React 组件时，mock 掉 API 请求，以及如何使用 Mocha 进行测试。
安装和设置 fetch-mock
安装 fetch-mock：
npm install fetch-mock --save-dev
假设我们有一个组件 MyComponent，它会向服务器请求数据，并将其渲染到页面上。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ------- -------- ------------- -
----- ------ -------- - -------------
------------ -- -
------------------
-------------- -- ----------------
---------- -- --------------
------------ -- ----------------------
-- ----
------ -
-----
-------------------
-------------------------
------
--
-我们可以为此组件编写一个测试用例，以确保它能够成功获取数据并渲染。
-- -------------------- ---- -------
------ - ------- ------ - ---- -------------------------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ------ ----- -- -- -
------------------- ----
----- ----- - ----- ---------------------------
----- ----------- - ----- ---------------------------------
----------------------------------
----------------------------------------
---
---我们将使用 fetch-mock 来拦截 fetch('/api/data') 请求，并返回模拟数据。
在测试之前，我们需要在 global 对象上设置 fetch-mock：
-- -------------------- ---- -------
----- --------- - ----------------------
------------ - ----------------------
----------------- -
--------------------------- -
------ --------
------------ -------------
---
---
---------------- -
--------------------
---上述代码模拟了 /api/data 的请求并返回 {title: 'Title', description: 'Description'} 对象。这个钩子函数会在所有测试用例之前执行，保证我们所有的测试都使用了 mock 对象进行请求。
测试 MyComponent
重新运行测试，我们可以看到测试用例已经通过了。
PASS components/MyComponent.test.js
MyComponent
✓ should render data (42 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total结论
通过使用 fetch-mock，我们可以轻松地 mock 掉 API 请求，从而使 React 组件的测试更加可靠，减少因为外部依赖而导致的测试失败。
同时，我们也了解了如何使用 Mocha 进行测试，并在测试用例之前/之后进行必要的全局设置/清理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f6b31cc5c563ced58b65b1