tdd

작성자: sanity-io

레드-그린-리팩터 루프를 사용한 테스트 주도 개발. 사용자가 TDD로 기능을 구축하거나 버그를 수정하려 할 때, "레드-그린-리팩터"를 언급하거나, 원할 때 사용합니다...

npx skills add https://github.com/sanity-io/sanity --skill tdd

Test-Driven Development

Philosophy

Core principle: Tests should verify behavior through public interfaces, not implementation details. Code can change entirely; tests shouldn't.

Good tests are integration-style: they exercise real code paths through public APIs. They describe what the system does, not how it does it. A good test reads like a specification - "user can checkout with valid cart" tells you exactly what capability exists. These tests survive refactors because they don't care about internal structure.

Bad tests are coupled to implementation. They mock internal collaborators, test private methods, or verify through external means (like querying a database directly instead of using the interface). The warning sign: your test breaks when you refactor, but behavior hasn't changed. If you rename an internal function and tests fail, those tests were testing implementation, not behavior.

See tests.md for examples and mocking.md for mocking guidelines.

Anti-Pattern: Horizontal Slices

DO NOT write all tests first, then all implementation. This is "horizontal slicing" - treating RED as "write all tests" and GREEN as "write all code."

This produces crap tests:

  • Tests written in bulk test imagined behavior, not actual behavior
  • You end up testing the shape of things (data structures, function signatures) rather than user-facing behavior
  • Tests become insensitive to real changes - they pass when behavior breaks, fail when behavior is fine
  • You outrun your headlights, committing to test structure before understanding the implementation

Correct approach: Vertical slices via tracer bullets. One test → one implementation → repeat. Each test responds to what you learned from the previous cycle. Because you just wrote the code, you know exactly what behavior matters and how to verify it.

WRONG (horizontal):
  RED:   test1, test2, test3, test4, test5
  GREEN: impl1, impl2, impl3, impl4, impl5

RIGHT (vertical):
  RED→GREEN: test1→impl1
  RED→GREEN: test2→impl2
  RED→GREEN: test3→impl3
  ...

Workflow

1. Planning

Before writing any code:

  • Confirm with user what interface changes are needed
  • Confirm with user which behaviors to test (prioritize)
  • Identify opportunities for deep modules (small interface, deep implementation)
  • Design interfaces for testability
  • List the behaviors to test (not implementation steps)
  • Get user approval on the plan

Ask: "What should the public interface look like? Which behaviors are most important to test?"

You can't test everything. Confirm with the user exactly which behaviors matter most. Focus testing effort on critical paths and complex logic, not every possible edge case.

2. Tracer Bullet

Write ONE test that confirms ONE thing about the system:

RED:   Write test for first behavior → test fails
GREEN: Write minimal code to pass → test passes

This is your tracer bullet - proves the path works end-to-end.

3. Incremental Loop

For each remaining behavior:

RED:   Write next test → fails
GREEN: Minimal code to pass → passes

Rules:

  • One test at a time
  • Only enough code to pass current test
  • Don't anticipate future tests
  • Keep tests focused on observable behavior

4. Refactor

After all tests pass, look for refactor candidates:

  • Extract duplication
  • Deepen modules (move complexity behind simple interfaces)
  • Apply SOLID principles where natural
  • Consider what new code reveals about existing code
  • Run tests after each refactor step

Never refactor while RED. Get to GREEN first.

Checklist Per Cycle

[ ] Test describes behavior, not implementation
[ ] Test uses public interface only
[ ] Test would survive internal refactor
[ ] Code is minimal for this test
[ ] No speculative features added

sanity-io의 다른 스킬

performance-optimization
sanity-io
애플리케이션 성능을 최적화합니다. 성능 요구사항이 있거나, 성능 회귀가 의심되거나, Core Web Vitals 또는 로드 시간이…
official
rxjs-like-a-pro
sanity-io
이 스킬은 관용적이고 조합 가능하며 일반적인 함정이 없는 RxJS 코드를 작성하는 데 도움을 줍니다. 핵심 철학: 로직을 observable 체인 안에 유지하세요. .subscribe()를 사용할 때마다 해당 작업을 .pipe() 내부의 변환으로 표현할 수 있는지 물어보세요.
official
find-skills
sanity-io
사용자가 "X를 어떻게 하죠", "X를 위한 스킬을 찾아줘", "X를 할 수 있는 스킬이 있나요..." 같은 질문을 하거나 특정 요구를 표현할 때 에이전트 스킬을 찾고 설치하도록 도와줍니다.
official
next-cache-components
sanity-io
Next.js 16 캐시 컴포넌트 - PPR, use cache 지시어, cacheLife, cacheTag, updateTag
official
vercel-react-best-practices
sanity-io
Vercel Engineering의 React 및 Next.js 성능 최적화 가이드라인입니다. 이 스킬은 React/Next.js 코드를 작성, 검토 또는 리팩토링할 때 사용해야 합니다.
official
frontend-design
sanity-io
차별화된 프로덕션 수준의 프론트엔드 인터페이스를 높은 디자인 품질로 제작합니다. 사용자가 웹 컴포넌트, 페이지 등을 구축해 달라고 요청할 때 이 스킬을 사용하세요.
official
plugin-transfer
sanity-io
에이전트가 copy-plugin 생성기 워크플로를 사용하여 기존 플러그인을 이 모노레포로 마이그레이션하도록 안내합니다.
official
test-studio-script-runner
sanity-io
dev/test-studio Script Runner 도구를 설명합니다. dev/test-studio/src/script-runner에서 스크립트를 추가, 편집, 실행 또는 문서화할 때 사용하거나...
official