Jest vs Vitest 어느 것을 사용해야 하는가?

테스트 코드에는 오랫동안 자리 잡아온 Jest라는 테스트 라이브러리가 있습니다. 그래서 Jest는 많이 알고 있지만, Vitest에 대해서는 잘 모르실 수 있습니다.

그래서 Jest와 Vitest의 대하여 알아보고 어느 것을 사용할지 알아보는 시간을 갖도록 하겠습니다.

Jest

Jest란?

Jest는 JavaScript와 TypeScript 애플리케이션을 테스트하기 위해 설계된 테스트 프레임워크입니다. Facebook(현 Meta)에서 개발했으며, 특히 React 애플리케이션에서 널리 사용되지만, React에 국한되지 않고 다양한 JavaScript 환경에서 활용할 수 있습니다.

Jest는 유닛 테스트, 통합 테스트, 스냅샷 테스트 등을 지원하며, 강력하고 유연한 기능으로 인해 업계 표준으로 자리 잡았습니다.

 

Jest의 특징

1. 모든 것을 포함한 올인원 테스트 프레임워크

• Jest는 테스트 러너, 어설션 라이브러리, 모의(Mock)/스파이(Spy) 기능 등 테스트에 필요한 모든 도구를 한 곳에 제공합니다.

2. 스냅샷 테스트

• Jest는 스냅샷 테스트를 기본 제공하여, UI 컴포넌트나 함수의 출력을 캡처하고 이후 변경 사항을 쉽게 감지할 수 있습니다.
  • ex) React 컴포넌트 렌더링 결과를 캡처하여 코드 변경 시 UI의 변화를 확인.

3. 빠른 병렬 실행

• 테스트를 병렬로 실행해 대규모 프로젝트에서도 빠른 속도를 보장합니다.
• Node.js의 워커 스레드를 활용하여 테스트를 효율적으로 분산 처리합니다.

4. TypeScript와 Babel 지원

• Jest는 TypeScript와 Babel을 쉽게 통합할 수 있습니다.
• ts-jest 또는 Babel 설정을 사용해 TypeScript 프로젝트에서 Jest를 활용 가능합니다.

5. 모듈 모의(Mock) 기능

• Jest는 모듈이나 함수의 동작을 가로채거나 대체하는 모의(Mock) 기능을 내장하고 있습니다.
• API 호출, 외부 모듈, 타사 라이브러리를 모의로 대체하여 테스트할 수 있습니다.

6. 코드 커버리지 리포트

• Jest는 테스트 실행 시 코드 커버리지를 분석하고, 테스트가 소스 코드의 어느 부분을 다루고 있는지 시각적으로 보여줍니다.
• 커버리지 결과를 HTML, JSON 등의 형식으로 출력할 수 있습니다.

7. 다양한 환경 지원

• Jest는 Node.js 환경뿐만 아니라 브라우저 환경에서도 동작합니다.
• DOM 관련 테스트는 jsdom을 통해 브라우저 없이도 수행 가능합니다.

 

Jest의 장점

1. 사용자 친화적

• 설정이 단순하며, 기본적으로 사용할 수 있는 기능이 많아 학습 곡선이 완만합니다.

2. 스냅샷 테스트

• 컴포넌트 기반 UI 라이브러리(예: React)에서 상태 변화를 쉽게 추적할 수 있습니다.

3. 풍부한 생태계

• 큰 커뮤니티와 플러그인 생태계를 가지고 있어 확장성이 뛰어납니다.

4. 빠른 속도

• 병렬 테스트 실행과 모의(Mock) 기능으로 성능이 뛰어납니다.

5. 다양한 환경 지원

• 브라우저, Node.js, TypeScript 등 다양한 환경에서 사용할 수 있습니다.

 

Jest의 단점

1. 느린 속도 (대규모 프로젝트에서)

• 독립적인 실행 환경으로 인해 Vite 기반 프로젝트에 비해 느릴 수 있습니다.

2. 설정 필요

• Vite 같은 최신 번들러와 통합하려면 추가 설정(Babel, ts-jest 등)이 필요합니다.

3. ESM 지원이 제한적

• 기본적으로 CommonJS 환경에서 동작하며, ESM(ES Modules) 지원은 제한적입니다.

 

 

Vitest

Vitest란?

Vitest는 JavaScript/TypeScript 기반의 테스트 프레임워크로, Vite를 기반으로 빠르고 효율적인 테스트 환경을 제공합니다.

특히 Vite로 개발되는 프로젝트와 잘 통합되며, 다음과 같은 주요 특징들을 갖고 있습니다.

 

Vitest 특징

1. 빠른 테스트 실행

• Vite의 빠른 모듈 번들링과 HMR(Hot Module Replacement) 기술을 활용해, 테스트가 매우 빠르게 실행됩니다.

2. 직관적인 사용법

• Jest와 유사한 문법과 API를 제공하므로, Jest 사용 경험이 있다면 쉽게 적응할 수 있습니다.

3. TypeScript 지원

• TypeScript를 기본적으로 지원하여, 타입 검사를 테스트 코드에 자연스럽게 통합할 수 있습니다.

4. ESM(ES Modules) 지원

• Vitest는 ESM을 기본적으로 지원하며, 최신 JavaScript 표준을 따릅니다.

5. 유연한 설정

• Vite 설정 파일을 재사용할 수 있어, 기존 Vite 프로젝트에 쉽게 통합할 수 있습니다.

6. 커버리지 리포트 제공

• 코드 커버리지 도구와 통합하여, 테스트가 소스 코드의 어느 부분을 검증하고 있는지 시각적으로 보여줍니다.

 

Vitest의 장점

1. 빠른 모듈 로딩

• Vite의 빠른 번들링 및 HMR(Hot Module Replacement) 기술을 사용해 테스트 실행 속도가 매우 빠릅니다.

2. 캐싱

• Vite의 캐싱 시스템을 활용하여, 변경된 모듈만 다시 로드하므로 반복 실행 시 속도가 빠릅니다.

3. ESM 기반

• ESM(ES Modules)을 기본으로 사용하여 최신 브라우저 환경과 유사한 성능을 제공합니다.

 

Vitest의 단점

1. 생태계와 성숙도

• Jest에 비해 상대적으로 더 작은 생태계를 보유하고 있어 문제 해결을 위한 참고 자료나 커뮤니티 지원이 제한적
• 비교적 새로운 테스트 프레임워크이기 때문에 안정성 면에서 검증이 덜 된 상태

2. 호환성 문제

• Jest에서 마이그레이션 시 일부 테스트 코드 수정이 필요할 수 있음

3. 설정의 복잡성

• Vite 설정과 통합되어 있어 때로는 설정이 복잡해질 수 있음

 

Vitest vs Jest 장단점 비교

특징	Jest	Vitest
설치 및 설정	설정 없이 바로 사용 가능, 추가 설정으로 더 강력한 기능 제공.	Vite 프로젝트에서 간단하지만 비 Vite 프로젝트에서는 복잡.
성능	대규모 프로젝트에서 느릴 수 있음.	Vite 덕분에 테스트 실행 속도가 매우 빠름.
TypeScript 지원	추가 설정 필요 (e.g., ts-jest, Babel).	TypeScript를 기본적으로 지원.
커뮤니티	큰 커뮤니티와 풍부한 자료 제공.	성장 중인 커뮤니티, Vite 생태계와 밀접.
사용 사례	Node.js, React, 비 Vite 프로젝트.	Vite 기반의 현대적 프론트엔드 프로젝트.

 

 

여기까지 Jest와 Vitest의 장단점에 대하여 알아보았습니다.

둘다 장단점이 있지만, 필자의 개인적인 의견은 Vitest가 Jest의 대부분의 기능을 제공하고 실행속도가 빠르기 때문에 프로젝트 규모가 커진 다는 가정하에 테스트 실행속도가 빠른 Vitest가 좋다고 판단이 됩니다.