使用 Jest 测试 React 组件中的异步请求

在现代 Web 开发中，前端与后端交互变得越来越频繁。为了保证前端代码的质量和稳定性，我们需要使用测试来验证我们的代码是否达到预期的效果。

在 React 组件开发中，通常会使用异步请求来获取数据，因此测试异步请求的能力也变得越来越重要。本文将介绍如何使用 Jest 来测试 React 组件中的异步请求。

安装和配置 Jest

首先，我们需要安装 Jest。可以使用以下命令进行安装：

npm install --save-dev jest

安装完成后，我们需要在项目中创建一个 Jest 的配置文件 jest.config.js。在配置文件中，我们可以指定 Jest 要测试的文件或文件夹：

module.exports = {
  testMatch: ["<rootDir>/src/**/*.test.js"],
};

这里我们让 Jest 只测试以 .test.js 结尾的文件，且这些文件位于 src 文件夹下或其子文件夹下。

编写测试用例

接下来，让我们来编写一个测试用例。假设我们有一个组件 CommentList，它通过异步请求获取评论列表并渲染。我们需要测试该组件是否正确地获取了评论列表并将其渲染。

首先，我们需要使用 Enzyme 来创建一个 CommentList 实例：

import { shallow } from "enzyme";
import CommentList from "./CommentList";

describe("CommentList", () => {
  it("renders the comment list", () => {
    const wrapper = shallow(<CommentList />);
    expect(wrapper.find(".comment")).toHaveLength(0);
  });
});

然后，我们可以使用 Jest 的 Mock 功能来模拟异步请求，并使其返回一个假数据。假设我们使用了axios来进行异步请求，我们可以像下面这样编写 Mock：

import axios from "axios";
import { shallow } from "enzyme";
import CommentList from "./CommentList";

jest.mock("axios");

describe("CommentList", () => {
  it("renders the comment list", async () => {
    axios.get.mockResolvedValue({
      data: [{ id: 1, content: "Comment 1" }, { id: 2, content: "Comment 2" }],
    });

    const wrapper = shallow(<CommentList />);
    await wrapper.instance().componentDidMount();

    expect(wrapper.state("comments")).toEqual([
      { id: 1, content: "Comment 1" },
      { id: 2, content: "Comment 2" },
    ]);
  });
});

这里我们使用 mockResolvedValue 方法来模拟异步请求的返回值。我们还需要使用 await 关键字来等待异步请求完成，然后再进行断言。

在上面的测试用例中，我们可以通过 wrapper.state 来获取组件的状态，然后对其进行断言。

总结

在使用 Jest 测试 React 组件中的异步请求时，我们需要使用 Mock 来模拟异步请求的返回值，并使用 Enzyme 来创建组件实例。通过测试用例，我们可以保证组件能够正确地获取数据并渲染。这样一来，我们就能够更加自信地开发前端代码了。

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