React vol.14 (React Unit Test)

개요

React JS 를 공부하면서 기본을 정리해두고자 작성

 

왜 테스트코드를 작성해야 하는지  Integration Test, EtoE Test등등에 대해서는 이 글에서는 다루지 않는다. 이 글의 목적은 리액트에서 이루어지는 Unit Test 코드를 어떻게 작성해야 하는지를 기록하기 위해서이다.

 

리액트에서의 Unit Test

Unit이란 가장 작은 단위로써 프로젝트를 구성하고 있는 가장 작은 단위라고하면  Component이다.

유닛 테스트의 대상은 이 작은 단위의 컴포넌트들이라고 말할 수 있다.

테스트 도구

JS 테스팅 프레임워크로써 가장 유명한 Jest로 테스트코드를 작성하고 실행시키며 리액트 컴포넌트를 실제로 렌더링 시키는 것과 같은 시물레이션을 담당하는 React Testing Library를 사용할 것이다. 근데 이것들은 이미 create-react-app으로 프로젝트를 만들때 이미 전부 포함 되어 있다..

테스트 코드의 작성

테스트 코드의 작성에 앞서 어떻게 테스트 코드를 작성해야 할까? 이땐 세개의 키워드만 생각하고 작성하면된다.

• Arrange: 테스트 상태와 테스트 환경, 테스트를 위한 데이터를 준비하자
• Act: 테스트하려는 대상이 어떤 동작(클릭이벤트)의 테스트라면 작성
• Assert: 기대한 결과와 실제 코드의 실행 결과를 비교하는 단계이다. "결과를 단언한다"라서 Assert

밑의 컴포넌트가 이번 테스트 코드작성을 위한 테스트 대상

Greeting.js

const Greeting = () => {
  return (
    <div>
      <h2>Hello World!</h2>
      <p>It's good to see you!</p>
    </div>
  );
};

export default Greeting;

Greeting.test.js

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

describe("Greeting Component", () => {
  test("renders Hello World as a text", () => {
    // Arrage
    render(<Greeting />);

    // Act
    // ...nothing this case

    // Assert
    const helloWorldElement = screen.getByText("Hello World", { exact: false });
    expect(helloWorldElement).toBeInTheDocument();
  });
});

• describe 는 하나의 테스트 그룹(Test Suites)이다. 이 그룹안에는 여러개의 테스트가 존재할 수 있다.
• getByText 는 HTMLElement를 반환하는 함수로써 exact: false를 주면 찾는 테스트가 포함만 되어 있으면 그 Element를 리턴 시켜준다.
• toBeInTheDocument() 는 말 그대로 document안에 존재하냐? 이거다

(여담이지만, render라는 함수 덕분에 다른 컴포넌트를 import 하고 있을때 자동으로 그 컴포넌트도 렌더링되기 때문에 어찌보면 Intergration Test도 간단하게 가능할 수 있다.)

 

아주 기본중에 기본 그냥 튜토리얼 수준의 테스트에 대해서 적어보았다.

실무에서 사용되는 테스트들중에 아주 다양한 케이스가 있는데 그런 케이스에 따라 테스트 코드도 아주 많이 달라지며 다양한 구문을 써야 할 경우가 아주 많을것이다. 예를 들면 API를 요청하는 컴포넌트에 대해서는 jest.fn()으로 mock function을 삽입, 삽입한 mock function은 우리가 입맛대로 결과값을 조정할 수 있으므로 실제로 api를 request 하는 일 없이 테스트를 진행 할 수 있다.

 

너무 많은 케이스가 있으므로 필요할 때 공식문서나 검색해서 찾아보는 식으로 하자.

 

Act를 추가한 테스트나 비동기 테스트의 예시는 이하의 레포를 참조

https://github.com/gmldnjs26/playground-react/tree/develop/react-test

GitHub - gmldnjs26/playground-react