在 React 中使用 Enzyme / Jest 进行 UI 测试

简介

React 是一个流行的前端 JavaScript 库，它可以帮助开发人员快速构建复杂的用户界面。但是，随着应用程序变得越来越复杂，我们需要一种方法来确保我们的代码在每次更改后都能正常工作。这就是为什么测试在 React 中变得如此重要。

Enzyme 和 Jest 是 React 生态系统中最常用的测试工具之一。Enzyme 是一个针对 React 组件的 JavaScript 测试实用程序库，而 Jest 是一个由 Facebook 提供的 JavaScript 测试框架。

在本文中，我们将研究如何使用 Enzyme 和 Jest 来测试 React 组件的 UI。

安装

我们可以使用 npm 来安装 Enzyme 和 Jest。在项目目录中执行以下命令：

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

编写测试

首先，我们需要创建一个测试文件。通常，测试文件的名称应该与要测试的组件名称相同，并以 .test.js 结尾。例如，如果我们要测试一个名为 Button 的组件，我们可以创建一个名为 Button.test.js 的文件。

在测试文件中，我们需要导入我们要测试的组件和 Enzyme 的一些功能。

import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

然后，我们可以编写我们的测试用例。在这个例子中，我们将测试 Button 组件是否正确地渲染了一个按钮。

describe('Button component', () => {
  it('should render a button', () => {
    const wrapper = shallow(<Button />);
    expect(wrapper.find('button')).toHaveLength(1);
  });
});

我们使用 Enzyme 的 shallow 函数来创建一个浅渲染的组件实例。然后，我们使用 Jest 的 expect 函数来断言我们的组件是否正确地渲染了一个按钮。

运行测试

我们可以使用 Jest 来运行我们的测试。在项目目录中执行以下命令：

npm test

Jest 将运行我们的测试，并输出测试结果。

结论

在 React 中使用 Enzyme 和 Jest 进行 UI 测试是一种很好的方式来确保我们的代码在每次更改后都能正常工作。通过编写测试用例，我们可以确保我们的组件能够正确地渲染，并且它们的行为与我们期望的一样。

在开始编写测试之前，确保你已经安装了 Enzyme 和 Jest，并且已经熟悉了它们的 API。开始编写测试时，从简单的测试用例开始，并逐渐扩展测试覆盖范围。

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