在开发 React 应用时，我们经常会用到 Redux 来管理应用状态。由于 Redux 的状态管理是单向数据流，通过 Redux 提供的仓库（Store）来管理应用的整个状态，维护应用的数据一致性，从而避免了组件之间的状态传递和维护引起的问题。
但是，由于 Redux Store 是状态中心化的，会使得我们在测试 React 组件时变得比较困难，因为有些组件需要从应用的状态中读取数据来渲染自身的视图或者触发相关的业务逻辑，此时如何模拟 Redux Store 的状态来测试 React 组件呢？
这就需要用到 Enzyme 这个 React 测试工具库了。
Enzyme
Enzyme 是一个 React 测试工具库，支持以 jQuery 风格的语法来遍历和操作 React 组件的渲染代码，以此来方便地测试 React 组件。
Enzyme 提供了三种渲染方式来测试 React 组件： Shallow Rendering、Full DOM Rendering 和 Static Rendering。
- Shallow Rendering: 浅渲染，只渲染一层组件，不渲染子组件，适用于单元测试。
- Full DOM Rendering: 完整的 DOM 渲染，包括子组件，适用于集成测试。
- Static Rendering: 静态渲染，将组件渲染为静态的 HTML 字符串，适用于快速生成静态的 HTML 代码。
其中，Shallow Rendering 是最常用的一种测试渲染方式，我们将介绍如何使用 Enzyme 的 Shallow Rendering 来测试 React 组件，尤其是需要从 Redux Store 中读取状态的组件。
模拟 Redux Store 的状态
在使用 Enzyme 进行 React 组件 Shallow Rendering 的测试时，我们需要将 Redux Store 中的状态注入到组件中，以便测试组件能够正确地渲染出状态。
有两种方式来模拟 Redux Store 的状态：
- 直接使用 Provider 组件将测试用的 Store 传给要测试的组件。
- 使用 Enzyme 提供的 mock 能力来模拟 Redux Store 的状态。
以下是两种方式的示例代码：
直接使用 Provider 组件
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
------ ----------- ---- -------------
---------------------- ---- -- -- -
----- ----- - -------------------------
----- ------- - --------
--------- --------------
------------ --
-----------
--
---------- ------ ----------- -- -- -
----------------------------------
---
---在上面的例子里面，我们使用 Provider 组件将测试用的 Store 传给要测试的组件。
使用 Enzyme 提供的 mock 能力
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
----- --------- - -
--------- ---------- -- --
---------- --------
----
--
----- ------- - -------------------- --- -
-------- - ------ --------- --
---
---------- ------ ----------- -- -- -
----------------------------------
---
---在上面的例子里面，我们使用了 Jest 提供的 mock 能力来模拟 Redux Store 的状态，然后将 mock 后的状态作为一个 context 传给组件。
实现组件测试
有了上述的基础，我们就可以进行组件测试了，以下是一个具体的组件测试示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
----- --------- - -
--------- ---------- -- --
---------- --------
----
--
----- ------- - -------------------- --- -
-------- - ------ --------- --
---
---------- ------ ----------- -- -- -
----------------------------------
---
---------- ------ --- ------- --------- -- -- -
------------------------------------------------ ------ --------
---
---在上面的例子里面，我们首先模拟了 Redux Store 的状态，然后通过以 Shallow Rendering 方式渲染组件，测试组件是否能够正确地渲染出状态。
最后，我们将测试的结果与预期结果进行比较，以此判断测试是否通过。
总结
在使用 Enzyme 进行 React 组件测试时，我们需要先模拟 Redux Store 的状态，然后通过以 Shallow Rendering 方式渲染组件，测试组件是否能够正确地渲染出状态。
如此一来，我们就可以确保 React 组件在正式运行之前就能够经过测试，并且在应用中做到如期工作。
希望本文的介绍能够帮助到你，更好地了解 React 组件测试、Enzyme、以及如何模拟 Redux Store 的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6d32ef6b2d6eab322e291