프론트엔드 테스팅 기초 (Vitest & React Testing Library)
버그 없는 UI를 향한 첫걸음, 프론트엔드 테스팅
안정적인 프론트엔드 애플리케이션을 보장하기 위한 단위 테스트(Unit Test) 작성법입니다. 가장 빠르고 현대적인 Vitest와 실제 사용자의 동작을 모방하는 React Testing Library(RTL)를 사용하여 견고한 컴포넌트를 설계합니다.
⚡ Vitest: Vite 기반의 압도적인 속도
과거에는 Jest를 주로 사용했지만, 최근 Vite 환경의 대두와 함께 Vitest가 표준으로 자리잡고 있습니다. Vite의 빌드 파이프라인을 그대로 공유하므로 설정이 극도로 간단하며, 테스트 실행 속도가 기존 대비 압도적으로 빠릅니다.
👤 RTL: 사용자 중심의 테스트 철학
React Testing Library는 컴포넌트의 내부 상태(State)나 구현 방식을 검증하지 않습니다. 대신 철저하게 "실제 사용자가 화면에서 텍스트를 보고, 버튼을 클릭했을 때 올바른 결과가 나오는가?"라는 행동 중심으로 테스트를 작성하도록 강제합니다.
import React from 'react';
import Counter from './Counter';
export default function App() {
return (
<div style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px', textAlign: 'center' }}>
<h2 style={{ marginTop: 0 }}>Vitest 테스트 대상 컴포넌트</h2>
<p style={{ color: '#64748b', marginBottom: '20px' }}>아래의 카운터 컴포넌트가 테스트 대상입니다.</p>
<Counter />
</div>
);
}