React 是一种流行的前端框架，它被广泛使用于 Web 应用程序的开发中。随着应用程序越来越复杂，使用 Redux 管理应用程序的状态已经成为标准做法。在进行 React 和 Redux 开发的过程中，我们需要通过测试来保证代码质量并避免潜在问题。为了在组件渲染时测试 Redux 状态，我们可以使用 React 测试工具库 Enzyme。在这篇文章中，我们将介绍如何在 Enzyme 中测试 React 组件和 Redux，以确保代码质量和 Redux 状态的正确性。
安装 Enzyme 和 Redux-Mock-Store
在开始之前，需要安装 Enzyme 和 Redux-Mock-Store。
npm install --save-dev enzyme redux-mock-store
Enzyme 是一个 React 测试工具库，它可以帮助我们快速、轻松地测试组件。Redux-Mock-Store 是一个用于帮助我们测试 Redux 的工具库。
测试组件
在我们开始编写测试之前，首先需要编写一个需要测试的组件。在这个例子中，我们将编写一个名为 Counter 的计数器组件。这个组件将使用 Redux 存储状态，并根据用户的输入增加或减少计数器的值。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------------- ---------------- - ---- ------------
----- ------- - -- ------------- ---------- --------- -- -- -
-----
------------- ------ ---------------------
------- --------------------------------------
------- --------------------------------------
------
--
----- --------------- - ----- -- --
------------- -------------------
---
----- ------------------ - -
---------- -----------------
---------- -----------------
--
------ ------- --------
----------------
-------------------
-----------在这个组件中，我们通过 connect 方法将组件与 Redux 连接，使用 mapStateToProps 方法来获取 Redux 状态，并使用 mapDispatchToProps 方法来绑定我们的 action。
编写测试
在编写测试之前，我们需要先初始化 Redux 状态和 store。
import { createStore } from 'redux';
import rootReducer from './reducers';
const initialState = {
counterValue: 0,
};
const store = createStore(rootReducer, initialState);我们通过 createStore 方法创建 store，并将我们的 rootReducer 与 initialState 传递给它。
现在我们可以开始编写我们的测试了。我们将测试 Counter 组件是否正确地渲染两个按钮。
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ --- --------- -- -- -
----- ------- - ------
--------- --------------
-------- --
------------
--
-----------------------------------------------
---
---在这个测试中，我们使用了 Enzyme 的 mount 方法，这个方法可以完全渲染组件并返回一个包含所有子组件和 DOM 元素的 wrapper 对象。接着我们使用 find 方法查找所有按钮，并使用 toHaveLength 来断言有两个按钮被正确渲染。
我们还可以测试组件的 Redux 状态。在这个例子中，我们将测试组件的状态是否正确表示。
-- -------------------- ---- -------
------------------- -- -- -
---------- ------- --- ------- ------- ------- -- -- -
----- ------- - ------
--------- --------------
-------- --
------------
--
---------------------------------------------------- ------ ----
---
---在这个测试中，我们通过 find 方法查找包含计数器值的 span 元素，并使用 text 方法获取其文本内容。接着我们测试这个文本内容是否等于 'Counter Value: 0'，这是我们初始化的 Redux 状态的初始值。
我们还可以测试组件的事件处理程序。在这个例子中，我们将测试用户单击增加按钮后，计数器是否增加了。我们还需要模拟单击行为来测试事件处理程序。
-- -------------------- ---- -------
------------------- -- -- -
---------- --------- --- ------- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------- - ------
--------- --------------
-------- --
------------
--
----- --------------- - -----------------------------
----------------------------------
---------------------------------------------------- ------ ----
---
---在这个测试中，我们使用 at 方法查找第一个按钮，这就是我们的增加按钮。接着，我们使用 simulate 方法模拟用户单击事件。最后，我们测试计数器的值是否成功增加。
我们还可以测试状态的更新是否会引起组件的重新渲染。
-- -------------------- ---- -------
------------------- -- -- -
---------- --------- --- --------- ---- --- ------- ----- -- --------- -- -- -
----- ------- - ------
--------- --------------
-------- --
------------
--
----- --- - ------------------------------ ----------
-----------------------------------
-------------------------------
------------------
---
---在这个测试中，我们使用 jest.spyOn 方法来监听组件的渲染方法是否被调用。接着，我们使用 dispatch 方法来调用我们的 incrementCounter action，以更新我们的 Redux 状态。最后，我们测试 render 方法是否被调用，并使用 Enzyme 的 unmount 方法卸载组件。
总结
在这篇文章中，我们已经介绍了如何使用 Enzyme 测试 React 组件与 Redux 的结合使用。我们首先展示了如何创建一个 Counter 组件，它使用 Redux 存储状态，并具有增加和减少计数器值的功能。接着我们使用 Enzyme 和 Redux-Mock-Store 来测试组件的渲染、Redux 状态和事件处理程序。这些测试可以让我们更好地维护和测试我们的组件，并确保代码质量和 Redux 状态的正确性。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------------- ---------------- - ---- ------------
----- ------- - -- ------------- ---------- --------- -- -- -
-----
------------- ------ ---------------------
------- --------------------------------------
------- --------------------------------------
------
--
----- --------------- - ----- -- --
------------- -------------------
---
----- ------------------ - -
---------- -----------------
---------- -----------------
--
------ ------- --------
----------------
-------------------
-----------import { createStore } from 'redux';
import rootReducer from './reducers';
const initialState = {
counterValue: 0,
};
const store = createStore(rootReducer, initialState);-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ --- --------- -- -- -
----- ------- - ------
--------- --------------
-------- --
------------
--
-----------------------------------------------
---
---------- ------- --- ------- ------- ------- -- -- -
----- ------- - ------
--------- --------------
-------- --
------------
--
---------------------------------------------------- ------ ----
---
---------- --------- --- ------- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------- - ------
--------- --------------
-------- --
------------
--
----- --------------- - -----------------------------
----------------------------------
---------------------------------------------------- ------ ----
---
---------- --------- --- --------- ---- --- ------- ----- -- --------- -- -- -
----- ------- - ------
--------- --------------
-------- --
------------
--
----- --- - ------------------------------ ----------
-----------------------------------
-------------------------------
------------------
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64767932968c7c53b03324f6