在开发前端应用程序时，我们通常使用 Redux 来管理应用程序的状态。Redux 使我们能够以可预测的方式管理状态，并将状态与应用程序的其余部分分离开来。Redux 还提供了一种将状态与 React 组件连接起来的方式，称为 Redux-connected 组件。Redux-connected 组件是一个包装器组件，它将 Redux 状态映射到 React 组件的属性中。
在编写 Redux-connected 组件时，我们需要确保它们的渲染和行为正确。为此，我们可以使用 Enzyme 测试工具来测试 Redux-connected 组件。Enzyme 是一个流行的 React 测试工具，它提供了一系列工具来方便地测试 React 组件。
在本文中，我们将学习如何使用 Enzyme 测试 Redux-connected 组件。我们将从设置测试环境开始，然后编写测试用例来测试 Redux-connected 组件的渲染和行为。最后，我们将了解如何使用 Enzyme 的模拟功能来测试 Redux-connected 组件的异步行为。
设置测试环境
在使用 Enzyme 测试 Redux-connected 组件之前，我们需要设置测试环境。我们将使用 Jest 测试框架和 Enzyme 测试工具来设置测试环境。首先，我们需要安装以下依赖项：
npm install --save-dev jest enzyme enzyme-adapter-react-16 react-test-renderer
然后，我们需要在 package.json 文件中添加以下配置：
"jest": {
"testEnvironment": "node",
"setupFilesAfterEnv": [
"<rootDir>/setupTests.js"
]
}这将告诉 Jest 在 Node.js 环境中运行测试，并在运行测试之前运行 setupTests.js 文件。接下来，我们需要创建 setupTests.js 文件，并添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这将配置 Enzyme 测试工具使用 React 16 适配器。现在，我们已经设置好了测试环境，可以开始编写测试用例了。
测试 Redux-connected 组件的渲染
首先，我们将测试 Redux-connected 组件的渲染。我们将创建一个简单的 Redux-connected 组件，它将从 Redux 状态中获取一个计数器值，并将其显示在屏幕上。我们将使用 Enzyme 的 shallow 函数来渲染组件，并使用 find 函数来查找组件中的元素。我们将使用 Jest 的断言函数来测试组件的渲染结果。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ --- ------- ------- -- -- -
----- ------- - ---------------- ----------- ----
--------------------------------------------------------- ----
---
---在上面的代码中，我们首先导入了 React 和 Enzyme 的 shallow 函数。然后，我们导入了我们要测试的 Redux-connected 组件 Counter。我们使用 shallow 函数来渲染组件，并将一个计数器值 1 传递给组件。然后，我们使用 find 函数查找一个类名为 .counter 的元素，并使用 Jest 的断言函数来测试该元素的文本内容是否为 Counter: 1。
测试 Redux-connected 组件的行为
接下来，我们将测试 Redux-connected 组件的行为。我们将创建一个简单的 Redux-connected 组件，它将包含两个按钮：一个用于增加计数器的值，另一个用于减少计数器的值。我们将使用 Enzyme 的 simulate 函数来模拟按钮的单击事件，并使用 Jest 的断言函数来测试组件的行为。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- -------- --- ------- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------- - ---------------- ----------- ----
---------------------------------------------
--------------------------------------------------------- ----
---
---------- -------- --- ------- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------- - ---------------- ----------- ----
---------------------------------------------
--------------------------------------------------------- ----
---
---在上面的代码中，我们首先导入了 React 和 Enzyme 的 shallow 函数。然后，我们导入了我们要测试的 Redux-connected 组件 Counter。我们使用 shallow 函数来渲染组件，并将一个计数器值 1 传递给组件。然后，我们使用 find 函数查找一个类名为 .increment 的按钮，并使用 simulate 函数来模拟按钮的单击事件。接着，我们使用 Jest 的断言函数来测试计数器的值是否为 2。类似地，我们测试了 .decrement 按钮的行为。
测试 Redux-connected 组件的异步行为
最后，我们将了解如何使用 Enzyme 的模拟功能来测试 Redux-connected 组件的异步行为。我们将创建一个 Redux-connected 组件，它将包含一个按钮，当按钮被单击时，它将使用 Redux-thunk 中间件来异步调用一个 API 并更新 Redux 状态。我们将使用 Enzyme 的 mount 函数来渲染组件，并使用 redux-mock-store 库来模拟 Redux 状态和 API 调用。我们将使用 Jest 的 done 参数来测试异步行为。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - -------- - ---- --------------
------ ------- ---- ------------
----- --------- - ----------------------------
------------------- -- -- -
---------- ------ --- ------- ----- ---- --- ------ -- --------- ------ -- -
----- ----- - ----------- -------- - ---
----- ------- - ------
--------- --------------
-------- --
-----------
--
------------------------------------------------
------------- -- -
-----------------
--------------------------------------------------------- ----
-------
-- ------
---
---在上面的代码中，我们首先导入了 React 和 Enzyme 的 mount 函数。然后，我们导入了 redux-mock-store 库，它可以帮助我们模拟 Redux 状态和 API 调用。我们还导入了 Redux-thunk 中间件和 React-redux 的 Provider 组件。我们创建了一个名为 mockStore 的函数，它将使用 Redux-thunk 中间件来创建一个模拟 Redux 状态。然后，我们使用 mount 函数来渲染 Redux-connected 组件，并将模拟的 Redux 状态传递给 Provider 组件。接着，我们使用 simulate 函数来模拟一个类名为 .async-button 的按钮的单击事件。最后，我们使用 setTimeout 函数来等待异步 API 调用完成，并使用 update 函数更新组件。然后，我们使用 Jest 的断言函数来测试计数器的值是否为 2。在测试函数的末尾，我们调用了 done 参数，以确保测试函数在异步操作完成后结束。
结论
在本文中，我们学习了如何使用 Enzyme 测试工具来测试 Redux-connected 组件的渲染和行为。我们了解了如何使用 Enzyme 的 shallow 函数来测试组件的渲染，如何使用 simulate 函数来测试组件的行为，以及如何使用 Enzyme 的模拟功能来测试 Redux-connected 组件的异步行为。这些测试用例可以帮助我们确保 Redux-connected 组件的正确性，并提高我们的应用程序的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67637c59856ee0c1d41f0e72