Enzyme 测试库的使用和优化
Enzyme 是一个 React 的测试库，其目的是使 React 组件测试更加简单，直观和可交互，它基于 React 的 react-dom 渲染器进行开发。Enzyme 不同于 React 自带的测试工具集，它提供了丰富的 API，能够在组件的不同层次进行操作。Enzyme 的使用可以为开发人员提供正交测试（Orthogonal Testing）的方法，确保组件的正确性以及显式性。
Enzyme 常用 API
由于 Enzyme 支持操作 React 组件的各个层级，因此我们需要对其 API 进行一个简单的分类。根据组件层级，我们可以将 Enzyme 的 API 分为三类：
- Shallow rendering （浅层渲染）
Enzyme 的核心 API 是 shallow()， 它的起点从组件的根节点开始，只渲染当前组件，不再渲染它的子组件。这种渲染方式使得测试变得更加简单，因为它专注于当前组件的行为，我们不必考虑其子组件的状态。
下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
------------- - -------- -- -- -
----- ------- - --------------- ----
--------------------------------------------
---
---在上面的例子里，我们使用了 shallow() 方法，渲染了一个 Button 组件， 并且通过 exists() 确认组件内部有一个 button 标签。
- Mounting （完全渲染）
与浅层渲染不同，完全渲染会渲染组件的所有子组件，它可以测试组件在虚拟 DOM 中的交互与行为。这样可以捕获更完整的组件层次结构，包括它的子组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ---- ---- ---------
---------------- -- -- -
------------- ------ -- -- -
----- ------------ - ----------
----- ------- - ----------- ----------------------- ----
----------------------------------------
----------------------------------------
---
---在上面的例子里，我们使用了 mount() 方法，渲染了一个带有表单的 User 组件，并模拟提交事件来测试其交互性。从而使得代码更有实际生产场景的参考价值。
- Static rendering （静态渲染）
reactions-test-utils 有个 createRenderer()，用于静态测试组件输出。然而，这个 API 坑多吐少，开发人员基本不用，这里就不再讨论。
Enzyme 的优化
Enzyme 的缺陷是性能慢，当我们在大型项目里使用 Enzyme 时，可能需要付出昂贵的性能代价。为了使测试速度更快，我们需要优化我们的测试。
- 只测试关键路径
在组件中，有很多行为和初始属性并不会对应用程序的核心功能造成影响。通过识别最重要的活动，可以减少测试的用时，并打造一个高效的测试套件。
- 测试可重复性
尽可能保证测试的可重复性。这意味着我们需要避免使用端口、网络资源和内部 API 等，来消除测试中潜在的变数，从而获得一致的结果。
- 保持测试的单一职责
测试是为了证明代码行为和结果。因此，测试套件应该专注于一种行为或者结果，而不是一种方式。即每个测试应该只关心一个测试点。
总结
Enzyme 是一个强大的测试库，可以为我们提供良好的组件测试方法。但是我们需要理解并熟练掌握其常用 API，并且在实践中做好性能优化策略，来保证测试效率。同时在测试过程中，也要保持对其单一职责原则的理解和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64924e0148841e989401ab07