本文将介绍如何在 React 中使用 enzyme 进行单元测试。在本文中，我们将创建一个简单的组件并进行测试。
React 简介
React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它将应用程序分解为可重用且可组合的组件，使代码更易于维护和协作。
React 支持客户端渲染和服务器端渲染，并且可以与许多不同的开发工具和框架集成。
enzyme 简介
enzyme 是一个 React 测试实用程序，它可以让您轻松地编写和运行测试用例，并且可以与大多数测试框架集成使用。enzyme 提供了一种简便的方式来搜索、遍历和操作 React 组件的输出。enzyme 支持三种渲染方式：浅渲染、完整渲染和静态渲染。
- 浅渲染：只渲染组件的一层，可以模拟组件的渲染，并使测试更快。
- 完整渲染：渲染全部子组件，并返回包含完整组件的虚拟 DOM。
- 静态渲染：将 React 组件输出的 HTML 代码转换为静态字符串。
接下来我们将通过一个例子来演示如何使用 enzyme 进行测试。
创建一个组件
首先，让我们创建一个简单的 React 组件。在这个例子中，我们将创建一个包含输入框和按钮的组件。当用户单击按钮时，将会将输入框中的内容显示在屏幕上。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ---------------- -
----- ------------ -------------- - -------------
-------- ------------------------ -
----------------------------------
-
-------- ------------------- -
--------------------------------
------------------
-
------ -
-----
------ ----------- ------------------ ---------------------------- --
------- -------------------------------- --------------
-------------------------------
------
--
-
------ ------- ----------在这个组件中，我们使用了 useState 钩子来管理输入框的值，并使用 onButtonClick 属性来将输入框的值传递给父组件。我们将在测试中测试这个组件。
编写测试用例
下面我们将使用 Jest 测试框架和 enzyme 库来编写测试。
我们首先需要安装 Jest 和 enzyme 库和相关的包。在终端中执行以下命令：
npm install --save-dev jest enzyme enzyme-adapter-react-16
我们需要使用 EnzymeAdapter，下面是相关的代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });接下来，我们需要导入 React 组件和 Enzyme API：
import React from 'react';
import { shallow, mount, render } from 'enzyme';
import UserInput from './UserInput';我们将使用三种渲染方式对组件进行测试。
浅渲染
首先，我们将使用浅渲染进行测试。在这种情况下，我们只需要测试组件的一层，这将使测试更快。
我们将编写一个测试用例，在用例中，我们将传递一个包含值 "test" 的字符串作为输入，然后单击按钮，预期组件将该值显示在屏幕上。下面是测试代码：
-- -------------------- ---- -------
------------------- ----------- -- -- -
---------- ---- --- ----- ----- ---- ------ -- --------- -- -- -
----- ------ - ----------
----- ------- - ------------------ ---------------------- --------------- ----
----- ---------- - -------
---------------------------------------- - ------- - ------ --------------
-----------------------------------------
--------------------------------------------------------------
------------------------------------------------
---
---在此测试中，我们首先创建了一个模拟函数，然后使用它来测试 onButtonClick 属性是否被调用，并测试组件是否将输入值正确地传递给该属性。
我们使用 shallow 函数来进行浅度渲染。使用 find 方法来查找输入框和按钮，并模拟更改和单击事件。最后，我们使用 expect 方法来断言组件是否输出了输入值，以及 onButtonClick 属性是否被调用。
完整渲染
接下来，我们将使用完整渲染方式对组件进行测试，这使我们可以测试组件包含的所有子组件。因此，我们可以确保组件正确地渲染和交互。
下面是完整渲染的测试代码：
-- -------------------- ---- -------
------------------- ----------- -- -- -
---------- ---- --- ----- ----- ---- ------ -- --------- -- -- -
----- ------ - ----------
----- ------- - ---------------- ---------------------- --------------- ----
----- ---------- - -------
---------------------------------------- - ------- - ------ --------------
-----------------------------------------
--------------------------------------------------------------
------------------------------------------------
------------------
---
---在这个测试中，我们使用了 mount 函数，因此我们可以访问组件内部的所有子组件，并更真实地渲染组件。
静态渲染
最后是静态渲染测试，我们将测试组件直接输出静态 HTML 代码方式是否正确。在测试中，我们使用 .text() 方法来访问渲染的 HTML 代码。
下面是静态渲染的测试代码：
describe('UserInput component', () => {
it('renders correctly', () => {
const wrapper = render(<UserInput onButtonClick={() => {}} displayValue="" />);
expect(wrapper.text()).toEqual('Show Input');
});
});总结
在这篇文章中我们通过创建一个简单的 React 组件并使用 enzyme 进行单元测试的方式，介绍了如何使用 enzyme 进行 React 的单元测试。我们讲解了 enzyme 的三种渲染方式，以及如何编写测试用例来测试组件的交互和输出。
这篇文章的目的是介绍基础的单元测试，如果您想要深入了解 enzyme，您可以查看官方文档以获取更多信息。虽然单元测试并不能涵盖所有的程序错误，但它可以大大提高程序的可靠性和稳定性。我们希望本文可以帮助您开始编写 React 组件的单元测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64586550968c7c53b0ac72cd