testing-library usePagination custom hook test

참고

• https://dev.to/mbarzeev/creating-a-react-custom-hook-using-tdd-2o

설치

yarn add -D @testing-library/react-hooks

import

import { renderHook, act } from "@testing-library/react-hooks";
import usePagination from "../hooks/usePagination";

usePagination.ts 반환 값

작성한 usePagination.ts 파일은 다음과 같은 정보를 반환한다.
1. page // 현재 페이지 넘버
2. isEndPage // 마지막 페이지 여부 (boolean)
3. handlePrevPage() 이전 페이지 이동 함수
4. handleNextPage() 다음 페이지 이동 함수

renderHook() 함수에 React Hook 함수를 호출하는 코드를 인자로 넘기면 result 속성을 담고 있는 객체를 반환한다.
result 객체는 current 속성을 가지고, 이 속성을 통해서 React Hook 함수의 반환값에 직접 접근할 수 있다

1.초기 상태를 제대로 반환하는 테스트 코드

아래와 같이console.log로 result 객체의 current 속성을 보면 작성한 usePagination 커스텀훅의 반환값을 확인할 수 있다.

  it("초기 상태인 page와 totalCount를 반환한다", () => {
    const { result } = renderHook(() => usePagination(1, 100));
    // console.log("result = ", result.current);
    expect(result.current[0]).toBe(1);
    expect(result.current[1]).toBe(false);
  });

위에 result.current 값을 확인해보면 index를 활용해서 반환 값에 접근할 수 있다.

result.current[0] = page
result.current[1] = isEndPage
result.current[2] = handlePrevPage
result.current[3] = handleNextPage

2. 이전 페이지, 다음 페이지 이동 함수 호출 테스트

이전 페이지로 이동하는 함수를 호출했을 경우 page-1 값이 반환되고
다음 페이지로 이동하는 함수를 호출했을 경우 page+1 값이 반환된다

  it("handlePrevPage 함수를 호출하면 이전 페이지 상태값을 반환한다(page - 1)", () => {
    const { result } = renderHook(() => usePagination(2, 100));
    console.log(result.current);
    act(() => {
      result.current[2]();
    });

    expect(result.current[0]).toBe(1);
    expect(result.current[1]).toBe(false);
  });

  it("handleNextPage 함수를 호출하면 다음 페이지 상태값을 반환한다(page + 1)", () => {
    const { result } = renderHook(() => usePagination(1, 100));

    act(() => {
      result.current[3]();
    });

    expect(result.current[0]).toBe(2);
    expect(result.current[1]).toBe(false);
  });