React 是一个非常流行的前端开发框架，而 Redux 则是一种流行的状态管理解决方案。在 React 中，我们通常会将一些组件与 Redux 进行连接，以便在组件中使用 Redux 中的状态。
在开发任何 React 应用程序时，测试是一个非常重要的组成部分。特别是对于连接到 Redux 的组件，我们需要确保它们能够正确地渲染和响应应用程序状态的变化。在本文中，我们将介绍如何使用 Enzyme 来测试 Redux-connected 组件。
为什么使用 Enzyme？
Enzyme 是一个非常流行的 React 测试工具，它提供了一组实用的 API，可以帮助我们方便地操作 React 组件。使用 Enzyme，我们可以轻松地测试组件的渲染结果，并且可以进行交互式测试。
Enzyme 还提供了一个强大的功能，可以测试 Redux-connected 组件。这些组件存在于 Redux 的上下文中，因此它们通常需要访问 Redux 状态和操作。这些组件通常会使用 connect() 方法将它们与 Redux 状态绑定在一起。
使用 Enzyme，我们可以方便地对这些组件进行测试，并验证它们可以正确的渲染和响应应用程序状态的变化。
测试 Redux-connected 组件
假设我们有一个 Redux-connected 的组件，它显示了一个列表，并从 Redux 中获取状态。它看起来像这样：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ---- - -- ----- -- -- -
------ -
-----
-------------
----
----------------- ------ -- -
--- -----------------------
---
-----
------
--
--
----- --------------- - ------- -- -
------ -
------ ------------
--
--
------ ------- -------------------------------现在，我们希望编写测试来验证它是否正确渲染，并且在 Redux 状态改变时是否能够正确响应。
安装 Enzyme
首先，我们需要安装 Enzyme。我们可以使用 npm 或者 yarn 来安装它：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
配置 Enzyme
安装 Enzyme 后，我们需要配置它。我们需要在测试文件中引入 configure 方法，并使用 enzyme-adapter-react-16 适配器。
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });创建测试用例
现在我们可以编写测试用例了。首先，我们需要创建一个 ShallowWrapper，它是 Enzyme 提供的一个用于浅层渲染 React 组件的方法。我们可以使用这个对象来访问组件的渲染结果，并查看它是否符合预期。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---- ---- ---------
--------------- ---- -- -- -
----- ----- - ------- ------ -------
----- ------- - ------------- ------------- ----
---------- ------ - ------- -- -- -
--------------------------------------------------
---
---------- ------ - ---- -- ------- -- -- -
----- ------------ - -------------------
--------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
---
---在这个例子中，我们创建了一个名为 wrapper 的 ShallowWrapper 对象，它使用 shallow 方法来渲染组件。我们还编写了两个测试用例来验证组件是否正确地渲染了标题和列表。
测试 Redux 状态变更
接下来，我们希望编写测试来验证如果 Redux 状态发生变化，组件是否正确响应。为了实现这个目标，我们需要创建一个包含两个状态的 store，并使用 provider 将组件连接到 store。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ---- ---- ---------
--------------- ---- -- -- -
----- ------------ - -
------ ------- ------ -------
--
----- ------- - ------ - ------------- -- ------
----- ----- - ---------------------
----- ------- - ------
--------- --------------
----- --
-----------
--
---------- ------ - ------- -- -- -
--------------------------------------------------
---
---------- ------ - ---- -- ------- -- -- -
----- ------------ - -------------------
---------------------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
---
---------- ------ - --- ---- -- ----- ---- --- ----- --------- -- -- -
----- --------------- - -
------ --------- ---------
--
---------------- ----- --------- -------- --------------- ---
-----------------
----- ------------ - -------------------
------------------------------------------------------------------
---------------------------------------------------
---------------------------------------------------
---
---在这个例子中，我们创建了一个名为 store 的 Redux store，它包含了我们的测试数据。我们使用 Provider 将组件连接到 store，并使用 mount() 方法渲染组件。
在第三个测试用例中，我们首先发出一个 Redux 操作，将状态更新为新状态。我们在测试用例中调用了 wrapper.update()，以便更新组件的状态。然后，我们使用 expect() 来验证组件是否正确地渲染了新的列表。
结论
在本文中，我们介绍了如何使用 Enzyme 测试 Redux-connected 的组件。我们通过编写测试用例来验证组件是否正确地渲染，并可以正确响应 Redux 状态的变化。我们使用 Enzyme 提供的强大 API 和 React 测试技巧完成了这些任务。希望这篇文章对你有所帮助，并能够帮助你写出更好的测试用例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67021b44d91dce0dc846834c