각 커밋마다 전체 테스트 스위트를 실행하는 것을 중지하세요 🚫🧪

Source: Dev.to

문제

• ⏰ 느림 – 개발에 소중한 시간을 낭비합니다
• 😤 좌절감 – 흐름 상태를 깨뜨립니다
• 🔄 중복 – 건드리지도 않은 코드를 테스트합니다

대부분의 개발자:

• 테스트를 완전히 건너뛴다 (위험!)
• 긴 테스트 실행을 기다린다 (좌절!)
• 푸시하고 CI가 문제를 잡아주길 바란다 (위험!)

더 나은 방법이 있어야 합니다.

해결책: test‑staged

test-staged는 lint-staged와 비슷하지만 테스트용입니다. 스테이지에 있는 변경 사항과 관련된 테스트를 지능적으로 식별하고 그 테스트만 실행합니다.

얼마나 똑똑한가?

test-staged는 사용 중인 테스트 러너에 따라 다양한 전략을 사용합니다:

30초 안에 시작하기

설치는 아주 간단합니다:

npm install -D test-staged
# ou
pnpm add -D test-staged
# ou
yarn add -D test-staged
# ou
bun add -D test-staged

진짜. 기본적으로 설정이 전혀 없습니다.

Pre‑Commit 훅으로 구성하기

마법은 Husky와 결합할 때 일어납니다:

# Instale o husky
npm install -D husky
npx husky init

# Adicione test-staged ao pre‑commit
echo "npx test-staged" > .husky/pre-commit

이제, 커밋할 때마다 훅은:

• ✅ 변경된 부분과 관련된 테스트만 실행합니다
• ⚡ 몇 초 안에 완료되어, 몇 분이 걸리는 것과 다릅니다
• 🛡️ 테스트가 실패하면 커밋을 차단합니다

실제 사례

사례 1 – 단일 파일 변경

사용자 인증 기능을 작업하고 있습니다:

# 수정한 파일:
git add src/auth/login.ts

test-staged는 오직 다음만 실행합니다:

src/auth/__tests__/login.test.ts
src/integration/__tests__/auth-flow.test.ts   # (login.ts를 import하기 때문에)

그리고 실행하지 않습니다:

src/payments/__tests__/*.test.ts   ❌
src/dashboard/__tests__/*.test.ts  ❌
# (관련 없는 테스트 200개 이상) ❌

결과: 테스트가 ~3 s에 완료됩니다(≈2 min 대신).

사례 2 – 유틸리티 리팩터링

유틸리티 함수를 리팩터링했습니다:

# 수정한 파일:
git add src/utils/formatDate.ts

test-staged는 해당 함수에 의존하는 모든 테스트를 찾습니다:

src/utils/__tests__/formatDate.test.ts
src/components/__tests__/DatePicker.test.ts
src/pages/__tests__/Dashboard.test.ts

간접 의존성까지 포착할 만큼 똑똑하고, 생산성을 유지할 만큼 빠릅니다.

사례 3 – 모노레포 지원

모노레포에서 작업 중인가요? test-staged가 커버합니다:

# packages/ui 디렉터리에서
git add Button.tsx

오직 다음만 실행합니다:

packages/ui/__tests__/Button.test.tsx

그리고 다음 테스트는 실행하지 않습니다:

packages/api/   ❌
packages/cli/    ❌

왜 당신은 사랑하게 될까요

🎯 설정 필요 없음

자동으로 감지합니다:

• 패키지 매니저 (npm, pnpm, yarn, bun)
• 테스트 러너 (Jest, Vitest, Mocha, Ava)
• 프로젝트 구조 (모노레포 또는 단일 패키지)

⚡ 매우 빠름

500개 이상의 테스트가 있는 일반적인 프로젝트에서:

실제 사용에서 약 36배 향상

🧠 정말 똑똑함

Jest / Vitest – 네이티브 의존성 그래프 사용:

// Se você mudar userService.ts
// ele encontra testes que o importam:
import { createUser } from './userService';
import { validateUser } from './userService';

Mocha / Ava – 패턴 매칭 사용:

src/models/user.ts      → src/models/user.test.ts
src/api/users.ts        → src/api/__tests__/users.test.ts
lib/parser.ts           → lib/parser.spec.ts

🛠️ 필요할 때 맞춤 설정 가능

설정 없이도 작동하지만, 필요에 따라 맞춤 설정할 수 있습니다:

Via package.json

{
  "test-staged": {
    "runner": "jest",
    "mode": "related",
    "testExtensions": [".test", ".spec", ".e2e"]
  }
}

Via .test-stagedrc.json

{
  "runner": "vitest",
  "testExtensions": [".test", ".spec", "Test", "E2E"]
}

지원되는 테스트 러너

⭐ 네이티브 --findRelatedTests (의존성 그래프)
Mocha ✅ 파일 패턴 매칭
Ava ✅ 파일 패턴 매칭

추가 러너가 곧 제공됩니다!

개발자 경험

작업 흐름이 어떻게 되는지 보세요:

# 변경 사항을 만드세요
vim src/components/Button.tsx

# 스테이징
git add src/components/Button.tsx

# 커밋 (test‑staged가 pre‑commit 훅을 통해 자동으로 실행됩니다)
git commit -m "fix: 버튼 hover 상태"

# 출력:
Running tests for staged files...
✓ src/components/__tests__/Button.test.tsx (2 tests) 0.8s

Tests passed! ✨
[main abc1234] fix: 버튼 hover 상태

수동 테스트 명령 없이. 기다림 없이. 깨진 커밋 없이.

자주 묻는 질문

P: 모든 테스트를 실행하고 싶다면?
R: 훅을 건너뛰세요: git commit --no-verify 또는 테스트 스위트를 수동으로 실행하세요.

P: CI와 함께 작동하나요?
R: 네! CI는 여전히 전체 테스트 스위트를 실행해야 합니다. test‑staged는 로컬 개발 속도를 높이기 위한 것입니다.

P: 통합/E2E 테스트는요?
R: test‑staged는 수정된 파일을 임포트하는 경우 해당 테스트를 찾아 실행합니다. 실행할 테스트를 커스터마이즈할 수도 있습니다.

P: Git 훅 없이 사용할 수 있나요?
R: 물론입니다! 원할 때 npx test-staged를 수동으로 실행하면 됩니다.

오늘 바로 체험해 보세요

1분 이내에 시작하세요:

npm install -D test-staged husky
npx husky init
echo "npx test-staged" > .husky/pre-commit

그런 다음 커밋을 하고 마법이 일어나는 것을 확인하세요. ✨

링크

• 📦 NPM 패키지
• 📖 문서
• 🐙 GitHub 저장소
• 🐛 문제 보고

요약

아직도 매 커밋마다 전체 테스트 스위트를 실행하고 있다면, 시간을 낭비하고 있는 겁니다. test-staged가 제공하는 것은:

• ⚡ 더 빠른 커밋 – 몇 초, 몇 분이 아니라
• 🎯 더 나은 집중 – 변경된 부분만 테스트
• 🛡️ 더 안전한 코드 – 테스트가 실제로 실행되고 건너뛰지 않음
• 🚀 향상된 개발자 경험(DX) – 설정이 필요 없고, 바로 동작

시도해보고 어떤지 알려 주세요! 미래의 당신이 감사할 겁니다. 🙌

test-staged를 이미 사용해 보셨나요? 현재 프리 커밋 테스트 전략은 무엇인가요? 아래 댓글에 공유해 주세요! 👇