React 是当下流行的前端开发框架之一，其组件化的开发方式让开发人员能够更加高效地创建复杂的用户界面。但是，在组件中涉及到异步请求时，如何进行测试呢？本文将介绍如何使用 Enzyme 和 Jest 测试 React 组件中的异步请求，让你可以更自信地进行前端开发。
Enzyme 和 Jest 简介
Enzyme 是 React 的一个测试工具库，它提供了一系列 API，方便我们进行 React 组件的断言、模拟用户交互，以及找到组件的 DOM 节点等。而 Jest 则是一个 Facebook 推出的 JavaScript 测试框架，它集成了测试运行器、断言库、覆盖率统计等多种功能，能让我们更轻松地进行单元测试、集成测试等。
异步请求测试的挑战
在测试中，我们要保证每次运行时得到相同的结果，这在处理异步请求时会变得非常困难。异步请求的结果无法像同步代码那样被确保顺序，所以我们需要使用一些技巧来解决这个问题。
Enzyme 和 Jest 测试异步请求的流程
为了更好地说明测试的流程，我们在这里以一个简单的异步请求组件为例进行讲解：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------
----- -------------- ------- --------- -
----- - -
----- -----
--
------------------- -
---------------------
-------------- -- ----------------
---------- -- --------------- ---- ----
-
-------- -
----- - ---- - - -----------
------ -
-----
----- - -
----
-------------- -- -
--- ------------------------------
---
-----
- - -
-----------------
--
------
--
-
-
------------------------ - -
---- ----------------------------
--
------ ------- ---------------上面这个组件会通过 fetch 方法发送异步请求，并在请求成功后更新组件的状态，从而显示一些数据。接下来，我们将通过以下步骤测试这个组件中的异步请求：
1. 引入 Enzyme 和 Jest
我们需要先安装 Enzyme 和 Jest，使用以下命令：
npm install --save-dev enzyme jest enzyme-adapter-react-16
2. 创建测试文件
我们需要创建 AsyncComponent.test.js 文件来进行测试。
3. 设置 Enzyme 的适配器
我们需要在测试文件中引入 Enzyme，并设置其适配器：
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });4. 编写测试
一般来说，我们会编写几个测试用例，检验组件在不同情况下的正确性。
首先，我们需要编写一个测试用例，检查组件是否正确地判断加载状态：
it('should render "Loading..." when data is not ready', () => {
const wrapper = shallow(<AsyncComponent url="http://api.example.com" />);
expect(wrapper.find('p').text()).toEqual('Loading...');
});然后，我们需要写一个测试用例，验证组件在收到数据后是否能够正确地渲染：
it('should render the fetched data', done => {
const wrapper = mount(<AsyncComponent url="http://api.example.com" />);
setTimeout(() => {
wrapper.update();
expect(wrapper.find('ul').children()).toHaveLength(3);
done();
});
});上面两个测试用例中，第一个用例检查是否能正确地渲染 "Loading..." 文本，而第二个用例则是检查异步请求是否正确，并且是否能在请求数据后渲染正确的 DOM 部分。我们可以注意到，在第二个测试用例中，我们使用了 setTimeout 函数来处理异步请求，同时调用 done() 函数以通知测试框架我们已经结束了异步测试。最后，我们需要使用 wrapper.update() 方法来更新组件。
结论
在使用 Enzyme 和 Jest 进行测试时，我们需要注意异步请求所带来的各种挑战，并且使用 setTimeout 和 done 等方法处理异步请求，以保证测试的正确性。希望本文能够帮助大家提高前端开发的测试能力，以便更加自信地构建出高质量的前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6718bb62ad1e889fe22decc6