Jest 中如何测试 React 组件？-JavaScript中文网-JavaScript教程资源分享门户

React 是一种前端流行的 JavaScript 库，用于构建用户界面。在 React 中，组件是一个核心概念，因为它们提供了可重用的代码块，可以帮助我们构建复杂的用户界面。但是，如何确保我们编写的 React 组件能够正常地工作呢？答案是使用 Jest。

Jest 是一种流行的 JavaScript 测试框架，可以用于测试 React 应用程序。在本文中，我们将学习如何使用 Jest 测试 React 组件。

前置知识

在进行 Jest 测试之前，您需要了解以下方面：

React 和 JSX 的基础知识。
JavaScript 中的测试概念和编写单元测试的基本原则。
Node.js 和 npm 的基础知识。

安装 Jest

安装 Jest 最简单的方法是通过 npm。首先，在项目的根目录中打开命令行，并运行以下命令：

npm install --save-dev jest

上述命令将在您的项目中安装 Jest 的最新版本。

测试 React 组件

现在，我们已经安装了 Jest，我们可以开始测试 React 组件了。以下是一个简单的 React 组件示例，我们将在此基础上进行测试：

// javascriptcn.com 代码示例
import React from 'react';

const Button = ({ label, onClick }) => (
  <button
    type="button"
    className="btn btn-primary"
    onClick={onClick}
  >
    {label}
  </button>
);

export default Button;

该组件是一个简单的按钮，其中包含一个 label 属性和一个 onClick 属性，以便我们可以传递标签和单击回调函数。

要测试此组件，我们将打开一个新文件夹，该文件夹应该与我们的 Button 组件处于同一级别。在该文件夹中，创建一个名为 button.spec.js 的文件， Jest 将在其中查找测试套件。

现在，打开 button.spec.js 文件，在其中编写以下测试：

// javascriptcn.com 代码示例
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from '../Button';

describe('Button', () => {
  it('renders label', () => {
    const { getByText } = render(<Button label="Click me!" />);
    expect(getByText('Click me!')).toBeInTheDocument();
  });

  it('calls onClick callback', () => {
    const handleClick = jest.fn();
    const { getByText } = render(<Button label="Click me!" onClick={handleClick} />);
    fireEvent.click(getByText('Click me!'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

上述代码包含两个测试，分别测试我们的 Button 组件是否可以正确呈现标签并且是否能够正确触发单击回调函数。接下来，我们将逐一了解每个测试。

测试 1：检查标签是否呈现

在第一个测试中，我们使用 React 测试库的 render 方法来呈现 Button 组件，并通过 getByText 方法查找要测试的文本。最后，我们使用 Jest 的 expect 断言来验证文本是否存在于文档中。

测试 2：检查单击事件是否可用

在第二个测试中，我们使用 jest.fn() 创建一个名为 handleClick 的假函数。接下来，我们使用 render 方法将 Button 组件呈现到屏幕上，并在传递 onClick prop 时同时传递 handleClick 函数。然后，我们使用 fireEvent.click 方法模拟单击事件。最后，我们使用 Jest 的 expect 断言来验证 handleClick 函数是否被调用了一次。

运行测试

现在，我们已经编写了测试用例，可以运行它们了。要运行测试，请在命令行中输入：

jest button.spec.js

当所有测试都成功完成后，您应该看到下面的输出：

 PASS  ./button.spec.js
  Button
    ✓ renders label (32 ms)
    ✓ calls onClick callback (10 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total

如果您看到绿色的 Pass，那么恭喜您，测试 Go！

总结

在本文中，我们了解了如何使用 Jest 测试 React 组件。我们学习了如何安装 Jest，创建测试用例以及运行测试套件，以确保我们编写的 React 组件能够正常工作。

这是一个简单的示例，但是 Jest 提供了更多的功能，例如异步测试、模拟和快照测试等。如果您想深入了解 Jest，可以访问 Jest 官方文档。

在编写 React 组件时，测试非常重要，因为它可以帮助我们发现和解决问题。如果您还没有编写过 React 组件测试，请今天开始尝试吧！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f0c497d4982a6eb88ab4f