如何在 Enzyme 中测试 Redux 的 Provider？
简介
本文将详细介绍如何在 Enzyme 中测试 Redux 的 Provider，以及如何编写相应的测试代码。Redux 是一个流行的数据管理库，React 生态中许多应用程序使用它来简化数据管理和状态管理。Redux 常常与 React 的 Provider 一起使用，Provider 是一个 React 组件，用于将 Redux 的 store 作为 prop 传递给 React 组件树中的所有组件。
当编写 React 应用程序时，测试 React 组件是至关重要的，它可以帮助您确保内容被正确呈现，并且组件能够正确响应客户端交互。当测试涉及 Redux 状态时，我们需要确保它是可测试的，而且测试产生的结果是正确的。在这里，我们将重点介绍如何使用 Enzyme 测试 Redux 的 Provider。
步骤1：安装 Enzyme
首先，你需要安装 Enzyme。Enzyme 是一个流行的 React 测试工具包，可用于测试 React 组件的功能。您可以使用以下命令来安装最新版本的 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
步骤2：导入和配置 Enzyme
接下来，您需要在 React 中配置 Enzyme。为了实现这一点，您需要导入和配置 Enzyme 适配器。
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });使用 configure() 函数配置适配器，以允许使用 Enzyme 与 React 一起使用。
步骤3：编写测试用例
接下来，我们将编写我们的测试用例来测试 Redux Provider。以下测试用例包括了 Provider 组件的支持，因为 Provider 组件会将 Redux store 隐藏在它的 props 中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------ - -------- - ---- --------------
------ ------------------ ---- -------------------
------ --- ---- --------
----- --------- - ---------------------
------------- ----------- -- -- -
--- ------
--- --------
------------- -- -
----- - -----------
--------- -
-------- ------
------ ------
----- --
-
---
------- - --------------- ------- ----- ------ ---------------
---
---------- ------ -- --- ----------- -- -- -
--------------------------------
---
---------- ------ - ---- -- ---- ---------- -- -- -
------------------------------------------------------
---
---在上面的测试用例中，我们首先引入了 React 和 Enzyme 的浅层渲染和挂载渲染函数。同时，我们也导入了 Provider 组件，以便我们能够在我们的测试用例中使用 Redux store。
接下来，我们引入了 redux-mock-store 库，这个库将帮助我们创建一个虚拟 Store，以便我们可以在我们的测试用例中使用它。
在控制台中，我们定义了一个名为 appState 的虚拟默认 state，用于在我们的测试用例中使用。
然后，在每个测试用例之前，我们在内存中创建了一个 store 和一个包装器，这样测试用例就可以接收 store 的 props，以便我们能够执行我们的测试。
在第一个测试用例中，我们使用 expect() 函数检查了我们的组件是否已渲染。
在第二个测试用例中，我们确认组件是否呈现了需要的数据数目。
这些测试用例展示了如何使用 Enzyme 来测试 Redux Provider。您可以使用这些模板来测试您自己的组件。
结论
在本文中，我们介绍了如何在 Enzyme 中测试 Redux 的 Provider。通过遵循以上步骤，您可以轻松地测试与 Redux 绑定的 React 组件。我们强烈建议您使用测试驱动开发方法来编写您的测试用例，以确保应用程序的质量。
感谢您的阅读，希望这篇文章能为你带来一些帮助！
示例代码：
-- -------------------- ---- -------
-- ------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
------ ------------
----- --- ------- --------- -
------------------- -
-----------------------
-
-------- -
----- - ----- ------ ------- - - -----------
-- --------- -
------ ----------------------
- ---- -- ------- -
------ ---------- ----------------
- ---- -- -------------- -
------ ------- -----------
- ---- -
------ -
---- ----------------
--------------------------- -- -
---- ------------- -------------------------
------------
------
---
------
--
-
-
-
----- --------------- - ------- -- --
----- --------------------
-------- -----------------------
------ ---------------------
---
----- ------------------ - -
----------
--
------ ------- ------------------------ --------------------------- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ ----- ---------------- - -------------------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- -------------- - -- -- --
----- -----------------
---
------ ----- ---------------- - ------ -- --
----- -------------------
-------- -----
---
------ ----- ---------------- - ------- -- --
----- -------------------
-------- ------
---
------ ----- --------- - -- -- -
------ ---------- -- -
---------------------------
------ -----
-----------------------------------------------------------
---------------- -- -
------------------------------------------
--
-------------- -- -
----------------------------------
---
--
---- -------------------- ---- -------
-- -----------
------ -
-----------------
-------------------
-------------------
- ---- ------------
----- ------------ - -
----- ---
-------- ------
------ ------
--
------ ----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------------
------ -
---------
-------- -----
------ ------
--
---- -------------------
------ -
---------
----- ---------------
-------- ------
------ ------
--
---- -------------------
------ -
---------
----- ---
-------- ------
------ -----
--
--------
------ ------
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67375342317fbffedf099f94