如何在基于 Webpack 的项目中设置 Enzyme

前言

Enzyme 是一个流行的 React 测试工具，它可以帮助我们方便地进行组件测试。在基于 Webpack 的项目中使用 Enzyme 可能会有一些挑战，本文将介绍如何在基于 Webpack 的项目中设置 Enzyme。

准备工作

在开始设置 Enzyme 之前，我们需要确保已经安装了以下依赖：

• React
• React DOM
• Enzyme
• Enzyme Adapter React

如果没有安装这些依赖，可以使用 npm 或 yarn 进行安装。

npm install --save react react-dom enzyme enzyme-adapter-react

或者

yarn add react react-dom enzyme enzyme-adapter-react

设置 Enzyme

设置 Enzyme 通常需要创建一个 setupTests.js 文件，并在其中配置 Enzyme 适配器。在基于 Webpack 的项目中，我们可以使用 jest-environment-jsdom-webpack 来设置 Jest 环境，然后在 setupTests.js 文件中配置 Enzyme 适配器。

首先，安装 jest-environment-jsdom-webpack。

npm install --save-dev jest-environment-jsdom-webpack

或者

yarn add --dev jest-environment-jsdom-webpack

然后，在 package.json 文件中添加 Jest 配置。

{
  "jest": {
    "testEnvironment": "jest-environment-jsdom-webpack"
  }
}

接下来，在项目根目录中创建 setupTests.js 文件，并添加以下代码：

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

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

这将配置 Enzyme 适配器，使其能够在基于 Webpack 的项目中正常工作。

使用 Enzyme 进行测试

现在，我们已经成功地设置了 Enzyme，可以开始使用它进行测试了。下面是一个简单的示例代码，它使用 Enzyme 测试一个 React 组件。

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

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

在这个示例中，我们首先导入了 React 和 Enzyme 中的 shallow 函数，然后使用它来浅渲染 MyComponent 组件。最后，我们使用 Jest 的 toMatchSnapshot 函数来比较组件渲染结果的快照。

结论

在基于 Webpack 的项目中设置 Enzyme 可能会有一些挑战，但是通过正确的配置和使用，我们可以方便地进行 React 组件测试。本文介绍了如何在基于 Webpack 的项目中设置 Enzyme，并提供了一个简单的示例代码，希望对读者有所帮助。

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