前言
随着 React 应用的日益普及，前端开发人员对于组件的正确性验证和测试也变得越来越重视。Redux 作为 React 应用的一种流行数据管理工具，也需要进行测试，以确保其正确运行并不断提高代码质量。本文将介绍如何使用 Enzyme 测试 Redux 应用中的组件，帮助读者轻松掌握 Redux 测试的技巧。
Enzyme 简介
Enzyme 是一款 React 组件测试工具，由 Airbnb 开发和维护。它具有易用性和高效性等特点，可以帮助开发人员快速进行 React 组件的静态测试和交互测试。Enzyme 通过简化 React 组件的 API 方式来实现易于测试的目标。
Redux 简介
Redux 是一个流行的 JavaScript 应用程序状态管理工具。Redux 可以跟踪应用程序中的状态，以便在 React 组件中正确地更新它们。Redux 像是一个分布式数据库，负责管理 React 应用程序中的状态。这种分布式数据库能够在不同的 React 组件之间传递信息，并将数据存储在一个统一的地方。
环境搭建
在本文中，我们将使用 Jest 作为测试框架。Jest 是一个 JavaScript 测试框架，它提供了简单的 API，并支持构建和测试 React 组件。我们将使用 Enzyme 和 Jest 形成的协同工作来测试 Redux 应用程序的 React 组件。
首先，需要在项目中添加以下依赖项：
npm install --save-dev jest babel-jest babel-preset-env react-test-renderer enzyme enzyme-adapter-react-16 redux-mock-store
其中：
jest：Jest 测试框架。babel-jest：使用 babel 来编译 JavaScript。babel-preset-env：编译 JavaScript 的 Babel 预设。react-test-renderer：渲染 React 组件，以便我们可以验证它是否以正确的方式工作。enzyme：测试 React 组件。enzyme-adapter-react-16：适配器，以便 Enzyme 工作。redux-mock-store：模拟 Redux store 提供测试 fixture 的依赖。
测试要点
测试 Reducers
Reducers 用于根据给定的动作和当前状态计算下一个状态。为了测试它们，我们需要看看动作和预期的下一个状态是否有关，以及它们是否与我们所预期的一样。
我们将创建一个简单的 reducer，它只会添加一条消息。这个 reducer 的一些代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- ------------
----- ------------ - -
--------- ---
--
------ ------- -------- --------------------- - ------------- ------- -
------ ------------- -
---- ------------
----- ---------- - -
--- ----------
-------- ---------------
--
------ -
---------
--------- ------------------- ------------
--
--------
------ ------
-
-我们可以编写一个简单的测试来检查此 reducer 是否返回正确的下一个状态：
-- -------------------- ---- -------
--------------------------- -- -- -
---------- --- - --------- -- -- -
----- ------------- - -
--------- ---
--
----- ------ - -
----- --------------
--- --
-------- ------- --------
--
----- --------- - ------------------------------ --------
---------------------------
--------- -
-
--- --
-------- ------- --------
--
--
---
---
---测试 Actions
我们可以编写单元测试来测试 actions 是否根据所需生成正确的动作。以下是一个简单的 action creator：
-- -------------------- ---- ------- ------ - ----------- - ---- ---------------- --- ------------- - -- ------ ----- ---------- - ------- -- -- ----- ------------ --- ---------------- -------- ---
我们可以编写一个测试来查看此 action creator 是否有正确的输出：
-- -------------------- ---- -------
---------------------- -- -- -
---------- ------ -- ------ -- --- - --------- -- -- -
----- ------- - ------- --------
----- -------------- - -
----- ------------
--- --
--------
--
----------------------------------------------------
---
---测试 Components
接下来，我们将测试 React 组件。当我们需要在应用程序中测试组件时，Enzyme 是一个非常好用的库。Enzyme 为我们提供了几个 API 来轻松方便地测试组件。
例如，下面是一个简单的组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --------- ---- ------------- ----- ------- - -- ------- -- -- - ---------------- -- ----------------- - - -------- ---------------------------- -- ------ ------- --------
这个组件只需根据传入的 message 属性呈现消息。我们可以创建一个测试来验证这个组件能否渲染正确的消息：
describe('Message', () => {
it('should render message', () => {
const message = 'Hello, world!';
const wrapper = shallow(<Message message={message} />);
expect(wrapper.find('p').text()).toEqual(message);
});
});测试组件与 Redux 之间的交互
最后，我们需要测试组件与 Redux 的交互。我们将创建一个简单的 React 组件，它将使用一个纯展示组件（Message 组件）和对 Redux store 进行操作的高阶组件进行渲染。
以下是我们的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
------ - ---------- - ---- -------------
----- -------- - -- --------- ---------- -- -- -
-----
--------------------- -- -
-------- ---------------- ------------------------- --
---
------- ----------- -- ------------------- ----- ---------------------
--- -------
---------
------
--
------------------ - -
--------- -----------------------------------
--- ----------------------------
-------- ----------------------------
---------------
----------- --------------------------
--
----- --------------- - ----- -- --
--------- ---------------
---
----- ------------------ - -------- -- --
----------- ------- -- ------------------------------
---
------ ------- ------------------------ ------------------------------我们可以编写一个集成测试来测试此组件及其相关部分是否能够正确地工作：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------------------ ---- -------------------
------ ------------------ - -------- - ---- -------------
----- --------------- - ---------------------
----- --------- - -----------------
--------- --
--- --
-------- ------- --------
-- -
--- --
-------- --------- --------
---
---
------------------ ------------- -- -- -
---------- ------ ---------- -- -- -
----- ------- - -------------------------- ----------------- ----
------------------------------------------------
---
---------- --- - --------- -- -- -
----- ------- - ----------------- ----------------- ----
-----------------------------------------
-----------------------------------------
----- --------------
--- --
-------- -------- -------- -------
----
---
---这个测试使用 redux-mock-store 来模拟 Redux store，然后使用 Enzyme 测试组件。它呈现 MessagesConnected 组件，并测试是否将所有的 message 显示出来。
此外，它还测试了点击按钮时是否会触发 addMessage 方法，并且是否将正确的信息存储在 Redux store 中。
结论
Enzyme 提供了一个简单而有效的测试 React 组件的方法。在 Redux 中使用 Enzyme 测试组件是非常有用的，因为它确保我们的 Redux store 和组件之间的互动正常工作。通过编写这些测试，我们可以确保 Redux 应用程序具有正确的行为，并且没有意外的意外行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674b4bd60b2e50ef995d0ba9