Next.js 프로젝트에 Vitest vs Jest, 뭘 써야 할까?

English (N/A)
#Vitest#Jest#Next.js#Testing#테스트

테스팅 프레임워크를 고를 때 요즘 자주 듣는 이름이 Vitest다. "Jest보다 빠르다", "모던하다"는 말이 많아서 궁금해진다. 특히 Next.js 프로젝트를 시작할 때, Vitest를 써도 될까?

결론부터 말하면, 상황에 따라 다르다. 하지만 대부분의 경우 Next.js라면 Jest가 더 무난하다.

Vitest가 뭔가

Vitest는 Vite 기반의 JavaScript/TypeScript 테스팅 프레임워크다.

핵심 특징:

  • 빠르다 - Vite의 빌드 속도를 그대로 활용
  • Jest 호환 API - Jest에서 마이그레이션하기 쉬움
  • ESM 네이티브 - ES Module을 기본으로 지원
  • TypeScript - 별도 설정 없이 바로 사용 가능
import { describe, it, expect } from 'vitest'

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

API가 Jest랑 거의 똑같아서 익숙하다.

사람들이 많이 쓰나

Jest가 여전히 압도적이다.

  • Jest: npm 주간 다운로드 2천만+
  • Vitest: npm 주간 다운로드 500만+

하지만 Vitest는 가장 빠르게 성장하는 테스팅 프레임워크다.

누가 Vitest를 선택하나

  • Vite 생태계 프로젝트 (Vue, Nuxt, SvelteKit)
  • 새로운 프로젝트들
  • 속도가 중요한 대규모 프로젝트
  • Nuxt, Astro, Remix 같은 최신 프레임워크들이 공식 추천

누가 Jest를 계속 쓰나

  • 기존 레거시 프로젝트 (마이그레이션 비용)
  • Create React App 같은 보수적인 보일러플레이트
  • 검증된 생태계가 필요한 곳

결국 Jest가 1위지만, 트렌드는 Vitest 쪽으로 움직이는 중이다.

Vitest가 더 좋은가

단순히 "더 좋다"고 말할 순 없다. 상황에 따라 다르다.

Vitest가 더 좋은 경우

Vite를 이미 쓰고 있다면 → 당연히 Vitest

  • 빌드 설정 공유
  • 일관된 개발 경험

속도가 중요하다면 → Vitest

  • Jest보다 5~10배 빠른 경우도 많음
  • 대규모 테스트 스위트에서 차이가 확 남

새 프로젝트 시작한다면 → Vitest

  • 최신 기술 스택
  • 더 나은 DX (Developer Experience)

ESM을 제대로 쓰고 싶다면 → Vitest

  • Jest는 ESM 지원이 아직 불완전함

Jest가 더 좋은 경우

기존 Jest 프로젝트라면 → Jest 유지

  • "돌아가는 걸 고치지 마라"
  • 마이그레이션 비용 vs 이득 계산 필요

생태계/플러그인이 중요하다면 → Jest

  • 훨씬 많은 레퍼런스, 플러그인, 튜토리얼
  • 특수한 환경 (React Native 등)에선 Jest만 가능

안정성이 최우선이라면 → Jest

  • 더 오래 검증됨
  • 엣지 케이스 많이 해결됨

Next.js에서 Vitest를 쓸 수 있나

쓸 수는 있다. 하지만 조금 미묘하다.

문제점

Next.js는 Webpack/Turbopack 기반인데, Vitest는 Vite 기반이다.

이게 뭐가 문제냐면:

  1. 설정이 까다롭다

    • next.config.js 처리가 자동으로 안 됨
    • Next.js 특수 기능들 (Image, Font, CSS Modules) 테스트 시 추가 설정 필요

  2. 공식 가이드가 Jest 기준

    • Next.js 공식 문서 예제가 다 Jest
    • 막히면 레퍼런스 찾기 어려움

  3. Vite의 이점이 덜하다

    • Next.js는 애초에 Vite가 아니라 Vitest의 핵심 장점이 반감됨

그래도 쓸 수 있는 이유

  1. 속도는 확실히 빠르다

    • 유닛 테스트가 많다면 체감 가능

  2. 설정 문제는 해결 가능하다

    • @vitejs/plugin-react + path mapping만 잘 하면 됨

  3. 커뮤니티 사례 많아짐

    • 최근엔 Next.js + Vitest 조합 쓰는 사람들 많음

Next.js에서 뭘 써야 하나

단순 유닛 테스트 위주

Vitest 써도 괜찮다.

순수 함수, 유틸리티, 비즈니스 로직 테스트가 주된 목적이라면 Vitest의 속도 이점을 누릴 수 있다. Next.js 특수 기능을 별로 안 쓴다면 설정 문제도 크지 않다.

컴포넌트 테스트 많음

Jest + Testing Library 추천.

Next.js 컴포넌트 (특히 next/image, next/font, next/link 같은 거) 테스트가 많다면 Jest가 훨씬 편하다. 공식 가이드 따라하면 막힐 일이 없다.

처음 시작

Jest 추천.

Next.js 공식 문서 예제가 다 Jest라서 막힐 일이 없다. "일단 돌아가게" 만드는 게 최우선이라면 Jest가 답이다.

이미 Vitest 경험 있음

Vitest 써도 된다.

설정 좀 만지면 문제없다. 빠른 테스트 실행이 개발 경험을 확실히 개선해준다.

결론

Next.js는 Vite 프로젝트가 아니다.

그래서 Vitest의 이점이 상대적으로 덜하다. Jest가 더 무난한 선택이다.

하지만 속도 때문에 Vitest를 쓰고 싶다면? 충분히 가능하다. 초기 설정에 시간 좀 쓸 각오만 하면 된다.

요약

  • 새 Next.js 프로젝트 → Jest (무난함)
  • 유닛 테스트 위주 → Vitest (빠름)
  • 컴포넌트 테스트 많음 → Jest (편함)
  • Vite 프로젝트 (Vue, Svelte) → Vitest (당연함)
  • 기존 Jest 프로젝트 → Jest 유지 (굳이 바꿀 이유 없음)

테스팅 프레임워크는 "무엇이 더 좋은가"보다 "내 상황에 맞는가"가 중요하다. 트렌드를 쫓기보다 프로젝트 특성을 먼저 생각하자.

참고