React Testing - Jest/Vitest/RTL

1. 역할의 차이

- Jest/ Vitest (Test Runner) : 테스트를 실행주는 환경이다. 테스트 파일을 찾고, 실행하고, 성공/실패 여부를 알려준다.

- RTL (Tesing Utility) : 리액트 컴포넌트를 조작하는 도구다. 버튼을 클릭하거나, 화면에 글자가 있는지 확인하는 기느을 제공한다.

 

---

2. Test Runner 비교: Jest VS Vitest

Jest

 

• 특징: Meta(페이스북)에서 만들었으며, 오랫동안 리액트 생태계의 표준이었습니다. 'Create React App'의 기본 설정이기도 했습니다.
• 장점: 레퍼런스가 방대하고 안정적입니다. 거의 모든 상황에 대한 문서가 존재합니다.
• 단점: 설정이 다소 복잡할 수 있으며, 최신 빌드 도구인 Vite와 함께 쓸 때 속도가 느리고 설정 충돌이 날 수 있습니다
• 추천 상황: Next.js(Page Router), 레거시 프로젝트

Vitest

• 특징: Vite를 만든 팀에서 개발했습니다. Vite 프로젝트를 쓴다면 무조건 추천합니다.
• 장점: 압도적으로 빠릅니다. Vite의 설정을 그대로 공유하므로 별도의 복잡한 설정이 필요 없습니다. Jest와 문법이 거의 99% 호환되어 갈아타기 쉽습니다.
• 단점: Jest에 비해 역사가 짧아 아주 특수한 케이스의 자료는 적을 수 있습니다.
• 추천 상황 : Vite 기반 프로젝트, 최신 리액트

---

 

3. Testing Utility: RTL

 

RTL 은 선택지가 아니라, 리액트 테스트의 표준이다.

• 철학: "사용자가 사용하는 방식 그대로 테스트하라."
• 하는 일:
  • 가상 돔(Virtual DOM)에 컴포넌트를 렌더링합니다 (render).
  • 화면에서 특정 텍스트나 버튼을 찾습니다 (screen.getByText).
  • 클릭이나 입력 같은 이벤트를 발생시킵니다 (fireEvent, userEvent).

참고: RTL은 혼자서 작동할 수 없습니다. 반드시 Jest나 Vitest 같은 러너가 있어야 실행됩니다.

 

---

 

4. 예시로 파악하기

// 1. Vitest (또는 Jest)에서 가져온 함수둘
import { descibe, it, expect } from 'vitest' ;

// 2. RL에서 가져온 함수들
import { render, screen } from '@testing-library/react';
import App from './App';

// 'describe' , 'it'은 Test Runner(Vitest/Jest)가 제공하는 "테스트 블록'이다.
describe('App 컴포넌트 테스트'., () => {
	it('환영 문구가 보여야 한다', () => {
    	
        // 'render', 'screen'은 RTL이 제공하는 "도구" 다.
        render(<App />);
        
        // 화면에 "Welocome"이라는 텍스트가 있는지 찾는다.
        const element = screen.getByText(/Welocme/i);
        
        //'expect'는 다시 Test Runner의 검증 기능이다.
        expect(element).toBeInThedocument();
    });
});

 

https://vitest.dev/guide/

Vitest