react-native expo에서 jest testing

라이브러리 설치

npm install --save-dev jest @testing-library/react-native @testing-library/jest-native

expo를 활용한 프로젝트를 생성하면 자동으로 jest가 포함되어 설치되지만, 테스트 라이브러리나 설정은 최소한만 제공되어 따로 테스팅 라이브러리를 설치해야 한다.

 

@testing-library/react-native는 컴포넌트를 렌더링하듯이 돌려서 사용자 입장에서 테스트할 수 있는 라이브러리이다.

@testing-library/jest-native는 테스트 라이브러리의 기능을 확장하여 유연하게 사용할 수 있게 하는 라이브러리이다.

 

테스팅 코드

import ProfileBox from "@/components/main/ProfileBox";
import { render } from "@testing-library/react-native";
import React from "react";

jest.mock("react-native/Libraries/Image/Image", () => "Image");

describe("ProfileBox", () => {
  const profileData = {
    level: 21,
    name: "문미새",
    profileImage: require("@/assets/images/testImg/blackSpirit.jpg"),
    medalImage: require("@/assets/images/testImg/testMedal.png"),
  };

  const getFormattedDate = () => {
    const today = new Date();
    console.log(today);
    const options = { month: "long", day: "numeric", weekday: "long" };
    const formattedDate = new Intl.DateTimeFormat("ko-KR", options).format(
      today
    );
    return formattedDate;
  };

  const dummyDate = getFormattedDate();

  // 유저 데이터 조회
  it("유저 정보를 올바르게 렌더링한다.", () => {
    const { getByText } = render(
      <ProfileBox date={dummyDate} profileData={profileData} />
    );

    expect(
      getByText(`LV.${profileData.level} ${profileData.name}`)
    ).toBeTruthy();
  });
    
    // 날짜 가져오기
    it("날짜를 올바르게 가져온다.", () => {
        const { getByText } = render(
            <ProfileBox date={dummyDate} profileData={profileData} />
        );

        expect(getByText(`📆 ${dummyDate}`)).toBeTruthy();
    })

  // 프로필 이미지와 레벨 메달 가져오기
  it("프로필 이미지와 레벨 메달을 올바르게 렌더링한다.", () => {
    const { getByTestId } = render(
      <ProfileBox date={dummyDate} profileData={profileData} />
    );

    expect(getByTestId("profile-image")).toBeTruthy();
    expect(getByTestId("medal-image")).toBeTruthy();
  });
});

테스트 할 컴포넌트명 뒤에 .test를 붙여 테스트 파일을 생성해주고, 인자를 보내거나 받아야 할 데이터가 있다면 데이터를 전역으로 작성해서 각 테스트에서 사용하면 된다.

 

render()는 테스트 단계에서 컴포넌트를 시각화하여 테스팅할 수 있는 메소드이며, 실제로 화면에 보이진 않고 가상에서 올바르게 데이터가 출력되는지 확인하는 역할을 한다.

render에 테스팅할 컴포넌트를 연결했으면 expect()를 사용하여 데이터의 출력 기댓값을 작성해주는데, toBeTruthy()를 통해 기댓값 대로 출력이 되면 pass가 뜨고 다른 값으로 출력되면 fail이 뜬다. 이걸로 내가 원하는 데이터대로 출력되는지 확인 가능하다.

 

또한, 테스팅은 한 번에 전부 확인하는 것 보다 받아오는 데이터 별로 나누어서 테스팅하는게 올바르다고 하며, 이미지 로드를 테스팅할 경우, jest.mock를 통해 이미지 파일을 받을 수 있게 작성해줘야 한다.

현재는 더미 데이터로 받아왔지만 이 후에 비동기 통신을 사용해서 서버에서 데이터를 올바르게 받아오는 지 확인하는 테스트로 변경할 예정이다.