Next.js Unit Test

Next.js 테스트 설정

단위 테스트는 Jest 설정, jsdom 환경, setup 파일, Testing Library, 모듈 mock을 갖춘 뒤 순수 함수와 작은 컴포넌트 계약을 빠르게 검증한다.

01

Jest 구성

next/jest로 Next 설정을 읽고 jsdom 테스트 환경을 지정한다.

config
02

setup 연결

jest.setup에서 Testing Library matcher와 전역 mock을 준비한다.

setup
03

스크립트 추가

package.json에 test, test:watch, coverage 명령을 분리해 둔다.

scripts
04

작은 계약 검증

순수 함수와 작은 컴포넌트는 빠르게 실행되는 단위 테스트로 회귀를 막는다.

fast feedback
next/jest
Next의 Babel, env, module 설정과 맞춰 테스트 변환을 구성한다. 직접 Babel 설정을 맞추는 비용을 줄인다.
framework aware
Testing Library
DOM 구조보다 사용자 역할과 텍스트 기준으로 assertion을 작성한다. 구현 변경에 덜 깨지는 테스트가 된다.
user-centric
Mock
next/router, next/navigation, 이미지, CSS 모듈 등 런타임 의존성을 대체한다. mock이 실제 동작과 너무 멀어지지 않게 최소화한다.
제어 컴포넌트 경계

단위 테스트 설정 점검

setup 실행 toBeInTheDocument 같은 matcher가 모든 테스트에서 작동한다.
경로 alias tsconfig paths와 Jest moduleNameMapper가 일치한다.
빠른 실패 단위 테스트가 외부 네트워크나 실제 DB에 의존하지 않는다.

스크립트 예시

"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"