如何在 React 项目中集成 Enzyme-JavaScript中文网-JavaScript教程资源分享门户

React 是一种流行的 JavaScript 库，用于构建用户界面。Enzyme 是一个流行的 React 测试工具，它提供了一种简单的方式来测试 React 组件。在本文中，我们将讨论如何在 React 项目中集成 Enzyme。

安装 Enzyme

首先，我们需要安装 Enzyme。在终端中运行以下命令：

npm install --save-dev enzyme enzyme-adapter-react-16

这将安装 Enzyme 和适配器，适配器是必需的，以便 Enzyme 能够与 React 一起使用。

配置 Enzyme

在开始使用 Enzyme 之前，我们需要在项目中进行配置。我们需要创建一个名为 setupTests.js 的文件，并在其中添加以下代码：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

这将配置 Enzyme 使用 React 适配器。

使用 Enzyme

现在我们已经完成了 Enzyme 的安装和配置，让我们看看如何在 React 项目中使用它。

测试组件

首先，我们需要创建一个组件并测试它。在本示例中，我们将创建一个简单的按钮组件。在 Button.js 文件中添加以下代码：

import React from 'react';

const Button = ({ label }) => {
  return <button>{label}</button>;
};

export default Button;

我们将使用 Enzyme 测试此组件。

编写测试

在 Button.test.js 文件中添加以下代码：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------

------------------ -- -- -
  ---------- ------ ------ ---- ------- -- -- -
    ----- ------- - --------------- ------------ --- ----
    ----- ------ - -----------------------
    --------------------------------- -----
  ---
---

在此测试中，我们使用了 shallow 方法来创建一个浅渲染的组件。然后，我们使用 find 方法查找按钮元素，并使用 text 方法获取其文本内容。最后，我们使用 expect 方法断言按钮的文本应该为 'Click me'。

运行测试

现在我们已经编写了测试，让我们运行它们。在终端中运行以下命令：

npm test

如果测试通过，你将看到以下输出：

PASS  src/Button.test.js
  Button
    ✓ should render button with label (4ms)

结论

在本文中，我们讨论了如何在 React 项目中集成 Enzyme，以及如何编写和运行测试。Enzyme 是一个非常有用的工具，可以帮助我们测试 React 组件。希望这篇文章能帮助你更好地理解如何使用 Enzyme。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/675a702ad24fefedc84dbcbc