React 作为当下最流行的前端框架之一，其组件化的特性为前端开发带来了更高效、更方便的体验。但是在组件的开发和维护过程中难免会遇到一些问题，如改动带来的 bug、UI 调整导致的样式问题等，这时组件测试便显得尤为重要。在 React 组件测试方面，Enzyme 是非常出色的工具。本文将介绍基于 Enzyme 的 React 组件测试实践，有深度的阐述 Enzyme 的使用方法，并提供参考的实例代码供读者学习。
Enzyme 简介
Enzyme 是 Airbnb 开源的一套 React 组件测试工具，能够方便我们操作 React 组件的 DOM 结构及其状态，提供了简单的 API，以便与 Jest、Mocha、Chai、Sinon 等测试框架配合使用。
Enzyme 提供了三种渲染方式：
- shallow：只渲染当前组件，不渲染子组件。
- mount：渲染当前组件以及子组件，完全展示组件的行为和样式。
- render：将组件渲染成静态 HTML 结构，方便 DOM 操作。
获取 Enzyme
npm install --save-dev enzyme react-test-renderer enzyme-adapter-react-16
其中，enzyme 为核心包，react-test-renderer 用于将组件渲染成 JSON 结构进行比较，enzyme-adapter-react-16 是适配器，用于适配 React 16.x 版本及以上。如果你使用的是 React 15 版本，则需要安装 enzyme-adapter-react-15。
测试的组成部分
在测试 React 组件时，我们通常需要测试以下几个方面：
- 组件的功能是否正常。
- 组件是否按照预期渲染。
- 组件状态和属性是否正确。
- 组件交互事件是否响应。
接下来我们将针对这些方面介绍具体的测试实现。
测试组件功能
首先，我们需要编写测试用例来测试组件的功能是否正常。假设我们有一个计数器组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
------ -
--
-
----------- - -- -- -
----------------------- -- --
------ --------------- - -
----
--
-------- -
------ -
-----
--------- ----------------------
------- ---------------------------------------------
------
--
-
-
------ ------- --------接下来我们编写测试用例来测试组件的 handleClick 是否正常：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- --------- ------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------
---
---上述代码中，我们首先使用 shallow() 方法渲染组件，然后使用 find() 方法获取 button，最后使用 simulate() 方法模拟点击事件。最后，我们使用 expect 断言来测试组件状态是否正常。
测试组件渲染
接下来，我们需要测试组件是否按照预期渲染。考虑一个组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- -------- ------- --------- -
-------- -
----- - ---- - - -----------
------ ----------- --------------
-
-
------ ------- ---------我们编写测试用例来测试组件是否按照预期渲染：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
---------- ------ ------ -- -- -
----- ------- - ----------------- ------------ ----
-------------------------------------- ---------
---
---上述代码中，我们首先使用 shallow() 方法渲染组件并在传入 props，最后使用 expect 断言来测试组件是否按照预期渲染。
测试组件状态和属性
测试组件状态和属性时，我们通常需要分别编写测试用例。
测试组件状态
假设我们有一个表单组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ---- ------- --------- -
------------------ -
-------------
---------- - -
--------- ---
--------- --
--
-
-------------------- - - -- -
---------------
--------- --------------
---
--
-------------------- - - -- -
---------------
--------- --------------
---
--
------------ - - -- -
-------------------
------------------------
--
-------- -
------ -
----- -----------------------------
-------
---------
------
-----------
---------------------------
------------------------------------
--
--------
--- --
-------
---------
------
---------------
---------------------------
------------------------------------
--
--------
--- --
------- -----------------------------
-------
--
-
-
------ ------- -----我们编写测试用例来测试组件状态是否正常：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---- ---- ---------
---------------- -- -- -
---------- ------ ----- ---- -------- ----- --------- -- -- -
----- ------- - ------------- ----
----- ----- - -----------------------------------
------------------------ - ------- - ------ ------ - ---
--------------------------------------------------
---
---------- ------ ----- ---- -------- ----- --------- -- -- -
----- ------- - ------------- ----
----- ----- - ---------------------------------------
------------------------ - ------- - ------ ------ - ---
--------------------------------------------------
---
---上述代码中，我们分别编写两个测试用例来测试状态是否正常更新。这里我们使用了 expect 断言来验证是否更新成功。
测试组件属性
假设我们有一个组件和一个数据源：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- -------- ------- --------- -
-------- -
----- - ----- - - -----------
------ -
----
--------------- -- -
--- ----------------------
---
-----
--
-
-
------ ------- ---------const todos = ['todo1', 'todo2', 'todo3'];
我们编写测试用例来测试组件属性是否正确：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
----- ----- - --------- -------- ---------
-------------------- -- -- -
---------- ------ ------- -- -- -
----- ------- - ----------------- ------------- ----
----- ----- - -------------------
-----------------------------------------
-------------------- ------ -- -
------------------------------------------
---
---
---上述代码中，我们使用 shallow() 方法渲染组件，并在传入 props，使用 expect 断言来验证组件是否按照预期展示出数据源中的数据。
测试组件交互事件
针对组件交互事件，我们需要模拟事件并且验证是否响应了事件。
假设我们有一个 Form 组件，我们需要测试点击 submit 按钮后是否正常响应：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ---- ------- --------- -
------------------ -
-------------
---------- - -
--------- ---
--------- --
--
-
-------------------- - - -- -
---------------
--------- --------------
---
--
-------------------- - - -- -
---------------
--------- --------------
---
--
------------ - - -- -
-------------------
------------------------
---------------
--------- ---
--------- --
---
--
-------- -
------ -
----- -----------------------------
-------
---------
------
-----------
---------------------------
------------------------------------
--
--------
--- --
-------
---------
------
---------------
---------------------------
------------------------------------
--
--------
--- --
------- -----------------------------
-------
--
-
-
------ ------- -----编写测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---- ---- ---------
---------------- -- -- -
---------- ------ --- ---- --- ------ --- ------- -- -- -
----- ------- - ------------- ----
----- ---- - ---------------------
------------------
--------- -----------
--------- --------------
---
----------------------- -
--------------- -- -- --
---
----------------------------------------------
----------------------------------------------
---
---上述代码中，我们模拟了一个 state，然后模拟了一个 submit 事件，并在最后使用 expect 断言来验证事件的响应是否正确。
总结
本文针对 Enzyme 的使用方法做了详细的介绍，从测试组件的各个方面分别编写了测试用例，并附上了具体实例代码。对于前端开发者来说，掌握 Enzyme 的使用方法对于提高代码质量和维护性都是非常重要的，希望本文内容对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a9966448841e98945c163f