在开发前端应用时，保证组件的正确性和可维护性是至关重要的。而测试是保证应用正确性的重要方式之一。在 React 组件的开发中，我们经常需要测试组件的交互行为，以确保用户能够正常地与组件进行交互。
在本文中，我们将介绍 Enzyme，一个流行的 React 测试工具。我们将详细讲解如何使用 Enzyme 测试组件的交互行为，并提供一些示例代码和指导意义。
Enzyme 是什么？
Enzyme 是 AirBnB 开发的一个流行的 React 测试工具。它提供了一组强大的 API，用于测试 React 组件的行为和渲染结果。Enzyme 可以让你方便地测试组件的 props，state 和组件容器中的子组件。
在使用 Enzyme 时，我们需要安装以下两个 npm 包：
--- ------- ---------- ------ -----------------------
其中，enzyme 是 Enzyme 的主要库，enzyme-adapter-react-16 是适配 React 16+ 版本的适配器，我们也可以根据 React 的版本来安装适配器。
测试组件交互行为的三种方式
在测试 React 组件的交互行为时，我们可以采用以下三种方式：
方式一：模拟事件
在 React 组件中，我们使用事件来实现组件的交互行为。在 Enzyme 中，我们可以通过模拟事件来测试组件的行为。
例如，下面是一个简单的 React 组件：
------ ----- ---- --------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
------------------- -- -- ------ ----------- - - ----
-
-------- -
------ -
-----
--------- ----------------------
------- -------------------------------- -----------
------
--
-
-
------ ------- -------------我们可以使用 simulate 方法来模拟点击事件，并测试组件的行为：
------ - ------- - ---- ---------
------ ------------ ---- -----------------
---------------------- ----------- -- -- -
---------- --------- ----- -- ------- -- -- -
----- ------- - --------------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------
---
---方式二：检查组件状态
在某些情况下，我们可能需要检查组件的状态以测试其行为。在 Enzyme 中，我们可以使用 state 方法检查组件的状态。
例如，下面是一个简单的 React 组件：
------ ----- ---- --------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - - --- ----- --
---------------- - ----------------------------
-
------------- -
------------------- -- -- --- --------- ----
-
-------- -
------ -
-----
------- ----------------------------------------- - ---- - ---------------
------
--
-
-
------ ------- -------------我们可以使用 state 方法来检查组件的状态并测试其行为：
------ - ------- - ---- ---------
------ ------------ ---- -----------------
---------------------- ----------- -- -- -
---------- ------ ----- -- ------- -- -- -
----- ------- - --------------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------
-------------------------
-------------------------------------------
---
---方式三：检查组件渲染结果
在测试组件的交互行为时，还可以测试组件的渲染结果。Enzyme 提供了一组用于测试组件渲染结果的 API，我们可以使用这些 API 来检查组件的输出和子组件。
例如，下面是一个简单的 React 组件：
------ ----- ---- --------
-------- --------------- -
------ ----------------------
-
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ ------- ------ ------ --
-
-------- -
----- --------- - ------------------------- -- --------- ---------- ----------- ----
------ ---------------------
-
-
------ ------- --------------我们可以使用 Enzyme 中的 find 方法来查找组件中的子组件，并测试其输出：
------ - ------- - ---- ---------
------ ------------- ---- ------------------
----------------------- ----------- -- -- -
---------- ------ ------- ------ -- ------- -- -- -
----- ------- - ---------------------- ----
-----------------------------------------------
---
---结论
在本文中，我们已经介绍了如何使用 Enzyme 测试 React 组件中的交互行为。我们讨论了三种测试组件交互行为的方式，包括模拟事件、检查组件状态和检查组件渲染结果。通过使用 Enzyme，我们可以轻松地测试 React 组件，并保障应用的正确性和可维护性。
完整示例代码：
-- ----------------
------ ----- ---- --------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
------------------- -- -- ------ ----------- - - ----
-
-------- -
------ -
-----
--------- ----------------------
------- -------------------------------- -----------
------
--
-
-
------ ------- -------------
-- ---------------------
------ - ------- - ---- ---------
------ ------------ ---- -----------------
---------------------- ----------- -- -- -
---------- --------- ----- -- ------- -- -- -
----- ------- - --------------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------
---
---
-- ------------
------ ----- ---- --------
-------- --------------- -
------ ----------------------
-
------ ------- ---------
-- -----------------
------ ----- ---- --------
------ -------- ---- -------------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ ------- ------ ------ --
-
-------- -
----- --------- - ------------------------- -- --------- ---------- ----------- ----
------ ---------------------
-
-
------ ------- --------------
-- ----------------------
------ - ------- - ---- ---------
------ ------------- ---- ------------------
------ -------- ---- -------------
----------------------- ----------- -- -- -
---------- ------ ------- ------ -- ------- -- -- -
----- ------- - ---------------------- ----
-----------------------------------------------
---
---
-- ----------------
------ ----- ---- --------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - - --- ----- --
---------------- - ----------------------------
-
------------- -
------------------- -- -- --- --------- ----
-
-------- -
------ -
-----
------- ----------------------------------------- - ---- - ---------------
------
--
-
-
------ ------- -------------
-- ---------------------
------ - ------- - ---- ---------
------ ------------ ---- -----------------
---------------------- ----------- -- -- -
---------- ------ ----- -- ------- -- -- -
----- ------- - --------------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------
-------------------------
-------------------------------------------
---
---来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672de870eedcc8a97c8652d9