React 和 Redux 是现代前端开发中常用的两个技术，它们可以极大地提高开发效率和应用程序的可维护性。但是同时使用它们构建的组件的测试也是不可避免的，因为在代码随着开发的进行不断变化的情况下，保证组件的正确性是至关重要的。本文将介绍如何在 Enzyme 中测试 React 中使用 Redux 的组件。
Enzyme 简介
Enzyme 是 Airbnb 开源的用于测试 React 组件的 JavaScript 工具库。它提供了很多 API，可用于方便地创建和操作 React 组件，以简单而直观的方式编写测试。
测试 Redux 应用程序的组件
Redux 是一个预测性的状态管理库，它使开发人员能够更加可靠地维护应用程序状态。在测试 Redux 组件时，需要模拟应用程序状态的变化。
首先，我们需要使用 Enzyme 中的 mount 方法将组件挂载到 DOM 上，然后创建一个 Redux store 对象，并将它作为 prop 传递给组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----- - ---- ---------
------ -------------- ---- -------------------
------ ----------- ---- ----------------
----------------------- -- -- -
----- --------- - -------------------
--- ------
------------- -- -
----- - -----------
-- ------
---
---
---------- ------ ----------- -- -- -
----- ------- - ------
--------- --------------
------------ --
------------
--
----------------------------------
---
---然后可以使用 Enzyme 的 simulate 方法模拟组件中传入的事件，以测试组件中 Redux action 和 reducer 的正确性。
-- -------------------- ---- -------
---------- -------- -- ------ -- ------ ------- -- -- -
----- ------- - ------
--------- --------------
------------ --
------------
--
----- ------ - ---------------------------
-------------------------
----- ------- - -------------------
-------------------------- ----- ------------- ----
---上述测试将在按钮点击时检查是否触发了一个名为 SOME_ACTION 的 Redux action。
测试 Redux 内部的组件
在测试 Redux 内部的组件时，需要 Mock React 组件的 connect 方法来使其脱离 Redux store，这样可以更方便地编写测试代码。
下面演示了如何使用 react-redux 提供的 mockStore 方法模拟 Redux store。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------------- ---- -------------------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------
----------------------- -- -- -
----- --------- - -------------------
--- ------
------------- -- -
----- - -----------
-- ------
---
---
---------- ------ ----------- -- -- -
----- ------- - ------
--------- --------------
------------ --
------------
--
----------------------------------
---
---------- ------ ------ ----- ----------- -- -- -
----- ----- - -
--------- ----------
--
----- ------- - ------------------ ---------- ----
----- ------ - ---------------------------
-------------------------
---------------------------------------------
----- --------------
---
---
---使用这种方法，我们可以更容易地测试 Redux 组件，并分离 Redux store 中的组件逻辑，以便更好地进行单元测试。
结论
本文介绍了如何使用 Enzyme 的 API 测试 React 中使用 Redux 的组件，包括如何在组件中模拟 Redux store 和在 Enzyme 中 Mock React 组件的 connect 方法。
如何在 Enzyme 中测试 React 中使用 Redux 的组件？我们已经告诉你，希望本文可以帮助你更好地理解如何测试 React 中的 Redux 应用程序组件。在实践中，我们还需要适当地选择测试和 Mock Redux 应用程序中的各个部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671f52da2e7021665efd0279