프론트엔드에서 함수, 유틸, 컴포넌트 로직을 검증할 때 가장 먼저 만나는 게 테스트 러너다. 실무에서는 Jest와 Vitest가 자주 비교된다.

📝 한 줄로

• Jest: 오래 쓰인 표준. Babel/Webpack 생태계와 잘 맞음.
• Vitest: Vite 기반. ESM, TypeScript, 빠른 watch가 기본에 가깝다.

둘 다 describe / it / expect API가 비슷해서, 테스트 코드 작성감은 거의 같다.

🃏 Jest

• Meta에서 시작한 러너. React 커뮤니티에서 오랫동안 기본값이었다.
• 한 패키지에 가깝게 제공한다.
  • jsdom (DOM API)
  • mock
  • snapshot
  • coverage
• Create React App, 많은 레거시 프로젝트의 기본 설정이다.

describe('sum', () => {
  it('adds numbers', () => {
    expect(1 + 2).toBe(3);
  });
});

⚡ Vitest

• Vite와 설정을 공유한다. (vite.config.ts의 alias, plugin)
• ESM, TypeScript를 별도 변환 설정 없이 쓰기 쉽다.
• watch, HMR에 가까운 재실행이 빨라서 로컬 개발 체감이 좋다.
• API가 Jest와 호환되는 편이라 마이그레이션 비용이 낮다.

import { describe, expect, it } from 'vitest';

describe('sum', () => {
  it('adds numbers', () => {
    expect(1 + 2).toBe(3);
  });
});

🎯 고를 때

이 블로그(mason-log)는 Vitest를 쓴다. (npm run test)

💡 같이 알아둘 것

• 러너는 실행 환경이다. 컴포넌트를 사용자처럼 다루는 건 Testing Library 쪽이다.
• E2E(브라우저 전체 플로우)는 Playwright, Cypress가 담당한다.
• mock은 편하지만 과하면 구현에 묶인 테스트가 된다.
  • 입력, 출력을 우선한다
  • 사용자가 관측 가능한 결과를 우선한다

🔗 참고 자료

• Vitest — Vitest 공식 사이트와 문서 진입점이다.
• Vitest Guide — 설치, 설정, 기본 사용법을 안내한다.
• Jest Getting Started — 비교 대상인 Jest 공식 시작 문서다.