2026년 프론트엔드 테스트의 정답 — Vitest + Testing Library + Playwright, 그리고 Next.js 생태계의 현재

Jest의 시대가 끝나고, Vitest가 새로운 기본값이 되었다. 하지만 진짜 이야기는 “어떤 테스트 도구를 쓰느냐”가 아니라, “프론트엔드 생태계 전체가 어디로 향하고 있느냐”에 있다. 2026년, 개발자들이 실제로 선택하고 있는 조합을 데이터와 커뮤니티 논의를 기반으로 정리한다.

1. Next.js는 여전히 왕인가? — 데이터가 말하는 현실

“새 프로젝트를 시작한다면 어떤 프레임워크를 쓸까?”라는 질문에 2024년까지의 대답은 단순했다. Next.js. React 개발자의 약 67%가 Next.js를 사용하고, Netflix, TikTok, Notion 등 대형 서비스가 프로덕션에서 운영 중이다. Stack Overflow Developer Survey 2025에서도 React는 44.7%로 프레임워크 1위를 유지하고 있다.

하지만 2025년 하반기부터 분위기가 달라졌다. 세 가지 변화가 동시에 일어났다.

첫째, Astro의 급부상. State of JS 2024에서 Astro는 25%의 채택률을 기록했다. 콘텐츠 중심 사이트에서 Next.js 대비 LCP(Largest Contentful Paint)를 40-70% 개선하며 성능 우위를 입증했다. 2026년 1월, Cloudflare가 Astro를 인수하면서 오픈소스를 유지하되 개발을 가속화하겠다고 발표했다. Astro 6 베타가 이미 공개된 상태다.

둘째, React Server Components(RSC) 보안 사고. 2025년 12월, RSC 프로토콜에서 CVSS 10.0 만점의 치명적 보안 취약점(CVE-2025-55182, 일명 React2Shell)이 발견되었다. 인증 없이 원격 코드 실행이 가능했고, create-next-app의 기본 설정만으로도 취약했다. CISA가 Known Exploited Vulnerabilities 카탈로그에 등재했으며, 중국 기반 위협 그룹의 실제 공격이 확인되었다. Vercel은 자사 플랫폼을 먼저 패치한 뒤 커뮤니티에 알렸는데, 이 순서가 이해충돌 논란을 불러일으켰다.

셋째, 커뮤니티의 피로감. Hacker News에서 “Next.js is infuriating”이라는 제목의 글이 수백 개의 공감 댓글을 받았다. 핵심 불만은 세 가지로 요약된다. App Router의 과도한 복잡성, Vercel에 대한 벤더 종속(lock-in), 그리고 잦은 breaking change. 한 개발자는 이렇게 썼다.

“If you are using Next.js, you have technically introduced a consultancy corporation as a dependency in your product.” (Next.js를 쓴다는 건, 기술적으로 컨설팅 회사를 제품의 종속성으로 도입한 것이다.)

그렇다고 Next.js가 몰락한 건 아니다. 대규모 인터랙티브 애플리케이션(대시보드, 에디터, 복잡한 SPA)에서는 여전히 가장 성숙한 선택이다. 하지만 “모든 웹 프로젝트의 기본값”이라는 위상은 흔들리고 있다.

2. 2026년 프레임워크 지형도 — 용도별 최적 선택

State of JS 2024-2025와 Stack Overflow Survey 2025를 종합하면, 프레임워크 선택은 점점 더 용도 기반으로 분화되고 있다.

용도	추천 프레임워크	이유
대규모 인터랙티브 앱	Next.js (App Router)	생태계 크기, 채용 시장, RSC 지원
콘텐츠 중심 사이트/블로그	Astro	최소 JS, 극한의 성능, Cloudflare 후원
SSR이 필요한 React 앱	React Router v7 (구 Remix)	Next.js의 핵심 기능을 더 가볍게
개발자 만족도 최우선	SvelteKit	5년 연속 만족도 1위 급, JS 번들 50-70% 감소
Vue 생태계	Nuxt	Nitro 엔진, 성숙한 모듈 생태계
서버 중심 아키텍처	HTMX + Alpine.js	”새로운 옛날 방식”, 최소한의 JS

주목할 수치가 있다. Stack Overflow 2025에서 Svelte의 만족도(Admired)는 62.4%로 React의 52.1%를 넘어섰다. Svelte를 써본 개발자가 React를 써본 개발자보다 더 만족한다는 뜻이다. State of JS에서 Svelte는 “가장 배우고 싶은 프레임워크” 1위(약 50%)를 차지했다. 실제 사용률도 2019년 8%에서 2025년 약 20%로 180% 성장했다.

한편 Hacker News에서는 “서버로의 회귀” 움직임이 뚜렷하다. Rails + Turbo/Stimulus, Django + HTMX, Phoenix LiveView 같은 서버 렌더링 중심 스택이 “SPA 피로감”의 대안으로 활발히 논의되고 있다. “Ask HN: What’s the ideal stack for a solo dev in 2025?”라는 스레드에서 가장 많은 추천을 받은 건 React가 아니라 Ruby on Rails와 “Go + HTMX + Tailwind + PostgreSQL” 조합이었다.

3. Vitest가 Jest를 넘어선 순간 — 테스트 프레임워크의 세대교체

본론으로 들어가자. 2026년 신규 프로젝트에서 테스트 프레임워크의 기본값은 Vitest다. 이것은 더 이상 논쟁이 아니다.

숫자로 보는 전환

Jest는 여전히 주간 3,000-3,700만 다운로드를 기록하지만, 성장 곡선은 평탄하다. Vitest는 가파른 상승세로 일부 집계에서 주간 4,000만 다운로드에 도달했다. State of JS 2024에서 Vitest는 개발자 만족도에서 Jest를 추월했다.

Vitest가 승리한 이유

성능. 콜드 스타트가 Jest 대비 약 66% 빠르다. Vitest는 Vite의 HMR 그래프를 추적하여, 변경된 모듈을 전이적으로 임포트하는 테스트만 재실행한다. Jest의 git diff 휴리스틱보다 정확하고 빠르다.

ESM 네이티브 지원. Jest에서 ESM으로 마이그레이션하면 설정 지옥이 펼쳐진다. Vitest는 ESM과 TypeScript를 별도 설정 없이 지원한다. Hacker News의 한 개발자는 이렇게 증언했다.

“Jest presented a lot of issues after switching to ESM. Vitest was compatible with our existing Jest code.” (Jest는 ESM 전환 후 많은 문제를 일으켰다. Vitest는 기존 Jest 코드와 호환되었다.)

DX(Developer Experience). Vite 기반 프로젝트와 설정을 공유할 수 있고, watch 모드의 반응 속도가 체감될 정도로 빠르다. 커버리지도 안정적이다. Jest의 flaky한 커버리지 결과에 불만을 가진 개발자들이 마이그레이션의 계기로 꼽는 경우가 많다.

프레임워크 지원. Nuxt, SvelteKit, Astro, Angular의 최신 툴링이 모두 Vitest를 기본 또는 권장 러너로 채택했다. Next.js 공식 문서도 2026년 2월 업데이트에서 Vitest를 Jest와 동등하게 지원한다.

Jest가 여전히 유효한 경우

React Native: Jest가 유일하게 공식 지원하는 테스트 러너다.
대규모 레거시 코드베이스: 마이그레이션 비용이 이점을 초과하는 경우.
지식 기반: 블로그, Stack Overflow 답변이 Jest 중심으로 축적되어 있어 초보자에게 유리할 수 있다.

다크호스: Node.js 내장 테스트 러너

Hacker News에서 흥미로운 제3의 선택지가 반복적으로 등장한다. node:test다. “Jest is full of unneeded magic (= complexity), whereas node:test is straightforward”라는 의견이 꾸준히 올라온다. 외부 의존성 없이 가장 빠른 실행 속도를 자랑하지만, 생태계와 DX 측면에서 Vitest에 미치지 못해 주류 진입까지는 시간이 필요하다.

4. @testing-library/react — 변하지 않는 컴포넌트 테스트의 표준

테스트 러너가 Jest에서 Vitest로 바뀌어도, 컴포넌트 테스트 라이브러리의 표준은 @testing-library/react이다. “구현이 아니라 사용자의 행동을 테스트한다”는 철학은 2026년에도 프론트엔드 테스트의 핵심 원칙으로 받아들여지고 있다.

Enzyme은 React 18 이후 업데이트되지 않았고, React 19에서는 완전히 작동하지 않는다. 사실상 사망 상태다.

한 가지 중요한 제약이 있다. Next.js App Router의 비동기 서버 컴포넌트(async Server Components)는 현재 Vitest나 Jest로 단위 테스트할 수 없다. Next.js 공식 문서는 비동기 서버 컴포넌트에 대해 E2E 테스트를 권장하고, 동기 서버 컴포넌트와 클라이언트 컴포넌트는 @testing-library/react로 단위 테스트할 수 있다고 안내한다.

5. E2E 테스트 — Playwright가 Cypress를 역전하다

E2E(End-to-End) 테스트 영역에서 2024-2025년 사이에 극적인 전환이 일어났다. 2024년 6월, Playwright가 npm 주간 다운로드에서 Cypress를 추월했다. 이후 격차는 계속 벌어지고 있다.

2026년 현재 수치:

Playwright: 주간 약 3,300만 다운로드, 급성장 중
Cypress: 주간 약 600-650만 다운로드, 2023년 이후 정체

State of JS 2025에서 Playwright는 “Most Adopted” 상을 받았으며, 전년 대비 +14% 성장을 기록했다. QA 전문가의 약 45%가 Playwright를 채택했다.

Playwright가 승리한 이유

항목	Playwright	Cypress
브라우저 지원	Chromium, Firefox, WebKit/Safari	Chromium, Firefox (Safari 미지원)
병렬 실행	네이티브 지원 + 테스트 샤딩	별도 설정 필요
테스트 액션 속도	~290ms	~420ms
10개 병렬 테스트 메모리	~2.1GB	~3.2GB
언어 지원	JS/TS, Python, Java, C#	JS/TS만
유지율(Retention)	94%	낮음

특히 Safari/WebKit 지원이 결정적이다. iOS 사용자가 무시할 수 없는 비율을 차지하는 서비스에서, Safari를 테스트할 수 없는 Cypress는 선택지에서 제외될 수밖에 없다.

Cypress가 여전히 빛나는 영역은 디버깅 DX다. 타임트래블 디버거와 커맨드 로그는 Playwright보다 직관적이다. 팀 온보딩이 중요하고 Safari 테스트가 불필요하다면 Cypress도 여전히 합리적 선택이다. Cypress는 최근 “Cypress AI”를 출시해 자연어로 누락된 테스트를 생성하는 기능을 추가했다.

6. 2026년 신규 Next.js 프로젝트의 권장 테스트 구성

Next.js 공식 문서(2026년 2월 업데이트)가 지원하는 도구는 네 가지다: Vitest, Jest, Playwright, Cypress. 이 중 커뮤니티 컨센서스가 수렴하는 조합은 다음과 같다.

┌─────────────────────────────────────────────────────┐
│  테스트 계층           도구                          │
├─────────────────────────────────────────────────────┤
│  단위/컴포넌트 테스트   Vitest + @testing-library/react │
│  E2E 테스트            Playwright                     │
│  DOM 환경              jsdom (또는 Vitest Browser Mode) │
│  커버리지              v8 (Vitest 내장)                │
│  커버리지 목표          80% 이상                       │
│  테스트 파일 위치       구현 파일 옆에 co-location      │
└─────────────────────────────────────────────────────┘

Vitest Browser Mode는 Vitest 4.0(2025년 10월)에서 stable로 졸업한 주목할 기능이다. jsdom 대신 실제 Chromium, Firefox, WebKit에서 단위/컴포넌트 테스트를 실행할 수 있다. 다만 Hacker News에서는 “브레이크포인트가 리프레시 시 사라진다”, “CI 설정이 복잡하다”는 보고가 있어, 아직 프로덕션 레벨의 안정성은 검증 중이다.

7. 테스트를 넘어서 — 2026년 프론트엔드 프로젝트의 전체 구성

테스트 도구는 프로젝트 전체 구성의 일부다. 커뮤니티 합의가 수렴하고 있는 2026년의 “이상적인” Next.js 프로젝트 스택을 정리한다.

핵심 스택

영역	도구	비고
프레임워크	Next.js 15+ (App Router)	또는 용도에 따라 Astro, React Router v7
언어	TypeScript (strict mode)	사실상 필수
스타일링	Tailwind CSS v4 + shadcn/ui	v4는 CSS 크기 70% 감소, shadcn/ui는 GitHub 10만 스타
서버 상태	TanStack Query	주간 500만 다운로드
클라이언트 상태	Zustand	주간 400만 다운로드, 신규 프로젝트 40% 채택
폼	React Hook Form + Zod	타입 안전한 검증
ORM	Drizzle ORM	엣지/서버리스 친화적, Prisma 대비 경량
인증	Clerk / NextAuth.js / Lucia	프로젝트 규모에 따라 선택
패키지 매니저	pnpm (모노레포) / Bun (단일)	Bun은 설치 속도 3초, pnpm은 엄격한 의존성 관리
린팅	ESLint + Prettier	Biome(56배 빠름)이 부상 중이나 프레임워크 플러그인 부족
테스트	Vitest + Playwright	본문 참조
모노레포	Turborepo (간단) / Nx (복잡)	둘 다 Rust로 코어 마이그레이션 중

주목할 트렌드

styled-components의 퇴장. 런타임 CSS-in-JS(styled-components, Emotion)는 React Server Components와 호환되지 않는다. 2025-2026년 신규 프로젝트에서의 채택률은 7%로 급락했다. Tailwind CSS가 68%로 압도적이다.

Redux의 퇴조. Redux Toolkit은 여전히 주간 400만 다운로드를 기록하지만, 신규 프로젝트에서 수기 작성 Redux를 선택하는 비율은 약 10%로 떨어졌다. Zustand(클라이언트 상태)와 TanStack Query(서버 상태)의 조합이 새로운 표준이다.

Biome의 부상. ESLint + Prettier를 하나의 도구로 대체하려는 Biome는 56배 빠른 속도와 423개 이상의 규칙을 제공한다. 월간 1,500만 다운로드(ESLint의 7,900만 대비)로 아직 격차가 있지만, 성장세가 가파르다. 다만 eslint-plugin-react-hooks, eslint-plugin-next 같은 프레임워크 특화 플러그인이 부재하여, Next.js 프로젝트에서는 아직 ESLint + Prettier가 안전한 선택이다.

8. Hacker News가 말하는 프론트엔드의 미래

Hacker News 커뮤니티의 2025-2026년 논의에서 반복적으로 등장하는 테마들을 정리한다.

”복잡성에 대한 반란”

가장 강력한 흐름은 SPA 과잉에 대한 반성이다. “Moving on from React, a year later”라는 글에서 한 개발자는 이렇게 말한다.

“It was MUCH easier to structure everything as pytest unit tests and completely rely on Django for all the business logic rather than trying to put state in the frontend.”

프론트엔드에 상태를 넣으려다 고생하는 것보다, Django에서 모든 비즈니스 로직을 처리하고 pytest로 테스트하는 게 훨씬 쉬웠다는 것이다. HTMX, Rails + Turbo, Phoenix LiveView 같은 서버 렌더링 스택이 “SPA 탈출구”로 진지하게 논의되고 있다.

”도구 피로감의 역설”

State of JS에서 응답자 1인당 평균 4.4개의 테스트 도구를 사용한다는 결과가 나왔다. 테스팅 영역의 최대 불만은 모킹(267건)과 설정/구성(154건)이다. 도구가 좋아지고 있지만, 동시에 너무 많아지고 있다. 커뮤니티는 “결합이 아니라 단순화”를 원한다.

AI의 영향

Cypress AI, TestMu AI(구 LambdaTest)처럼 자연어로 테스트를 생성하는 도구가 등장하고 있다. Next.js 16은 Devtools MCP(Model Context Protocol)를 도입해 AI 기반 디버깅 워크플로우를 지원한다. 하지만 Hacker News의 시각은 냉정하다.

“99% of working with this technology is making a JSON HTTP call to a chat completion endpoint.”

AI가 개발 스택 선택 자체를 바꾸지는 않는다는 것이 현재의 중론이다.

9. 결론 — 실용적 선택을 위한 가이드

2026년 프론트엔드 생태계의 핵심 메시지를 요약한다.

테스트 도구는 결정났다. 신규 프로젝트에서 Vitest + @testing-library/react(단위/컴포넌트) + Playwright(E2E)는 더 이상 “트렌디한 선택”이 아니라 커뮤니티 컨센서스다.

프레임워크는 용도에 맞게. “무조건 Next.js”의 시대는 지났다. 콘텐츠 사이트라면 Astro, 가벼운 SSR이면 React Router v7, 개발자 경험 최우선이면 SvelteKit을 진지하게 고려할 시점이다. 물론 복잡한 인터랙티브 앱에서 Next.js의 생태계는 여전히 대체하기 어렵다.

단순함이 힘이다. Hacker News에서 가장 일관되게 반복되는 조언은 “use what you know”다. 완벽한 스택을 찾느라 시간을 쓰는 것보다, 알고 있는 도구로 빠르게 시작하는 것이 낫다. 2026년의 “이상적인 스택”은 존재하지만, 그것이 모든 프로젝트의 정답은 아니다.

프론트엔드 테스트의 세계는 “혼란의 중간 지점(messy middle)“을 지나 안정적인 승자들이 드러나고 있다. Vitest, Testing Library, Playwright — 이 세 도구가 2026년의 승자다. 그리고 그 위에 올라가는 프레임워크와 스타일링과 상태 관리는, 각자의 프로젝트가 실제로 풀어야 할 문제에 맞추어 선택하면 된다.

참고 자료 및 출처: