React 是一个流行的前端框架，它提供了一种基于组件的方式来构建用户界面。而为了保证组件的质量和稳定性，测试是必不可少的步骤。Enzyme 和 Jest 是两个常用的前端测试工具，本文将介绍如何使用 Enzyme 和 Jest 进行 React 组件的测试。
Enzyme 和 Jest 简介
Enzyme 是由 Airbnb 开发的 React 组件测试工具，它提供了一组简单易用的 API，可以方便地模拟组件的渲染、交互和断言。Enzyme 支持多种渲染方式，包括浅渲染（shallow rendering）、完整渲染（mounting）和静态渲染（static rendering），可以根据需要选择不同的方式进行测试。
Jest 是 Facebook 开发的 JavaScript 测试框架，它提供了一组全面的测试工具和 API，可以用于测试各种类型的 JavaScript 代码，包括 React 组件。Jest 支持快照测试（snapshot testing）、单元测试（unit testing）和集成测试（integration testing），可以根据需要进行测试。
安装 Enzyme 和 Jest
在使用 Enzyme 和 Jest 进行测试之前，需要先安装它们。可以使用 npm 或 yarn 进行安装。在项目根目录下执行以下命令：
npm install --save-dev enzyme jest enzyme-adapter-react-16
或者使用 yarn：
yarn add --dev enzyme jest enzyme-adapter-react-16
其中，enzyme-adapter-react-16 是适配 React 16 的 Enzyme 适配器，需要根据实际情况选择不同的适配器。
使用 Enzyme 进行测试
Enzyme 提供了三种渲染方式，可以根据需要选择不同的方式进行测试。
浅渲染（shallow rendering）
浅渲染是一种快速而简单的测试方式，它只渲染组件的一层子组件，不会渲染子组件的子组件。浅渲染可以用于测试组件的结构和属性，但不能测试组件的交互和状态。
以下是一个简单的组件：
import React from 'react';
function Button(props) {
return <button className={props.className}>{props.children}</button>;
}
export default Button;使用浅渲染方式测试该组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ------ - ------ ---- --- ----- --------- --- ------ -- -- -
----- ------- - --------------- ----------------------------- -------------
------------------------------------------------------------------------
------------------------------------- -----
---
---在测试中，使用 shallow 函数创建一个浅渲染的组件实例，然后使用 find 和 prop 函数查找和断言组件的属性。
完整渲染（mounting）
完整渲染是一种更真实的测试方式，它会渲染组件的所有子组件，包括子组件的子组件。完整渲染可以用于测试组件的交互和状态，但需要注意测试的性能和可维护性。
以下是一个带有状态的组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- -------------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
------------ --------------
------- --------------------------------------------
------
--
-
------ ------- --------使用完整渲染方式测试该组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- --------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------- - -------------- ------------ --- ----
--------------------------------------------------- ----
-----------------------------------------
--------------------------------------------------- ----
-----------------------------------------
--------------------------------------------------- ----
---
---在测试中，使用 mount 函数创建一个完整渲染的组件实例，然后使用 simulate 函数模拟组件的交互和状态，最后使用 find 和 text 函数查找和断言组件的状态和属性。
静态渲染（static rendering）
静态渲染是一种不渲染组件的测试方式，它只是将组件作为一个纯函数进行测试。静态渲染可以用于测试组件的输出和逻辑，但不能测试组件的交互和状态。
以下是一个带有逻辑的组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------------- -
-- ------------ -
------ --------- ------------------
- ---- -
------ --------- --------------
-
-
------ ------- ---------使用静态渲染方式测试该组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
---------- ------ ------- ------- ---- -- ---- -- ------- -- -- -
----- ------- - ---------------- ----
-------------------------------------- ------------
---
---------- ------ ------- ------ ---- --- ---- -- -------- -- -- -
----- ------- - ---------------- ----------- ----
-------------------------------------- --------
---
---在测试中，使用 render 函数创建一个静态渲染的组件实例，然后使用 text 函数查找和断言组件的输出。
使用 Jest 进行测试
Jest 提供了多种测试方式，可以根据需要选择不同的方式进行测试。
快照测试（snapshot testing）
快照测试是一种比较简单而有用的测试方式，它会将组件的输出保存为一个快照文件，然后在后续的测试中对比快照文件和实际输出，以确保组件的输出不会发生意外的变化。快照测试可以用于测试组件的结构和样式，但不能测试组件的交互和状态。
以下是一个带有样式的组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------ -
------ -
---- ----------------- -------- ---------------- ----------- ---
----------------------
------
--
-
------ ------- ------使用快照测试方式测试该组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ----------------------
------ ----- ---- ----------
----------------- -- -- -
---------- ------ --------- ---- --- ----- ------- -- -- -
----- ---- - ---------------------- ----------- ---------------- -------------
-------------------------------
---
---在测试中，使用 create 函数创建一个组件实例，然后使用 toJSON 函数将组件输出转换为一个 JSON 对象，最后使用 toMatchSnapshot 函数对比快照文件和实际输出。
单元测试（unit testing）
单元测试是一种测试组件的函数和逻辑的方式，它可以用于测试组件的输入和输出，以及组件的内部逻辑和处理。单元测试需要对组件进行模拟和隔离，以确保测试的准确性和可靠性。
以下是一个带有函数和逻辑的组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----------------- -
-------- ------ -- -
------ - - --
-
-------- ----------- -- -
------ - - --
-
-------- ----------- -- -
------ - - --
-
-------- --------- -- -
------ - - --
-
-------- ------------- -
----- ------ - ----------------------- ---------
---------- ------ -- ------------
-
------ -
-----
------- ----------------------------------------
------
--
-
------ ------- -----------使用单元测试方式测试该组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---------- ---- ---------------
---------------------- -- -- -
---------- ---- --- --- -------- ---- --- -------- -- ------- -- -- -
----- ------- - ----------
----- ------- - ------------------- ------------------ ----- ----- ----
-----------------------------------------
--------------------------------------- ---
---
---------- ---- --- -------- -------- ---- --- -------- -- ------------ -- -- -
----- ------------ - ----------
----- ------- - ------------------- ----------------------- ----- ----- ----
-----------------------------------------
-------------------------------------------- ---
---
---------- ---- --- -------- -------- ---- --- -------- -- ------------ -- -- -
----- ------------ - ----------
----- ------- - ------------------- ----------------------- ----- ----- ----
-----------------------------------------
-------------------------------------------- ---
---
---------- ---- --- ------ -------- ---- --- -------- -- ---------- -- -- -
----- ---------- - ----------
----- ------- - ------------------- --------------------- ----- ----- ----
-----------------------------------------
------------------------------------------ ---
---
---在测试中，使用 jest.fn 函数创建一个模拟函数，然后使用 shallow 函数创建一个浅渲染的组件实例，最后使用 simulate 函数模拟组件的交互和状态，并使用 toHaveBeenCalledWith 函数断言模拟函数的参数和调用。
集成测试（integration testing）
集成测试是一种测试组件的交互和状态的方式，它可以用于测试组件的输入和输出，以及组件之间的交互和状态。集成测试需要对组件进行完整渲染，以确保测试的真实性和可靠性。
以下是一个带有状态和交互的组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------------- -
----- ------- --------- - -------------
----- ------------ -------------- - -------------
-------- ----------- -
------------------- -------------
------------------
-
-------- ------------------- -
----- -------- - ------------------- -- -- - --- -------
-------------------
-
------ -
-----
----
----------------- ------ -- -
--- ------------
------
------- ----------- -- ------------------------------------
-----
---
-----
------ ------------------ ----------- -- ------------------------------ --
------- --------------------------------
------
--
-
------ ------- ---------使用集成测试方式测试该组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
---------- --- --- ------ ----- ----------- -- -- -
----- ------- - --------------- ----
-------------------------------------------
---------------------------------------- - ------- - ------ ---- ----- - ---
-----------------------------------------------
-------------------------------------------
---------------------------------------------- -------------
---------------------------------------- - ------- - ------ ------ ----- - ---
-----------------------------------------------
-------------------------------------------
---------------------------------------------------- -------------
------------------------------------------------------ -------------
----------------------------------------------------------
-------------------------------------------
------------------------------------------------ -------------
---
---在测试中，使用 mount 函数创建一个完整渲染的组件实例，然后使用 simulate 函数模拟组件的交互和状态，并使用 find 和 text 函数查找和断言组件的状态和属性。
结论
Enzyme 和 Jest 是两个常用的前端测试工具，它们提供了一组简单易用的 API 和全面的测试工具和 API，可以用于测试各种类型的 JavaScript 代码，包括 React 组件。在使用 Enzyme 和 Jest 进行测试时，需要根据实际情况选择不同的测试方式和适配器，以确保测试的准确性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67567229d8a608cf5d8c0c86