1-1. 무엇을 테스트해야하나요

페이지네이션

페이지 번호나 화살표를 눌렀을때 다음페이지로 제대로 이동하는지 어떻게 태스트해야하나?

페이지가 1~1000까지라면?

일일히 눌러볼수는 없다.

경계값을 생각해서

대입해 검증하기.

codesandbox.io

https://codesandbox.io/p/devbox/simple-pagination-no1t84?file=/src/App.test.tsx

실습 코드샌드박스


import React from "react";
import Pagination from "./App";
import { fireEvent, render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

const PAGE_NUMBER_TEST_ID = "page-number";

describe("Pagination", () => {
  test("Pagination 컴포넌트 렌더링", () => {
    render(
      <Pagination
        totalItems={6}
        itemsPerPage={3}
        pageNumberTestId={PAGE_NUMBER_TEST_ID}
      />
    );

    // assert
    const prevButton = screen.getByText(/previous/i);
    const nextButton = screen.getByText(/next/i);

    const pageNumbers = screen.getAllByTestId(PAGE_NUMBER_TEST_ID);

    pageNumbers.forEach((pageNumber, i) => {
      expect(pageNumber).toHaveTextContent(`${i + 1}`);
    });

    expect(prevButton).toHaveClass("disabled");
    expect(nextButton).not.toHaveClass("disabled");
  });

  test("첫번째 페이지에서는 이전 페이지로 돌아갈 수 없음", () => {
    render(
      <Pagination
        totalItems={6}
        itemsPerPage={3}
        pageNumberTestId={PAGE_NUMBER_TEST_ID}
      />
    );

    // assert
    const prevButton = screen.getByText(/previous/i);
    fireEvent.click(prevButton);

    expect(prevButton).toHaveClass("disabled");
  });

  test("중간 페이지에서는 이전, 다음 페이지로 이동할 수 있음", () => {
    render(
      <Pagination
        totalItems={6}
        itemsPerPage={2}
        pageNumberTestId={PAGE_NUMBER_TEST_ID}
      />
    );

    // assert
    const prevButton = screen.getByText(/previous/i);
    const nextButton = screen.getByText(/next/i);

    fireEvent.click(nextButton);

    expect(prevButton).not.toHaveClass("disabled");
    expect(nextButton).not.toHaveClass("disabled");
  });

  test("마지막 페이지에서는 다음 버튼을 클릭했을 때 다음 페이지로 이동할 수 없음", () => {
    render(
      <Pagination
        totalItems={6}
        itemsPerPage={3}
        pageNumberTestId={PAGE_NUMBER_TEST_ID}
      />
    );

    // assert
    const nextButton = screen.getByText(/next/i);
    fireEvent.click(nextButton);

    expect(nextButton).toHaveClass("disabled");
  });
});

테스트 코드를 깔끔히!

중복되는 부분이 굉장히 많고 원본 함수에 props가 추가되면 테스트케이스의 prop도 추가되어야하는 문제를 해결해보자.


const renderPageNumbers = (itemsPerPage?: number) => {
  render(
    <Pagination
      totalItems={6}
      itemsPerPage={itemsPerPage ?? 3}
      pageNumberTestId={PAGE_NUMBER_TEST_ID}
    />
  );

  const prevButton = screen.getByText(/previous/i);
  const nextButton = screen.getByText(/next/i);

  return {
    prevButton,
    nextButton,
  };
};

위처럼 중복되는 로직을 통일화,

여기서 render함수를 스코프 안에서 실행시켜도 실제 돔에 적용되는듯한 동작방식이 인상적이었음.


describe("Pagination", () => {
  test("Pagination 컴포넌트 렌더링", () => {
    const { prevButton, nextButton } = renderPageNumbers();

    const pageNumbers = screen.getAllByTestId(PAGE_NUMBER_TEST_ID);

    pageNumbers.forEach((pageNumber, i) => {
      expect(pageNumber).toHaveTextContent(`${i + 1}`);
    });

    expect(prevButton).toHaveClass("disabled");
    expect(nextButton).not.toHaveClass("disabled");
  });