Vitest — 빠르고 현대적인 테스트 러너

Frontend/Testing

Vitest — 빠르고 현대적인 테스트 러너

JTB 2025. 10. 28. 10:47

React, Vue, Svelte 같은 프론트엔드 개발 환경이 ESM(ECMAScript Module) 중심으로 진화하면서, 기존 테스트 툴(Jest 등)의 한계가 점점 드러나기 시작했다. 이 흐름 속에서 등장한 것이 Vite 생태계를 기반으로 한 Vitest다.

1. Vitest란?

Vitest는 Vite 팀에서 공식적으로 만든 테스트 러너(Test Runner)다. Vite의 고속 번들링 및 HMR(Hot Module Replacement) 아키텍처를 그대로 활용해, 테스트 실행 속도와 개발 경험을 극대화한다.

즉, “Vitest는 Vite의 빌드 엔진을 그대로 사용하는 초고속 테스트 러너다.”

2. 다른 테스트 툴과 비교

항목	Vitest	Jest	Mocha
빌드 기반	Vite (ESM native)	Babel / Jest transformer	Webpack or manual setup
속도	🚀 매우 빠름 (캐시 + HMR)	느림 (트랜스파일링 필요)	중간 (환경 구성에 따라 다름)
환경 통합	Vite 프로젝트에 자연스럽게 통합	별도 설정 필요	설정 복잡
TypeScript 지원	내장 지원 (Vite 설정 사용)	ts-jest 필요	ts-node 설정 필요
Mocking API	내장 (Jest 호환 API)	내장	chai + sinon 등 외부 패키지 필요
Ecosystem	Vite, Vue, React, Svelte 완벽 호환	React 중심	범용적이지만 구식
Watch 모드	빠름 (Vite HMR 이용)	느림	느림

3. Vitest의 주요 장점

(1) Vite와 동일한 빌드 파이프라인 사용

Vitest는 Vite의 빌드 설정(vite.config.ts)을 그대로 사용한다. 즉, 테스트 환경이 실제 개발 환경과 완벽하게 일치한다.

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom", // 브라우저 환경에서 테스트
  },
});

Jest처럼 Babel이나 ts-jest를 따로 설정할 필요가 없다. 한 번 설정하면 개발 + 테스트 환경이 동일하게 유지된다.

(2) ESM 기반 — 트랜스파일링 없이 즉시 실행

Jest는 CommonJS 기반이기 때문에, ESM(import/export) 코드를 실행하려면 *Babel 트랜스파일링이 필요하다. Vitest는 ESM을 자연스럽게 실행하기 때문에 훨씬 빠르다.

*Babel 트랜스파일링(Transpiling)

최신 JavaScript 문법(ES6+, JSX, TypeScript 등)을 구형 브라우저나 Node.js가 이해할 수 있는 코드로 변환하는 과정을 말한다.

즉, Babel은 새로운 문법을 옛날 문법으로 바꿔주는 번역기다.

Transpile = Transform + Compile(같은 언어 내에서 문법 수준만 바꾸는 것)

(3) 빠른 테스트 속도 (HMR & 캐시)

Vitest는 Vite의 Hot Module Replacement(HMR) 구조를 이용해 테스트 중 변경된 파일만 다시 실행한다. 즉, 전체 테스트를 다시 돌리지 않아도 된다. “수천 개 테스트 중 하나의 컴포넌트를 수정해도, 해당 테스트만 즉시 재실행”

(4) Jest와 호환되는 API

Vitest는 Jest의 테스트 문법(describe, it, expect, vi.mock)을 그대로 쓸 수 있다. Jest 사용자라면 별도 학습 없이 바로 전환 가능하다.

import { describe, it, expect, vi } from "vitest";

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

(5) React Testing Library와 완벽 통합

React Testing Library를 함께 쓸 때도 설정이 매우 간단하다. jsdom 환경이 기본 제공되기 때문에, 브라우저 환경 테스트가 바로 가능하다.

// Example.test.tsx
import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import App from "../App";

describe("App", () => {
  it("renders title", () => {
    render(<App />);
    expect(screen.getByText("Hello")).toBeInTheDocument();
  });
});

4. 왜 Vite와 함께 써야 할까?

Vitest는 Vite의 내부 빌드 파이프라인을 그대로 재사용한다. 즉, Vite 없이 Vitest만 사용하면 오히려 이점을 절반만 누리게 된다.

이유	설명
공유 설정	동일한 vite.config.ts 설정을 사용 (TS, alias, plugin 등)
빠른 실행	Vite의 캐시, HMR 시스템 활용
동일 환경	개발 환경 = 테스트 환경 = 빌드 환경
생태계 통합	Vite plugin, 환경 변수, alias(@/...) 등이 그대로 작동

즉, Vitest는 Vite 프로젝트와 결합될 때 “완전한 개발·테스트 통합 환경”을 제공한다.

5. 요약 및 결론

항목	내용
Vitest의 핵심 가치	빠르고, 간단하며, Vite 기반 프로젝트와 완벽 통합
주요 장점	ESM 네이티브 지원, 빠른 속도, Jest API 호환성
Vite와 함께 써야 하는 이유	같은 빌드 파이프라인을 공유해 개발-테스트 환경 일관성 유지
적합한 상황	Vite + React/Vue/Svelte 프로젝트의 단위 테스트 환경 구축 시

“Vitest는 Vite 생태계 기반의 테스트 러너로, ESM을 직접 실행하고 Vite의 빌드 캐시를 그대로 활용하기 때문에 Jest보다 훨씬 빠르다. 또 Vite 설정을 그대로 재사용할 수 있어, 개발 환경과 테스트 환경 간의 일관성을 유지할 수 있다. Vite 프로젝트에서는 Vitest를 사용하는 것이 가장 자연스럽고 효율적이다."