2023년 9월 1일
Next.js에서 TDD(Test-Driven Development) 적용하기
nextjstddtestingjestreact-testing-libraryplaywright
Next.js는 TDD를 강제하지 않지만, 순수 로직·컴포넌트·E2E 플로우를 잘 나누면 TDD에 잘 어울립니다. 이 글은 Next.js 코드베이스에서 TDD를 현실적으로 적용하는 구조와 패턴을 다룹니다.
1고전적인 Red-Green-Refactor 루프를 Next.js 구조에 어떻게 적용할지 설명한다.
2비즈니스 로직을 /lib의 순수 함수로 분리하고 거기서부터 TDD를 시작하는 방법을 소개한다.
3Jest/Vitest + React Testing Library로 컴포넌트 레벨의 TDD를 진행하는 패턴을 다룬다.
4Route Handler의 핵심 로직을 별도 모듈로 뽑아 테스트하는 전략을 설명한다.
5Playwright 기반 E2E 테스트를 어디에, 얼마나 두는 것이 현실적인지 가이드한다.