React Testing Pipeline 이해하기 (초보자를 위한)

Source: Dev.to

소개

React Testing Library (RTL) 로 React를 테스트할 때, 내부에서 무슨 일이 일어나고 있는지 이해하면 도움이 됩니다. 이 가이드는 컴포넌트 함수부터 최종 테스트 어설션까지 파이프라인을 초보자도 이해하기 쉬운 방식으로 풀어 설명합니다.

컴포넌트 함수 (App)

function App() {
  return 
## Tasks
;
}

• React 컴포넌트는 JSX 를 반환하는 함수에 불과합니다.
• JSX는 UI가 어떻게 보여야 하는지를 선언적으로 기술한 것이며, 아직 실제 HTML은 아닙니다.
• React는 먼저 이 JSX를 처리해야 합니다.

JSX → Virtual DOM

React는 JSX를 받아 Virtual DOM 이라는 메모리 상의 구조를 생성합니다. 이것은 실제 브라우저 DOM이 아니라 청사진에 해당합니다.

내부 표현 예시:

{
  "type": "h1",
  "props": { "children": "Tasks" }
}

Virtual DOM 덕분에 React는 이전 UI 트리와 새로운 UI 트리를 효율적으로 diff 하여 변경된 부분만 업데이트할 수 있습니다.

테스트에서 렌더링

render();
screen.getByText('Tasks');

1. render() – React가 컴포넌트를 jsdom 안의 Virtual DOM에 렌더링합니다. jsdom은 테스트용 가짜 브라우저 환경입니다.
2. screen.getByText('Tasks') – 사용자가 보는 것과 같은 방식으로 Virtual DOM을 조회합니다.

CSS 선택자나 내부 상태를 직접 겨냥하는 대신, 접근 가능한 역할, 레이블, 텍스트 로 조회합니다. 이는 RTL이 추구하는 원칙과 일치합니다:

“테스트가 소프트웨어 사용 방식과 닮을수록, 더 큰 신뢰를 얻을 수 있다.”

어설션

expect(screen.getByText('Tasks')).toBeInTheDocument();

• 해당 요소가 DOM에 존재함을 확인합니다(즉, 사용자가 볼 수 있다는 의미).
• React가 어떻게 렌더링했는지를 테스트하는 것이 아니라, 기대한 UI가 존재하는지를 검증합니다.
• 이렇게 하면 useState, useEffect 혹은 컴포넌트 분할 같은 내부 구현 변경에 테스트가 깨지지 않게 됩니다.

파이프라인 개요

레스토랑 비유

셰프가 채소를 어떻게 썰었는지는 중요하지 않다—맛만 좋으면 된다. 마찬가지로 React가 상태를 어떻게 관리하든, 올바른 UI가 나타나는지만 중요합니다.

요약

1. React 컴포넌트는 JSX를 반환하고 → React는 이를 Virtual DOM으로 변환합니다.
2. React Testing Library는 그 Virtual DOM을 jsdom 안에 렌더링합니다.
3. getByText 같은 쿼리는 사용자가 UI와 상호작용하는 방식을 모방합니다.
4. toBeInTheDocument 같은 어설션은 사용자가 실제로 보는 것을 확인합니다.

이 접근 방식은 컴포넌트 내부를 리팩터링하더라도 테스트를 안정적이고 의미 있게 유지합니다.