近年来，React 已经成为前端开发的热门选择。虽然 React 提供了一些简单的测试工具，但是他们通常不足以处理更复杂的测试用例。Enzyme 是一个 React 测试工具，它帮助你 TDD (测试驱动开发) 你的 React 代码，并验证组件在不同状态下的正确性。在本文中，我们将深入探讨如何在 React 应用程序中使用 Enzyme 进行 TDD。
什么是 TDD
在我们深入了解如何使用 Enzyme 进行 TDD 之前，让我们先快速了解一下 TDD 是什么？
TDD 是一种软件开发方法，它的基本思想是在写代码之前先写测试。TDD 的流程通常包括这样几个步骤：编写测试、运行测试、编写代码、通过测试。通过这种方式，你可以确保你的代码在编写时就已经被验证。
TDD 提供了以下好处：
- 保证代码的稳定性和一致性。
- 更容易进行代码重构，因为可以通过测试验证重构不会引入新的错误。
- 更确信代码已经完成并工作得很好。
Enzyme 入门
在开始使用 Enzyme 进行 TDD 之前，我们需要先安装 Enzyme 以及其他相关的依赖项。
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
在安装 Enzyme 后，我们需要设置适配器。适配器是 Enzyme 与 React 之间的中间件，它用于从 React 元素中提取信息。在 Enzyme 中，我们需要为所使用的 React 版本选择正确的适配器。比如，如果你使用 React 16，则应该选择 Enzyme 适配器 enzyme-adapter-react-16。
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });现在我们已经准备好开始使用 Enzyme 进行 TDD 了。
使用 Enzyme 进行 TDD
现在我们已经熟悉了 TDD 和 Enzyme，让我们快速了解如何使用 Enzyme 进行 TDD。
编写测试
我们将从编写测试用例开始，例如，我们有一个 Counter 组件，用于显示一个计数器，让我们先编写一个测试用例来验证。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ------ --------- ---- -- ------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
---我们首先导入 React 和 Enzyme 中的 shallow 函数。我们将 Counter 组件呈现为浅渲染，这意味着它只呈现单个组件，而不会呈现其所有子组件。然后我们使用 expect 函数来验证我们的快照是否成功。这是一种有效的测试 React 组件的方式。
编写代码
现在我们已经编写了测试，让我们编写一些代码。在我们编写代码之前，我们可以通过编写一个简单的 UI 组件来模拟 Counter 组件的实现。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- - ------- -- -
----- - ----- - - - - ------
------ -
-----
----------- --------------
--------- -----------
------
--
--
------ ------- --------这是一个简单的计数器组件，它接受 count 属性，用于显示计数器的值。现在我们可以使用这个组件来通过测试。
运行测试
我们已经编写了测试用例并编写了代码，现在让我们运行测试并验证是否通过了测试。
npm test
如果测试没有通过，那么我们需要修改代码并再次运行测试，直到测试通过。在测试通过之后，我们将继续编写更多的测试用例，以确保代码可以正确处理各种情况。
更复杂的测试用例
我们已经了解了如何使用 Enzyme 进行简单的测试，现在让我们看看如何在更复杂的测试中使用 Enzyme。
以一个叫做 TextButton 的组件为例，它是一个文本按钮组件。当我们移动鼠标或点击按钮时，它会改变样式。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ---------- - -- ---- -- -- -
----- ------- --------- - ----------------
----- ------------ - -- -- -
---------------
--
----- ------------ - -- -- -
----------------
--
------ -
-------
---------------------------
---------------------------
--------
-------- ---- ------
------- ---- ----- ------
---------------- ----- - ------ - -------
------ ----- - ------ - ------
--
-
------
---------
--
--
------ ------- -----------我们将从最简单的测试用例开始，验证组件是否正确呈现。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---------- ---- ---------------
-------------------- ----------- -- -- -
---------- ------ --------- ---- -- ------- -- -- -
----- ------- - ------------------- ----
----------------------------------
---
----------- ---- ----------- -- -- -
----- ------- - ------------------- ----------- --- ----
----- ---- - ------------------------------
--------------------------- -----
---
---在第一个测试中，我们以与前面的测试相同的方式进行了浅渲染，并使用 expect 函数验证我们的快照是否成功。在第二个测试中，我们将文本设置为 "Click Me"，并使用 find 函数在 DOM 中查找按钮元素。最后，我们使用 expect 函数来验证文本是否正确。
测试事件处理程序
现在我们已经测试了组件的快照和标记，让我们测试组件的事件处理程序。我们将模拟 onMouseEnter 事件处理程序，并验证按钮样式是否在鼠标悬停时正确变化。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---------- ---- ---------------
-------------------- ----------- -- -- -
---------- ------ --------- ---- -- ------- -- -- -
----- ------- - ------------------- ----
----------------------------------
---
----------- ---- ----------- -- -- -
----- ------- - ------------------- ----------- --- ----
----- ---- - ------------------------------
--------------------------- -----
---
----------- ----- -------------- -- -- -
----- ------- - ------------------- ----------- --- ----
----------------------------------------------
------------------------------------------------------
-------- ---- ------
------- ---- ----- ------
---------------- -------
------ -------
---
---
---在这个测试中，我们首先使用 shallow 函数呈现 TextButton 组件，并使用 find 函数查找按钮元素，然后调用 simulate 函数模拟 onMouseEnter 事件。最后，我们使用 expect 函数来验证按钮的样式是否正确。
这是一个简单但非常有效的测试事件处理程序的示例。
使用 mount 函数进行深度渲染
在以前的测试中，我们使用了 Enzyme 的 shallow 函数进行浅渲染，它只呈现单个组件，而不会呈现其所有子组件。现在，让我们看看如何使用 mount 函数进行深度渲染，它将呈现整个组件树。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ------ --------- ---- -- ------- -- -- -
----- ------- - -------------- ----
----- --------- - -------------------------
--------------------------------- ----
------------------
---
---------- --------- --- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------- - -------------- ----
----- --------------- - -----------------------------
----------------------------------
----- --------- - -------------------------
--------------------------------- ----
------------------
---
---------- --------- --- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------- - -------------- ----
----- --------------- - -----------------------------
----------------------------------
----- --------- - -------------------------
--------------------------------- -----
------------------
---
---在这个测试中，我们使用 mount 函数进行 Counter 组件的深度渲染。第一个测试用例验证组件正确呈现，在第二个测试用例中，我们找到增量按钮、模拟 click 事件并验证 count 值是否增加。在第三个测试用例中，我们做同样的事情，但这次我们找到了减量按钮并验证 count 值是否减少。
结论
在本文中，我们深入了解了如何在 React 应用程序中使用 Enzyme 进行 TDD。我们编写了一些简单的测试用例来验证组件的快照和标记，并编写了一些复杂的测试用例来测试组件的事件处理程序和渲染结果。虽然我们还只涉及到了一小部分 Enzyme 功能，但这些基础知识足以开始在 React 应用程序中使用 Enzyme 进行 TDD。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fa7f6344713626014cdbc1