前言
在前端开发中，测试是重要的开发环节之一。使用 Jest 集成 Enzyme，可以在 React 项目中进行UI组件的测试。Jest是Facebook推出的一款JS测试框架，而Enzyme是React专门的测试工具。本文将详细介绍使用Jest和Enzyme进行前端测试的方法和实践。
Jest简介
Jest是一款开源的基于JavaScript的测试框架，由Facebook开发和维护。它非常易于学习和使用，在React项目中被广泛使用。Jest不需要独立的配置，如果你的项目是基于create-react-app生成的，那么它就已经集成了Jest。
Jest包含了测试运行器、断言库和测试覆盖率工具等组件，它具有以下特点：
- 执行速度非常快
- 提供了适合React项目测试的专用模块
- 内置的Mock、Spy和Stub功能
- 集成了Jasmine的断言库以及自己的Mock
- 完全基于JavaScript编写，没有任何的浏览器或DOM依赖
Enzyme简介
Enzyme是一个React组件的测试工具，它是由Airbnb开发和维护的。Enzyme具有以下特点：
- 支持React的所有组件类型
- 提供了基于jQuery的API，易于学习和使用
- 对组件的渲染和输出做了优化，可以提高测试速度
- 支持测试DOM操作
Enzyme可以被Jest、Mocha和Chai等测试工具使用。本文将使用Jest集成Enzyme进行前端测试。
安装和配置Jest和Enzyme
安装Jest
在React项目中，如果使用create-react-app创建的项目，那么它就已经集成了Jest，无需再次安装。如果你需要单独使用Jest，可以使用以下命令进行安装：
--- ------- ---------- ----
安装Enzyme
使用以下命令安装Enzyme：
--- ------- ---------- ------ ------------------- -----------------------
enzyme是Enzyme的核心包react-test-renderer是React的渲染工具，它可以将React组件渲染为虚拟DOM树进行测试enzyme-adapter-react-16是适配器，Enzyme需要和React版本对应的适配器才能正常工作
配置Jest和Enzyme
在React项目中，如果使用了create-react-app创建的项目，那么Jest和Enzyme已经集成好并且自动配置了。
在一般的React项目中，需要增加Jest的配置文件，在项目根目录下创建jest.config.js文件，内容如下：
-------------- - -
---------------- --------
------------------- -------------------
-这里使用testEnvironment: "jsdom"告诉Jest我们使用JSDOM作为测试环境，这使得我们可以在Node.js环境中测试浏览器内置的API。setupFilesAfterEnv选项允许您在运行测试之前运行一些设置代码，这里我们调用了一个额外的Jest配置文件jest.setup.js。
在项目根目录下创建jest.setup.js文件，并添加以下代码：
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
这个文件用于引入Enzyme和适配器。现在，在编写测试代码之前，Jest和Enzyme已经准备好了。
使用Jest和Enzyme进行测试
我们将从简单的组件测试开始，首先来看看如何测试一个Button组件。我们先创建一个Button组件，代码如下：
------ ----- ---- --------
----- ------ - -- -------- -------- -- -- -
------ -
------- ------------------
----------
---------
-
-
------ ------- -------现在我们的目标是测试这个组件。为了测试这个Button组件，我们需要编写一个测试用例。如果您还没有测试目录，可以在项目根目录下创建一个新文件夹__tests__，这是Jest默认的测试文件夹。
在__tests__文件夹下创建一个名为Button.test.js的文件，然后添加以下代码：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- ------------
------------------ -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------------- -------------
---------- ------ - -------- -- -- -
-----------------------------------------------
---------------------------------------------------- -----
---
---------- ---- --- ------- -------- ---- --------- -- -- -
-----------------------------------------
-----------------------------------
---
---这里我们使用shallow函数来将Button组件浅渲染为一个包含DOM节点的渲染结果对象。第一个测试检查渲染结果是否包含一个button标签和显示“Click Me”的文本，第二个测试检查当单击按钮时，点击函数是否被调用。
针对异步码进行测试
当我们需要测试异步操作时，我们可以使用setTimeout模拟网络请求或API调用。在这个例子中，我们将创建一个组件和一个带有异步函数的实用函数。
首先，我们创建一个组件AsyncComponent，代码如下：
------ ----- ---- --------
----- -------------- - -- -------- ----- ----- -- -- -
-- --------- -
------ ----------------------
- ---- -- ------- -
------ ----------- ----------------------
- ---- -
------ ------------ -------------
-
-
------ ------- ---------------现在我们将创建一个测试我们的异步函数的实用函数fetchData。我们的函数将从API加载数据，因此我们将使用Jest的mock功能来模拟类似API的响应。我们将在__mocks__文件夹下创建一个fetch.js的模拟代码。这里我们使用了一下代码：
------ ------- -------- ---------- -
------ -----------------
----- -- -- --------------------
---
-现在我们已经有了模拟响应的代码，我们可以编写测试用例。我们需要实例化一个AsyncComponent，然后加载数据并在每个测试用例中检查状态。代码如下：
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------------- ---- --------------------
------ --------- ---- ---------------
--------------------------
-------------------------- -- -- -
---------- ------ ------- ----- ----------- -- -- -
----- ------- - --------------------- ----
---------------------------------------------
---
---------- ------ ----- ----- ---- --- ---- ------- ----- -- -- -
----------------------------------- ---------- -- --------
----- ------- - --------------------- ----
----- --- --------------- -- -----------------------
-------------------------------------- --- -- -------
---
---------- ------ ------- ----- ---- ---- ---- --- ---- ---------- ----- -- -- -
-------------------------------------- ---------
----- ------- - --------------------- ----
----- --- --------------- -- -----------------------
-----------------
--------------------------------------- ----- ---------
---
---这里我们使用了mount函数来将整个组件卸载到DOM中，以便异步处理能够正常工作。第一个测试检查渲染结果是否包含“Loading…”，第二个测试检查当API调用失败时，是否呈现错误状态，第三个测试检查当API调用成功时是否呈现正确的数据。
总结
使用Jest集成Enzyme进行React前端测试是一个简单而有效的方式，这些工具的灵活性和速度可以有效地提高测试质量和开发效率。在编写测试代码时，应确保测试覆盖所有关键路径和异步操作，以确保代码的可靠性和性能。
示例代码：
Button.js
------ ----- ---- --------
----- ------ - -- -------- -------- -- -- -
------ -
------- ------------------
----------
---------
-
-
------ ------- -------Button.test.js
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- ------------
------------------ -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------------- -------------
---------- ------ - -------- -- -- -
-----------------------------------------------
---------------------------------------------------- -----
---
---------- ---- --- ------- -------- ---- --------- -- -- -
-----------------------------------------
-----------------------------------
---
---AsyncComponent.js
------ ----- ---- --------
----- -------------- - -- -------- ----- ----- -- -- -
-- --------- -
------ ----------------------
- ---- -- ------- -
------ ----------- ----------------------
- ---- -
------ ------------ -------------
-
-
------ ------- ---------------fetchData.js
------ ----- ---- ----------
------ ------- ----- -------- ----------- -
--- ---------
--- -
-------- - ----- ----------------------------------
- ----- ------- -
----- --- ---------- -- -------
-
----- ---- - ----- ----------------
------ -----
-AsyncComponent.test.js
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------------- ---- --------------------
------ --------- ---- ---------------
--------------------------
-------------------------- -- -- -
---------- ------ ------- ----- ----------- -- -- -
----- ------- - --------------------- ----
---------------------------------------------
---
---------- ------ ----- ----- ---- --- ---- ------- ----- -- -- -
----------------------------------- ---------- -- --------
----- ------- - --------------------- ----
----- --- --------------- -- -----------------------
-------------------------------------- --- -- -------
---
---------- ------ ------- ----- ---- ---- ---- --- ---- ---------- ----- -- -- -
-------------------------------------- ---------
----- ------- - --------------------- ----
----- --- --------------- -- -----------------------
-----------------
--------------------------------------- ----- ---------
---
---来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6641e2d6d3423812e4fe1c8e