如何使用 useEffect 钩子和异步调用编写 React 组件单元测试？

Question

我从一个基本的 create-react-app 应用程序开始，并尝试学习正确的单元测试技术。 我更新了初始 App 组件以调用本地节点 API 以获得基本字符串响应。 我似乎无法在文档中找到关于如何测试段落标记是否是我的测试中的模拟响应的文档。

发生的事情是该组件只是停留在初始的“Hello World”中。 来自 state 消息的文本并且没有使用模拟响应消息进行更新，我确定我必须触发更新或完成各种摘要循环。 但我还不确定如何做到这一点。

应用程序.js

import React from "react";
import axios from "axios";
import "./App.css";

const App = () => {
  const [message, setMessage] = React.useState("Hello World!");

  React.useEffect(() => {
    const getGreetingFromApi = async () => {
      const apiResponseGreeting = await axios.get("api/hello");
      setMessage(apiResponseGreeting.data);
    };
    getGreetingFromApi();
  });

  return (
    <div className="App">
      <header className="App-header">
        <p>{message}</p>
      </header>
    </div>
  );
};

export default App;

应用程序.test.js

import React from "react";
import ReactDOM from "react-dom";
import { act } from "react-dom/test-utils";

import axios from "axios";
import App from "./App";

jest.mock("axios");

describe("App Component Tests", () => {

    let container;

    beforeEach(() => {
        container = document.createElement("div");
        document.body.appendChild(container);
    });

    afterEach(() => {
        document.body.removeChild(container);
        container = null;
    });

    it("App replaces initial value with greeting response", async () => {
        const mockResponse = { data: "Label Test Text" };
        axios.get.mockResolvedValue(mockResponse);

        let paragraph;

        act(() => {
            ReactDOM.render(<App />, container);
            paragraph = container.querySelector("p");
        });

        expect(paragraph.textContent).toEqual(mockResponse.data);
    });
});

Answer 1

谢谢@diedu 的评论。 这为我指明了正确的方向。 这是最终的工作测试：

it("App replaces initial value with greeting response", async () => {
    const mockResponse = { data: "Label Test Text" };
    axios.get.mockResolvedValue(mockResponse);

    let paragraph;

    await act(async () => {
      await ReactDOM.render(<App />, container);
      paragraph = container.querySelector("p");
    });

    expect(paragraph.textContent).toEqual(mockResponse.data);
});