React와 TDD

상현·2024년 3월 2일

React

목록 보기

20/24

TDD는 어떤 특정 언어나 프레임워크에 종속된 단어가 아닌 개발 방식 중 하나이며 Test-Driven Development의 약자로, 테스트 주도 개발이라는 뜻이다.

TDD는 먼저 테스트 코드를 작성하고, 그 테스트 코드를 통과하도록 실제 코드를 작성하는 개발 방식이다.

보통 빈 파일(함수, 컴포넌트)를 먼저 작성하고, 테스트 코드를 작성 후, 그 테스트 코드를 통과하기 위한 실제 코드를 작성하는 방식으로 진행된다.

리액트에서 TDD를 하기 위해서는 testing-library와 test runner(jest, vitest 등)을 설치해 사용한다.

React Testing Library (RTL)는 테스트를 위한 가상 DOM을 생성하고 DOM과 상호 작용하기 위한 유틸리티를 제공한다.

요소 검색: RTL은 DOM에서 요소를 쉽게 찾을 수 있는 유틸리티 함수를 제공한다. getByRole, getByText, getByLabelText 등의 함수를 사용하여 특정 요소를 검색할 수 있다.
요소 상호 작용: 테스트하는 컴포넌트와 상호 작용할 수 있는 유틸리티 함수를 제공한다. fireEvent등을 사용하여 클릭, 입력, 포커스 이벤트 등을 시뮬레이션할 수 있다.
브라우저 없는 테스트: RTL을 사용하면 브라우저 없이도 테스트할 수 있다. 가상 DOM을 생성하여 테스트를 실행하므로 실제 브라우저 환경이 필요하지 않다.

테스트 유형은 다음과 같이 있다.

유닛 테스트
- 함수나 개별 React 컴포넌트와 같은 코드 단위를 테스트 한다. 다른 코드 와의 상호 작용은 테스트하지 않는다.
- 예시: 컴포넌트 내 함수의 출력값 검증
통합 테스트
- 여러 컴포넌트, 함수가 함께 작동하는 방식을 테스트한다. 함수 간의의 상호 작용을 테스트한다.
- 예시: 컴포넌트 간 상호 작용, 함수 간 상호 작용
기능 테스트
- 소프트웨어의 특정 기능을 테스트한다. 특정 코드 함수가 아닌 일반적인 동작을 테스트한다.
- 유닛 테스트와 유사하지만 코드 자체가 아닌 기능 전체를 테스트한다.
- 예시1: 데이터 입력 후 제출 시 정상 작동 확인
- 예시2: 입력 오류 시 적절한 에러 표시 확인
인수 테스트 (E2E 테스트)
- 실제 브라우저와 서버를 사용하여 전체 애플리케이션을 테스트한다.
- Cypress나 Selenium과 같은 도구를 사용한다.
- 사용자 시나리오를 따라 전체적인 기능 검증을 수행 한다.

React Testing Library를 통하여 테스트 코드를 작성한다. Testing Library는 다음과 같은 역할을 도와준다.

컴포넌트 렌더링 및 상호 작용
- render 함수를 사용하여 컴포넌트를 가상 DOM에 렌더링한다.
- fireEvent 함수를 사용하여 컴포넌트에 대한 상호작용을 테스트한다.
- getByText, getByRole 등 다양한 쿼리 함수를 사용하여 컴포넌트의 DOM 요소를 찾는다.
- 우선순위: https://testing-library.com/docs/queries/about
단언(assertion) 검증
- jest-dom 라이브러리를 추가 설치하여 확인한다.
- toBeInTheDocument 함수를 사용하여 컴포넌트가 DOM에 존재하는지 확인한다.
- toHaveTextContent 함수를 사용하여 컴포넌트가 올바른 텍스트를 표시하는지 확인한다.
- https://github.com/testing-library/jest-dom

이제 작성된 테스트를 테스트러너를 통해서 진행한다.

대표적인 테스트러너는 Jest, Vitest 등이 있다.

테스트가 통과, 실패를 나누는 것은 에러가 throw 되냐 안되냐의 차이 뿐이다.

// 통과
test("empty test", () => {
  // 아무것도 없는 빈 함수
});

// 실패
test("test throws error explicitly", () => {
  throw new Error("테스트 오류 발생");
});

테스팅 라이브러리에서는 assertion에서 에러를 throw 한다.

프론트엔드 개발자