如何使用 React 测试工具 Enzyme
在现代的前端开发中，在不断演变的技术中，测试驱动开发（TDD）或测试优先开发（BDD）已经成为选手中的常见实践。然而，在利用 React 时进行测试可能会比常规项目更加复杂。因此，React 小组花费了大量精力来创建一个名为 "Enzyme" 的测试辅助库，它可以大大简化 React 组件的测试。
本文将详细解释如何使用 Enzyme——一个 React 测试工具，它可以让开发人员更轻松地检查组件的传播和状态。
Enzyme 是什么？
Enzyme 是一个由 AirBnB 创建的开源 JavaScript 库，可以帮助你更轻松地测试 React 组件。它由一组测试工具和 API 组成，可以让你轻松地模拟 JSX 树上的对象，测试组件的行为并轻松地在单元测试过程中编写自动测试。
Enzyme 支持在 React 16、15 和 0.14 中使用。它适合创建活态的应用程序，并在开发过程中提供最佳的自动化测试工具来确保应用程序的可靠性。
安装 Enzyme
Enzyme 可以与 Jest、Mocha、Chai 和 Jasmine 等测试框架结合使用。在这篇文章中，我们将把重点放在使用 Jest 和 Enzyme 进行测试。
要安装 Enzyme，请在项目中运行以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16
在安装 Enzyme 后，我们还需要为它选择一种适配器，以便与我们的 React 版本兼容。在我们的项目中，我们将使用适用于 React 16 的适配器。
安装完成后，我们可以开始使用 Enzyme 进行测试了。
创建 React 组件并进行测试
首先，我们将创建一个 Counter 组件，将在测试中使用。该组件接受一个 props，然后通过增量或减量按钮更新状态，并在页面上显示结果。
-- -------------------- ---- -------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
------ -------------------
--
-
-------- -
------ -
-----
------- ---------------------------- ----------- -- --------------- ------ ---------------- - - ----
--------- -------
---------
------- ---------------------------- ----------- -- --------------- ------ ---------------- - - ----
--------- -------
---------
--- ------------------------------- ----- -- -----------------------
------
--
-
-
------ ------- --------
现在我们已经有了 Counter 组件，我们可以开始为它撰写测试。
首先，让我们导入必要的依赖项：
-- -------------------- ---- -------
------ ------- ---- --------------------------
------ ------- ---- ------------
----------- -------- --- --------- ------
------- ------ ------------------------- ------- --------- ---------- ------ ------ ----- ----------------
--------------------- - ----
-- - ------- --------------------------
-- - ------- -------------------------
-- --------------
-------------------- ----------- -- -- -
--- --------
------------- -- -
------- - ---------------- ---------------- ----
---
------------- --- ----------- -- -- -
-----------------------------
---
------------- --- ------- ------ -- -- -
---------------------------------------------------------------------- ----- -- ----
---
--------------- ------ ----- ----------- -- -- -
-----------------------------------------------------------------
---------------------------------------------------------------------- ----- -- ----
---
--------------- ------ ----- ----------- -- -- -
-----------------------------------------------------------------
---------------------------------------------------------------------- ----- -- -----
---
------
--------------- ------- ------- ---------- --------------------------------- ------- ----------------------------------------------
------ ---- --- ----- ------
-------------- ------ ------------------------ ---------------- ----- ----- -----------------
--
-------------- ------ ----------- ----- --------------- ---------------------------------- ---- -------------------------- -------------------------
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------