简介
在前端开发中，测试是一个非常重要的部分。而 Enzyme 和 Jest 都是 React 测试中非常常见的工具。Enzyme 是用于 React 组件测试的 JavaScript 工具库，可用于处理 Prop 和状态，使测试更加简单和直观。Jest 是一个 JavaScript 测试框架，具有模拟功能，是 React 组件测试的良好选择。本文将介绍如何在使用 Jest 的同时，使用 Enzyme 进行 React 组件的测试，包括安装、测试方法和示例代码。
安装
首先，我们需要在项目中安装 Enzyme 和 Jest，可以通过以下命令完成：
npm install --save-dev enzyme jest enzyme-adapter-react-16
我们需要使用特定的适配器来将 Enzyme 与 React 16 集成。在测试文件的顶部，我们还需要设置适配器，具体方法如下：
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { MyComponent } from './MyComponent ';
Enzyme.configure({ adapter: new Adapter() });我们需要将适配器配置为 Enzyme。这样的设置使我们可以使用 Enzyme 中的函数来测试 React 组件。
测试方法
在有了 Enzyme 和 Jest 的基础之后，我们就可以开始编写测试了。在测试 React 组件时，我们大致可以使用以下两种方法：
- Enzyme 渲染
使用 Enzyme 渲染器渲染 React 组件是使用 Enzyme 的最基本方法。在此方法中，我们使用 shallow 渲染器（对组件进行浅层渲染）来表示组件的 DOM，然后根据预期的行为进行测试。例如，我们有一个名为 MyComponent 的组件：
import React from 'react';
export const MyComponent = () => (
<div>
<h1>Welcome to Jest and Enzyme Tutorial</h1>
<p>Testing React Components with Jest and Enzyme Made Easy!</p>
</div>
);则可以编写一个基本测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ - ----------- - ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ------ --------- -- ------- ------ -- -- -
----- --------- - -------------------- ----- ----
------------------------------------
---
---在这个测试中，我们简单地渲染了 MyComponent 组件，并将其与快照进行比较以检查渲染是否正确。
- Enzyme 模拟
Enzyme 还提供了模拟机制来测试组件中的特定行为。我们可以模拟事件、模拟服务器响应等等。考虑以下组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------ ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
------- ---------------------------
------------------ -------- ------------------
---------
--
-
-我们希望测试 handleClick 函数。我们需要使用 Enzyme 提供的 mount 函数（对组件进行完整渲染，包括子组件的渲染）来渲染组件，并查找包含 handleClick 函数的按钮，通过模拟单击事件来测试该函数。
-- -------------------- ---- -------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ - ------ - ---- -----------
------------------ -------- --- --------- ---
------------------ -- -- -
--- --------------
----- ------ - -- -- -
-- ---------------- -
------------- - ------------- ----
-
------ --------------
--
------------- -- -
------------- - ----------
---
---------- ------ ----------- -- -- -
----- --------- - ---------
------------------------------------
---
---------- --------- ----- ---- ------ -- --------- -- -- -
----- --------- - ---------
----- ------ - -------------------------
-------------------------
----- ---- - ---------------------------
---------------------------- -------- ----
---
---示范代码
这是完整的示范代码，你可以使用它来跟随本文演示：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ ----- ----------- - -- -- -
-----
----------- -- ---- --- ------ -------------
---------- ----- ---------- ---- ---- --- ------ ---- ---------
------
--
-- -------------------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ - ----------- - ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ------ --------- -- ------- ------ -- -- -
----- --------- - -------------------- ----- ----
------------------------------------
---
---
-- ---------
------ ----- ---- --------
------ ----- ------ ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
------- ---------------------------
------------------ -------- ------------------
---------
--
-
-
-- --------------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ - ------ - ---- -----------
------------------ -------- --- --------- ---
------------------ -- -- -
--- --------------
----- ------ - -- -- -
-- ---------------- -
------------- - ------------- ----
-
------ --------------
--
------------- -- -
------------- - ----------
---
---------- ------ ----------- -- -- -
----- --------- - ---------
------------------------------------
---
---------- --------- ----- ---- ------ -- --------- -- -- -
----- --------- - ---------
----- ------ - -------------------------
-------------------------
----- ---- - ---------------------------
---------------------------- -------- ----
---
---总结
Enzyme 和 Jest 是 React 组件测试的非常有用的工具，它们能够轻松地为我们提供组件测试的方法和功能。本文简单介绍了如何使用 Enzyme 和 Jest 进行 React 组件测试，包括安装、测试方法和示例代码。希望这篇文章可以帮助您开始测试您的 React 组件，并使您的 React 项目更加坚固和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64708b36968c7c53b0eae005