React 기초~단위 테스트/비동기 테스트

• 저는 비동기 액션을 테스트할 때 테스트 코드에서 async/await를 사용합니다.

• 테스트 데이터를 준비해야 해요. 이 경우에는 json 서버를 사용합니다.

・mock/db.json

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

・package.json

 "scripts": {
    "dev": "vite",
    "start": "vite",
    "build": "vite build",
    "test": "vitest",
    "preview": "vite preview",

    // ↓ setting a script for json server
    "json-server": "npx json-server -w ./mock/db.json -p 4030"
  },

그런 다음 명령을 실행해야 합니다.

 npm run json-server

・src/Example.js

import GetUserData from "./components/GetUserData";

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

const Example = () => {
  return (
    <>
      <GetUserData url={ENDPOINT_URL}/>
    </>
  );
};

export default Example;

・src/comComponents/GetUserData.jsx

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 (
    <div>
      {userData ? (
        <>
          <h2>Profile</h2>
          <ul>
            <li>ID: {userData.id}</li>
            <li>Name: {userData.name}</li>
          </ul>
        </>
      ) : (
        <h1>...loading</h1>
      )}
    </div>
  );
};

export default GetUserData;

・src/comComponents/GetUserData.test.jsx

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(<GetUserData url={ENDPOINT_URL} />);
    const h1El = screen.getByRole("heading", { name: "...loading" });
    expect(h1El).toBeInTheDocument();
  });

  ★ Not using  async/await
  test("After external data fetching",  () => {
    render(<GetUserData url={ENDPOINT_URL} />);
    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/await를 사용하지 않으면 Expect(h2El).toBeInTheDocument();에서 테스트가 실패합니다.

사용자 데이터 없이 테스트를 계속하기 때문이죠.

・src/comComponents/GetUserData.test.jsx

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(<GetUserData url={ENDPOINT_URL} />);
    const h1El = screen.getByRole("heading", { name: "...loading" });
    expect(h1El).toBeInTheDocument();
  });

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

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

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

• async/await를 사용하면 테스트가 성공합니다.

• 디스플레이

위 내용은 React 기초~단위 테스트/비동기 테스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!