React 是一种流行的 JavaScript 库，可以帮助开发者构建复杂的 Web 应用程序。以 React 为例，它是一种基于组件的开发方式，组件是应用程序的构建快照，组件可以重复使用。Enzyme 是一个用于编写 React 组件测试的工具，可以帮助开发者通过测试来保证 React 组件的正确性。本文将介绍利用 Enzyme 测试 React 组件的正确方式。
Enzyme 简介
Enzyme 是 Airbnb 开发的一个可用于测试 React 组件的 JavaScript 库。它提供了一种容易使用且灵活的 API，可以模拟对 React 组件的交互，并对组件进行测试。
Enzyme 提供了三个不同的渲染器 - 浅渲染器、真实渲染器和静态渲染器。浅渲染器是一种模拟渲染器，可以在不渲染整个组件树的情况下测试组件。真实渲染器是一种真实的渲染器，它可以通过模拟 DOM 对组件进行测试。静态渲染器可以将组件渲染为静态 JSON 对象，可在不进行实际渲染的情况下测试组件。
利用 Enzyme 测试的正确方式
要测试 React 组件，开发者需要使用适当的渲染器。在实现测试之前，我们需要确定要测试的组件，例如以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------- ----- -- -
------ -
-----
--------- -----------
--------------------------
------
--
-
------ ------- --------在此示例中， Counter 是一个接受一个 count 属性的函数组件。组件渲染 count 的当前值和一个<button> 元素。
接下来，我们将使用 Enzyme 浅渲染器生成一个 Counter 组件的实例，并使用断言库(这里使用 Jest)创建并运行一系列测试。例如，以下测试执行了 Counter 组件渲染时是否应该包含一个 <p> 元素，该 <p> 元素应该包含组件传入的 count 属性值：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
----------- ------- -------- -- -- -
-- -- ------ ------ ------- -----
----- ------- - ---------------- --------- ----
-- -- ------- -------- --- --
------------------------------------------
-- -- ------- ----- --- --------- ----- ---
------------------------------------------------ ----
---
---在上述示例中，我们使用 shallow 方法生成 Counter 组件的浅渲染实例 wrapper，并使用 Jest 中的 expect 断言库测试 wrapper 中是否包含 <p> 元素。使用 toHaveLength 方法测试实例中包含的 <p> 元素的数量，并使用 toEqual 断言方法测试 <p> 元素中是否正确地包含传入的 count 属性值。
针对事件处理程序的测试
React 组件通常包含事件处理程序，这些事件处理程序处理从组件接收到的事件。例如，以下代码实现了 Counter 组件的增量按钮事件的处理程序。这个事件处理程序通过 count 的值来增加计数器组件的状态。
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------- ----- -- -
----- ------- --------- - ----------------------
----- ----------- - -- -- -
-------------- - ---
--
------ -
-----
--------- -----------
------- ----------------------------------------
------
--
-
------ ------- --------我们可以通过测试该事件处理程序来确保其正常工作。以下代码重建了上述 Counter 测试，同时还包括事件处理程序测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
----------- ------- -------- -- -- -
----- ------- - ---------------- --------- ----
------------------------------------------
------------------------------------------------ ----
---
-------------- ------- -- -- -
----- ------- - ---------------- --------- ----
-- -- ------- --------- ------- ----
-----------------------------
-----------------------------------------
------------------------------------------------ ----
---
---在上述示例中，我们创建 onIncrement 的事件处理程序，该事件处理程序增加组件状态中的 value。接下来，我们使用 Jest 确保 onIncrement 事件处理程序在单击按钮时正常工作。我们使用 simulate 方法模拟单击事件，最后确保增量按钮单击后更新计数器组件的状态，从而增加指定的 count 值。
结论
本文介绍了如何利用 Enzyme 测试 React 组件的正确方式。我们演示了在不同情况下使用 Enzyme 的三个渲染器及其方法的示例。本文还介绍了如何测试事件处理程序，以确保组件正常工作。对于两者测试，我们都使用 Jest 断言库作为辅助。
在 React Web 开发中，Enzyme 是一种非常有用的工具，可帮助开发者构建使用 React 写成的应用程序，并保证应用组件的正确性。测试组件可以帮助开发者理解应用程序的架构，并可以减少出现错误的机会和需要进行 Debug 的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67092fa6d91dce0dc87733c4