在 React Redux 开发中，通过 connect() 高阶函数将组件与 Redux 连接在一起被广泛使用。但是，connected 组件的测试却相对困难。在这篇文章中，我们将介绍如何使用 Enzyme 来测试 React Redux 中的 connected 组件，并提供一些最佳实践和示例代码。
Enzyme 简介
Enzyme 是 Airbnb 开发的一个测试工具，专门用于测试 React 组件。它提供了一系列 API，可以方便地模拟组件的渲染和交互，从而实现组件的单元测试、集成测试以及端到端测试等。
Enzyme 支持三种不同类型的渲染器（Shallow, Mount 和 Render），分别为：
shallow()：浅渲染器，只渲染当前组件，不渲染子组件。mount()：完全渲染器，完全渲染组件及其子组件，并且可以访问生命周期方法和 DOM。render()：静态渲染器，将组件渲染成静态 HTML，并返回一个 Cheerio 风格的包装器，可以使用类似于 jQuery 的语法进行查询。
测试 Connected 组件
在 Redux 中，state 和 action 是独立的，与组件无关。因此，在测试 connected 组件时，我们需要确保组件可以正确地连接 Redux，同时还需要测试其自身的行为和状态。
下面是一些最佳实践来测试 React Redux 中的 connected 组件。
1. 不测试 React Redux
我们的测试应该专注于 connected 组件的行为和状态，而非 Redux。因此，我们不应该测试 Redux 的内部工作方式和实现细节。我们只需要在每个测试用例中传入一个模拟的 store，然后使用 simulate() 模拟相应的事件。
2. 使用 Enzyme Shallow 渲染器
我们可以使用 Enzyme 的浅渲染器来测试 connected 组件。浅渲染器可以快速渲染组件并返回组件的输出。这样我们就可以专注于测试组件的行为和状态。
3. 使用 wrap() 包装组件
我们可以使用 wrap() 函数来包装一个组件，使之与 store 连接起来，从而得到一个 connected 组件。例如，如果我们要测试一个组件 MyComponent ，我们可以这样写：
-- -------------------- ---- -------
------ - -------- -------------- - ---- ---------
------ -------------- ---- -------------------
------ - -------- - ---- --------------
------ ----------- ---- ----------------
----- --------- - -----------------
----- ----- - -------------- -- --- -----
---------------------- ---- -- -- -
--- -------- ---------------
------------- -- -
------- - --------
--------- --------------
------------ --
-----------
--------- -- -- ------ -----
---
-- -------
---4. 将 connected 组件导出
我们可以将 connected 组件导出，以便在测试中访问。这样我们就可以在测试用例中调用组件的方法和访问其属性。
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ ----------- ---- ---------------- ----- --------------- - ------- -- -- -- -- ----- ------ --- ----- ------------------ - ---------- -- -- -- -- ------ ------ --- ------ ------- ------------------------ --------------------------------- ------ - ----------- -- -- --------
5. 使用 Enzyme API 测试组件
我们可以使用 Enzyme 提供的一些 API 来测试组件的行为和状态。例如，我们可以使用 find()、simulate()、prop() 等方法来查询或操作组件的元素、事件和属性。
下面是一个示例代码，展示了如何使用 Enzyme API 来测试 connected 组件。
-- -------------------- ---- -------
---------------------- ---- -- -- -
--- -------- ---------------
------------- -- -
------- - --------
--------- --------------
------------ --
-----------
---------
---
---------- ------ ----------- -- -- -
--------------------------------
---
---------- ---- ----------- ---- ------ -- --------- -- -- -
----- ----------- - ----------
------------------ ----------- ---
-----------------------------------------
---------------------------------------
---
---------- ------- ------- --------- -- -- -
----- ------- - ------- --------
------------------ ------- ---
--------------------------------------------------
---
---总结
Enzyme 是一个功能强大的测试工具，可以帮助我们测试 React Redux 中的 connected 组件。在本文中，我们介绍了一些最佳实践，包括不测试 Redux、使用浅渲染器、包装组件、导出 connected 组件以及使用 Enzyme API 来测试组件。我们希望这些实践能够帮助开发人员更好地测试组件并提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bbc0148841e989487f908