React Testing Library에 도전하는 3 현재 진행형입니다.

저번 기사가 여기 있어요.
https://zenn.dev/k_matsumoto/articles/e9df97449eb50c
오늘 배운 새 시험
배열
・toEqual
・toBenull

목록이 순조롭게 진행되었는지 테스트

그룹 요소가 없을 때의 테스트
그룹 원소가 있을 때의 테스트
프로퍼스 프로그램에 배열을 맡길 필요가 있을 것 같습니다.
Should render No data ! when no data proopped가 없는 경우
어느 때

데이터가 없는 경우

데이터가 없을 때 toBeInTheDoctoment 형식으로 파일을 모두 포장합니다!이런 예가 있죠.

  it("Should render No data ! when no data propped", () => {
    render(<FreamworkList />);
    expect(screen.getByText("No data !")).toBeInTheDocument();
  });

데이터가 있을 때

데이터가 있을 때 배열이 있는지 확인하세요.
위조수 그룹 데이터를 준비하다.
getallByRole로 라벨의 역할을 찾습니다.
li는listitem입니다.
그 getallByRole로 검색하면 배열에 따라 얻을 수 있습니다.
맵 함수로 그것을 다시 배열합니다.
각 배열의 요소를ele로 삼다
ele.textContentent로 요소에 저장된 값을 가져와 그룹에 다시 저장합니다.
이렇게 하면dummyData로 제작된 것과 얻은 것이 있는지 확인할 수 있다.
데이터를 더하기 때문에 Nodata를 시도해 보세요!queryByText로 유무를 검색합니다.
이런 느낌으로 연습하면 좋을 것 같아서요.

 it("Should render list item correctly", () => {
    const dummyData = [
      { id: 1, item: "React dummy" },
      { id: 2, item: "Angular dummy" },
      { id: 3, item: "Vue dummy" },
    ];
    render(<FreamworkList frameworks={dummyData} />);
    const frameworkItems = screen
      .getAllByRole("listitem")
      .map((ele) => ele.textContent);
    const dummyItems = dummyData.map((ele) => ele.item);
    expect(frameworkItems).toEqual(dummyItems);
    expect(screen.queryByText("No data !")).toBeNull();
  });

useEffect 테스트

axios 값 획득
획득하면 p 탭에 표시될 프로그램입니다.

import React from "react";
import axios from "axios";

const UseEffectRender = () => {
  const [user, setUser] = React.useState(null);
  const fetchJSON = async () => {
    const res = await axios.get("https://jsonplaceholder.typicode.com/users/1");
    return res.data;
  };
  React.useEffect(() => {
    const fetchUser = async () => {
      const user = await fetchJSON();
      setUser(user);
    };
    fetchUser();
  }, []);

  return (
    <div>
      {user ? (
        <p>
          I am {user.username} : {user.email}
        </p>
      ) : null}
    </div>
  );
};

export default UseEffectRender;

테스트할 내용은
페이지 렌더링 시 p 태그가 존재하지 않습니다.
api 통신을 통해 얻은 후 ap 탭의 문서에 I am이 존재합니다
의 2점.

주안점

async/await를 사용하면api를 얻을 수 있습니다.

import React from "react";
import { render, screen } from "@testing-library/react";
import UseEffectRender from "./UseEffectRender";

describe("useEffect rendering", () => {
  it("Should render only after async function resolved", async () => {
    render(<UseEffectRender />);
    expect(screen.queryByText(/I am/)).toBeNull();
    expect(await screen.findByText(/I am/)).toBeInTheDocument();
  });
});

API 모듈

api의 모크를 만들 때 모크 서버 워크맨을 사용합니다

npm i msw --save-dev

기능
버튼을 누르면 Axios에서 get 데이터가 나와요.
데이터를 가져올 수 있으면 표시 단추가 비활성화됩니다
데이터를 가져올 수 없으면 오류 메시지와 단추가 활성화됩니다

import React from "react";
import axios from "axios";

const MockServer = () => {
  const [clicked, setClicked] = React.useState(false);
  const [username, setUsername] = React.useState("");
  const [error, setError] = React.useState("");

  const fetchUser = async () => {
    axios
      .get("https://jsonplaceholder.typicode.com/users/1")
      .then((res) => {
        const { username } = res.data;
        setUsername(username);
        setClicked(true);
      })
      .catch(() => {
        setError("Fetching Failed!");
      });
  };

  const buttonText = clicked ? "Loaded" : "Start Fetch";
  return (
    <div>
      <button onClick={fetchUser} disabled={clicked}>
        {buttonText}
      </button>
      {username && <h3>{username}</h3>}
      {error && <p data-testid="error">{error}</p>}
    </div>
  );
};

export default MockServer;

msw에서rest와 setupServer 가져오기
먼저 API 아날로그 서버를 만듭니다.

// 擬似的なAPIのサーバーを作る
const server = setupServer(
  rest.get("https://jsonplaceholder.typicode.com/users/1", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ username: "Bred dummy" }));
  })
);

서버 부팅

// 擬似サーバーを起動しておく
beforeAll(() => server.listen());

서버의 내용은 테스트할 때마다 재설정됩니다.

afterEach(() => {
  server.resetHandlers();
  cleanup();
});

테스트 종료 후 서버 종료

afterAll(() => server.close());

테스트1이api를 획득한 후 텍스트 획득과 단추가 활성화되지 않습니다

it("[Fetch success] Should display fetch data correctly and button disable", async () => {
    render(<MockServer />);
    userEvent.click(screen.getByRole("button"));
    expect(await screen.findByText("Bred dummy")).toBeInTheDocument();
    expect(screen.getByRole("button")).toHaveAttribute("disabled");
  });

테스트 2 오류 반환 시 버튼이 활성화되고 오류 메시지가 표시되며 이름 태그가 생성되지 않음

it("[Fetch failure]Should display error msg, no render heading and button able", async () => {
    server.use(
      rest.get(
        "https://jsonplaceholder.typicode.com/users/1",
        (req, res, ctx) => {
          return res(ctx.status(404));
        }
      )
    );
    render(<MockServer />);
    userEvent.click(screen.getByRole("button"));
    expect(await screen.findByTestId("error")).toHaveTextContent(
      "Fetching Failed!"
    );
    expect(screen.queryByRole("heading")).toBeNull();
    expect(screen.getByRole("button")).not.toHaveAttribute("disabled");
  });

전체 이미지

import React from "react";
import { render, screen, cleanup } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

import { rest } from "msw";
import { setupServer } from "msw/node";
import MockServer from "./MockServer";

// 擬似的なAPIのサーバーを作る
const server = setupServer(
  rest.get("https://jsonplaceholder.typicode.com/users/1", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ username: "Bred dummy" }));
  })
);

// 擬似サーバーを起動しておく
beforeAll(() => server.listen());
afterEach(() => {
  server.resetHandlers();
  cleanup();
});
afterAll(() => server.close());

describe("Mocking API", () => {
  it("[Fetch success] Should display fetch data correctly and button disable", async () => {
    render(<MockServer />);
    userEvent.click(screen.getByRole("button"));
    expect(await screen.findByText("Bred dummy")).toBeInTheDocument();
    expect(screen.getByRole("button")).toHaveAttribute("disabled");
  });
  it("[Fetch failure]Should display error msg, no render heading and button able", async () => {
    server.use(
      rest.get(
        "https://jsonplaceholder.typicode.com/users/1",
        (req, res, ctx) => {
          return res(ctx.status(404));
        }
      )
    );
    render(<MockServer />);
    userEvent.click(screen.getByRole("button"));
    expect(await screen.findByTestId("error")).toHaveTextContent(
      "Fetching Failed!"
    );
    expect(screen.queryByRole("heading")).toBeNull();
    expect(screen.getByRole("button")).not.toHaveAttribute("disabled");
  });
});