Enzyme 是一个经典的 React 测试工具，可以优雅、简单地测试 React 组件。Enzyme 是由 Airbnb 开发的，主要特点是易于使用、灵活、强大，能够帮助我们完成各种测试需求。本文将着重介绍如何使用 Enzyme 测试容器组件。
什么是容器组件
在 Redux 中，容器组件是用来将 Redux Store 和 React 组件连接起来的组件，负责管理数据流，以及处理业务逻辑。我们可以把容器组件看成是一个充满了状态和逻辑的组件，而且它们通常不负责渲染 UI。相对地，我们把那些只负责渲染 UI 的组件称作展示组件。
为什么要测试容器组件
相对于展示组件，容器组件的测试可能更加复杂和困难，比如我们需要创建一个 Redux Store，然后将 Store 和组件连接起来，同时还需要模拟异步数据流或用户行为等。因此，我们有必要了解如何使用 Enzyme 测试容器组件。
如何使用 Enzyme 测试容器组件
在这里，我们使用 React、Redux、Enzyme 和 Jest 组合的技术栈来测试容器组件。为了测试我们的容器组件，我们需要准备一个 Redux Store，然后使用 Enzyme 测试工具来测试我们的组件。
安装 Enzyme 和相关工具
在开始测试我们的组件之前，我们需要先安装 Enzyme 和相关工具，包括 enzyme、enzyme-adapter-react-16、enzyme-to-json、redux-mock-store 和 react-redux。
npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json redux-mock-store react-redux
配置 Enzyme Adapter
在使用 Enzyme 时，我们需要根据我们的 React 版本来配置 Enzyme Adapter。比如，在我们的项目中，我们使用的是 React 16。因此，我们需要配置 Enzyme Adapter，以便让它能够正常工作。
在我们的测试文件中，我们可以这样配置 Enzyme Adapter。
// setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });编写测试用例
在编写我们的测试用例之前，我们需要先定义我们的测试目标。本文中，我们以一个简单的示例组件 Counter 为例，介绍如何使用 Enzyme 测试容器组件。
Counter 组件
我们假设 Counter 组件是一个简单的容器组件，它连接了 Redux Store，并通过按钮来实现自增或自减操作。Counter 组件的代码如下：
-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- - ----- -- -
----- - ------ ---------- --------- - - ------
------ -
-----
--------- -----------
------- ------------------------------
------- ------------------------------
------
--
--
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
---
------ ------- ------------------------ -----------------------------测试 Counter 组件
我们可以通过模拟 Redux Store，并使用 Enzyme 来测试 Counter 组件是否能够正确的获取 Store 中的状态，并且能够正确的进行自增或自减操作。
-- -------------------- ---- -------
-- ---------------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ------------------ ---- -------------------
------ - ----- - ---- ---------
------ ------- ---- ------------
----- --------- - ---------------------
----------------- ----------- -- -- -
--- ------ --------
------------- -- -
----- - ----------- ------ - ---
------- - ------
--------- --------------
-------- --
-----------
--
---
------------ -- -
------------------
---
---------- ------ ------- ----------- -- -- -
------------------------------------------------
---
---------- ------- ------- ----- ------- -- -- -
------------------------------------------------ ----
---
---------- ------ --------- ------ ------- -- -- -
----- ------------ - -----------------------------
-------------------------------
----- ------- - -------------------
-------------------------- ----- ----------- ----
---
---------- ------ --------- ------ ------- -- -- -
----- ------------ - -----------------------------
-------------------------------
----- ------- - -------------------
-------------------------- ----- ----------- ----
---
---运行测试
最后，我们可以运行测试命令并查看测试结果了。
npm run test
如果所有的测试都通过了，表示我们成功地使用 Enzyme 测试了容器组件的功能。我们可以使用这个技术栈来测试我们的其他容器组件，并保证它们能够正常工作。
小结
在本文中，我们学习了如何使用 Enzyme 测试容器组件。我们通过一个简单的示例来介绍了如何配置 Enzyme、如何模拟 Redux Store 和如何使用 Enzyme 来测试我们的组件。希望本文能对您有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6783236a935627c9002ad93c