React 是一个流行的前端框架，常常用于构建复杂的 Web 应用程序。为了确保应用程序的质量和稳定性，测试是不可或缺的。尤其是在 Redux 状态管理下的 React 应用程序中，测试变得更加重要。在本文中，我们将介绍如何使用 Enzyme 来测试 React Redux 应用程序。
什么是 Enzyme？
Enzyme 是一个 JavaScript 工具，用于测试 React 应用程序。它由 Airbnb 开源，提供了一组用于测试 React 组件的工具。Enzyme 不仅支持浅渲染（Shallow Rendering），还支持深渲染（Full DOM Rendering）和静态渲染（Static Rendering），因此它非常适合用于测试包含 Redux 状态管理的 React 应用程序。
准备工作
为了使用 Enzyme 进行测试，我们需要配置一些必要的环境和依赖项。首先，我们需要安装 Enzyme 和其所需的依赖项，可以使用 npm 命令进行安装：
--- ------- ---------- ------ -----------------------
接下来，我们需要为 Enzyme 配置适当的 Adapter。在 React 16 版本之前，我们需要使用 enzyme-react-15-adapter；在 React 16 版本及以上，我们需要使用 enzyme-adapter-react-16。在本文中，我们将使用 React 16，因此我们需要安装 enzyme-adapter-react-16：
--- ------- ---------- -----------------------
在测试代码中，我们需要引入 Enzyme 和 Adapter，并配置 Adapter。我们可以在存放测试代码的文件中添加以下代码：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
这些准备工作已经完成，接下来我们将开始编写测试代码。
测试 Redux 的 mapStateToProps
在使用 Redux 状态管理的 React 应用程序中，我们通常使用 connect 函数将组件与 Redux Store 连接起来。在这种情况下，我们需要测试 mapStateToProps 函数是否正确地将 Redux Store 中的状态映射到组件的 props 中。
以下是一个简单的组件 Counter，它使用 connect 函数将组件与 Redux Store 连接起来：
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- ------- --------------- -
-------- -
------ -
-----
--------- ----------------------
------- -------------------------------------------------
------- -------------------------------------------------
------
--
-
-
----- --------------- - ----- -- -
------ -
------ -----------
--
--
----- ------------------ - -------- -- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
--
--
------ ------- ------------------------ -----------------------------我们可以使用 Enzyme 的 shallow 函数创建一个浅渲染的组件实例，并使用 find 函数找到组件中的元素，并使用 prop 函数获取元素的属性值：
------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------- ---- ------------ ------------- --------- ------ ------ ---- ------- ----- -------- -- -- - ----- ------- - ---------------- ---- ----- ----- - ------------------------- ----------------------------- ---- ---
这个测试用例测试 Counter 组件是否能够正确地渲染。我们没有传递 props，因此默认情况下，count 的值为 0。我们使用 Enzyme 的 find 函数查找 p 元素，并使用 text 函数获取元素的文本。我们使用 expect 函数断言 count 是否等于 'Count: 0'。
我们还可以编写一个测试用例来测试 mapStateToProps 函数是否正确。我们可以创建一个简单的 Redux Store，并将其传递给组件：
------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------- ---- ------------ ----- --------- - - ------ -- -- ----- ----- - ------ - --- -- - ----- ------- - ---------------- ------------- ---- ----- --------- - -------------------------- ------ - -------- --------- -- -- ------------- --------- ------ ------ ---- ----- ------ ---- ----- ------- -- -- - ----- - --------- - - ----------------- ----- ----- - ---------------- ----------------------------- ---
在这个测试用例中，我们使用 setup 函数来创建组件实例。首先，我们使用 Enzyme 的 shallow 函数创建一个浅渲染的组件实例，并传递一个空的对象作为 props。然后，我们使用 dive 函数将浅渲染的组件实例转换为其子组件实例（即 Counter 组件），并使用 instance 函数获取组件实例。接下来，我们使用 props 函数获取组件的 props，并使用 expect 函数断言 count 的值是否等于 10。
测试 Redux 的 mapDispatchToProps
mapDispatchToProps 函数用于将 dispatch 函数映射到组件的 props 中。我们可以使用 Enzyme 来测试 mapDispatchToProps 函数是否正确。
以下是 Counter 组件重新编写的 mapDispatchToProps 函数：
----- ------------------ - -------- -- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
------ -- -- ---------- ----- ------- --
--
--我们可以通过 Enzyme 的 instance 函数获取组件实例，并使用 mock 函数来模拟 dispatch 函数，然后使用 simulate 函数来模拟用户操作：
------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------- ---- ------------ ----- ----- - -- -- - ----- ------------ - ---------- ----- ------- - ---------------- ------------------------ ------------------------ -------------------- ---- ----- --------- - ------------------- ------ - -------- ---------- ------------ -- -- ------------- --------- ------ -------- --------- -- -- - ----- - ---------- ------------ - - -------- ---------------------------- ---------------------------- ------------------------ ---------------------------------------------- ---
在这个测试用例中，我们使用 setup 函数来创建组件实例，以及 mockDispatch 函数来模拟 dispatch 函数。我们使用 Enzyme 的 shallow 函数创建一个浅渲染的组件实例，并将 mockDispatch 函数传递给组件的 props。然后，我们获取组件实例，并使用 instance 函数获取组件实例。接下来，我们使用 props 函数获取组件的 props，并使用 mockDispatch 函数来模拟 dispatch 函数。最后，我们使用 expect 函数断言 mockDispatch 函数是否被正确地调用了 3 次。
结论
Enzyme 是一个非常有用的工具，可以帮助我们轻松地测试 React Redux 应用程序。通过使用 Enzyme，我们可以测试组件的渲染、属性、状态和事件等方面，从而确保应用程序的质量和稳定性。
在本文中，我们介绍了如何使用 Enzyme 来测试 Redux 的 mapStateToProps 和 mapDispatchToProps 函数。当然，Enzyme 还支持测试组件的生命周期、渲染和交互等方面，我们可以根据需要进行测试。希望本文可以对你在测试 React Redux 应用程序时提供帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671cac639babaf620fb1e121