如何使用 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);
});