前言
在开发 React 应用的过程中，我们需要保证组件的正确性和可靠性。为了达到这个目标，我们需要使用测试来验证我们的组件是否按照我们的预期工作。在本文中，我们将介绍如何使用 Enzyme 和 Jest 来测试 React 组件。
Enzyme 和 Jest 简介
Enzyme 是一个用于测试 React 组件的 JavaScript 测试实用程序库。它提供了一组 API，用于模拟 React 组件的渲染、交互和断言。Enzyme 是由 Airbnb 开发的，并且是一个非常流行的测试工具。
Jest 是 Facebook 开发的一个 JavaScript 测试框架。它支持编写快速、可靠和简单的测试，并且与 React 集成得非常好。Jest 自带了一个断言库，因此您不需要安装其他库来编写测试断言。
安装 Enzyme 和 Jest
首先，我们需要安装 Enzyme 和 Jest。您可以使用以下命令来安装它们：
npm install --save-dev enzyme jest enzyme-adapter-react-16
这将安装 Enzyme、Jest 和适用于 React 16 的 Enzyme 适配器。
编写组件测试
我们将从编写一个简单的 React 组件开始。假设我们有一个名为 Button 的组件，它接受一个 onClick 属性，并在用户单击时触发该属性。以下是 Button 组件的代码：
import React from 'react';
const Button = ({ onClick, children }) => (
<button onClick={onClick}>{children}</button>
);
export default Button;现在，我们将编写一个测试来验证该组件的行为。我们将使用 Enzyme 和 Jest 来编写测试。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ---- ------- ---- ---- --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------------- -------------
-----------------------------------------
---------------------------------------
---
---在此测试中，我们使用 shallow 函数来渲染 Button 组件。然后，我们模拟了一个单击事件，以验证组件是否按照预期工作。最后，我们使用 Jest 的 toHaveBeenCalled 断言来验证 onClick 属性是否被调用。
运行测试
现在，我们已经编写了一个测试，让我们运行它。您可以使用以下命令来运行测试：
npm test
这将运行 Jest 并执行我们编写的测试。如果测试通过，您将看到以下输出：
-- -------------------- ---- -------
---- ----------------
------
- ------ ---- ------- ---- ---- ------- -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ------
--- --- ---- -------如果测试失败，则会输出失败的测试用例和错误消息。
结论
在本文中，我们介绍了如何使用 Enzyme 和 Jest 来测试 React 组件。我们编写了一个简单的测试来验证 Button 组件的行为，并且通过运行该测试来验证测试的正确性。Enzyme 和 Jest 是 React 生态系统中流行的测试工具，它们可以帮助我们编写高质量的测试来验证我们的组件是否按照预期工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673ed21e90e7ed93bee4e354