如何使用 Jest 进行 React 组件的交互测试？-JavaScript中文网-JavaScript教程资源分享门户

Jest 是一个流行的 JavaScript 测试框架，它具有易用性和高度的可定制化。在前端开发中，我们通常需要测试我们的 React 组件是否正常工作，而 Jest 是一个非常适合进行这项工作的工具。在本文中，我们将介绍如何使用 Jest 进行 React 组件的交互测试。

需要的工具

在进行 Jest 的 React 组件交互测试之前，我们需要确保安装了以下软件：

Node.js —— 在你的机器上运行 JavaScript 代码的运行环境。
Yarn 或 npm —— 一个依赖管理工具，用于安装和管理我们的项目依赖。
React —— 我们将测试 React 组件，所以需要安装 React。
Jest —— 用来编写和运行测试。

// 安装 React 和 Jest
yarn add react jest

// 或者
npm install react jest

编写测试

我们先来看一下要编写测试的 React 组件。下面是一个简单的按钮组件：

// javascriptcn.com 代码示例
import React, { useState } from "react";

export default function Button(props) {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <button onClick={handleClick}>
      {props.text} {count}
    </button>
  );
}

这个组件有一个控制按钮上显示数字的计数器。现在，我们将编写一个 Jest 测试文件来测试这个组件的行为。

我们将在 src/tests/Button.test.js 文件中编写测试。首先，需要引入 React 和被测试的组件：

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import Button from "../Button";

我们要测试的是一个按钮，所以我们导入了 fireEvent 函数（该函数是测试工具库的一部分），以便在测试中模拟用户与按钮进行交互。

下面，我们将编写第一个测试。我们将测试按钮上的数字是否随着点击而增加。我们将使用 render 函数，该函数可以将我们的组件渲染到一个虚拟的 DOM，并允许我们与其交互。

test("increments count on click", () => {
  const { getByText } = render(<Button text="Click me!" />);
  const button = getByText("Click me! 0");
  fireEvent.click(button);
  expect(button).toHaveTextContent("Click me! 1");
});

这段代码中的第一行包含了测试用例的描述。在接下来的代码中，我们渲染了一个带有 text="Click me!" 属性的组件，并得到了我们的按钮。然后，我们模拟了单击这个按钮，并使用 toHaveTextContent 函数检查它是否已更新为 "Click me! 1"。

运行测试

我们现在已经有了一个可供测试的组件和一个测试文件。接下来，需要运行测试并查看它们是否通过。

在终端中运行 yarn test 或 npm run test 命令。Jest 将查找所有后缀为 .test.js 的文件并运行它们中的测试。在我们的案例中，Jest 应该只发现 Button.test.js 文件并运行它的一个测试。

 PASS  src/__tests__/Button.test.js
  ✓ increments count on click (16 ms)

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

测试已通过！您现在可以添加更多测试用例，以确保您的组件在许多不同情况下的工作良好。

总结

Jest 是一个非常优秀的 JavaScript 测试框架，用于测试前端 React 组件。在本文中，我们演示了如何编写 React 组件的交互测试。本文涵盖了测试的基本概念及其结构的设置，并提供了示例代码和输出。使用 Jest 进行 React 组件的交互测试可以确保您的代码表现良好，并帮助您更好地理解组件的工作原理。

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