{
  "users": [
    {
      "id": 1,
      "name": "Foo"
    }
  ]
}

= usestate（null）; useeffect（（）=> { axios.get（url）。 // eslint-disable-next-line反應鉤/詳盡的deps }，[]）; 返回 （

import GetUserData from "./components/GetUserData";

//The path of test data
export const ENDPOINT_URL = 'http://localhost:4030/users/1';

const Example = () => {
  return (
    
      
    >
  );
};

export default Example;

.TextContent）.tobe（“ ID：1”）; 期望（itemels [1] .textContent）.tobe（“名稱：foo”）; }）; }）;

import { useEffect, useState } from "react";
import axios from "axios";

const GetUserData = ({ url }) => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    axios.get(url).then((response) => setUserData(response.data));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    

      {userData ? (
        
          
Profile
          

            
ID: {userData.id}
            
Name: {userData.name}
          
        >
      ) : (
        
...loading
      )}
    
  );
};

export default GetUserData;

因為測試在沒有用戶數據的情況下繼續。

import { render, screen } from "@testing-library/react";
import GetUserData from "./GetUserData";
import { ENDPOINT_URL } from "../Example";

describe("Check an action of The GetUserData component", () => {

  test("External data fetching in progress", () => {
    render();
    const h1El = screen.getByRole("heading", { name: "...loading" });
    expect(h1El).toBeInTheDocument();
  });

  ★ Not using  async/await
  test("After external data fetching",  () => {
    render();
    const h2El =  screen.findByRole("heading", { name: "Profile" });
    expect(h2El).toBeInTheDocument();

    const itemEls =  screen.findAllByRole("listitem");

    expect(itemEls[0].textContent).toBe("ID: 1");
    expect(itemEls[1].textContent).toBe("Name: Foo");
  });
});

如果我使用async/等待，則測試成功。

[2