매 커밋마다 전체 테스트 스위트를 실행하는 것을 멈추세요 🚫🧪

Source: Dev.to

위에 제공된 Source 링크 외에 번역할 텍스트가 보이지 않습니다. 번역하고 싶은 본문 내용을 알려주시면 한국어로 번역해 드리겠습니다.

문제

우리는 모두 이런 경험을 해봤습니다: 작은 수정을 하고 커밋한 뒤 전체 테스트 스위트가 몇 분 동안 실행되는 모습을 지켜보는 상황을.

매 커밋마다 전체 테스트 스위트를 실행하는 것은:

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

대부분의 개발자는 다음 중 하나를 선택합니다:

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

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

test‑staged 소개

test-staged는 lint-staged와 비슷하지만 테스트용입니다. 스테이징된 변경 사항과 관련된 테스트를 자동으로 식별하고 해당 테스트만 실행합니다.

작동 방식

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

설치

# npm
npm install -D test-staged

# pnpm
pnpm add -D test-staged

# yarn
yarn add -D test-staged

# bun
bun add -D test-staged

기본적으로 제로 설정.

Husky와 함께 사용하기

# Install husky
npm install -D husky
npx husky init

# Add test‑staged to pre‑commit hook
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와 같이 관련 없는 스위트는 건너뜁니다.

결과: 테스트가 2분이 아니라 3초 만에 완료됩니다.

예시 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: 모노레포 지원

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

다음만 실행됩니다:

packages/ui/__tests__/Button.test.tsx

packages/api/나 packages/cli/에 있는 테스트는 실행되지 않습니다.

성능 향상

On a typical project with 500+ tests:

≈ 36× 실제 사용에서 속도 향상.

구성 (선택 사항)

package.json

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

.test-stagedrc.json

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

일반적인 워크플로우

# Make your changes
vim src/components/Button.tsx

# Stage them
git add src/components/Button.tsx

# Commit (test‑staged runs automatically via pre‑commit hook)
git commit -m "fix: button hover state"

출력 예시

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

Tests passed! ✨
[main abc1234] fix: button hover state

수동 테스트 명령이 필요 없고, 기다릴 필요도 없으며, 깨진 커밋도 없습니다.

FAQ

Q: 모든 테스트를 실행하고 싶다면?
A: git commit --no-verify 로 훅을 우회하거나 테스트 스위트를 수동으로 실행하세요.

Q: CI와 함께 사용할 수 있나요?
A: 네. CI는 여전히 전체 테스트 스위트를 실행합니다. test-staged는 로컬 개발 속도를 위한 것입니다.

Q: 통합/E2E 테스트는 어떻게 되나요?
A: 변경된 파일을 import 하면 실행됩니다. 어떤 테스트를 포함할지 커스터마이즈할 수도 있습니다.

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

1분 안에 시작하기

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

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

리소스

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

결론

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

• ⚡ 더 빠른 커밋 (분이 아닌 초 단위)
• 🎯 더 나은 집중 (변경된 부분만 테스트)
• 🛡️ 더 안전한 코드 (테스트가 실제로 실행됨)
• 🚀 향상된 개발자 경험 (설정 없이 바로 사용)

한 번 사용해 보고 의견을 알려 주세요! 🙌