# Tdd

> Guide test-driven development using red-green-refactor. Use when building a new hook, fixing a bug test-first, or following TDD workflow in this React hooks library.

- Skill: `helderberto/tdd-3` (Agent Skill)
- Install (CLI): `npx skillmds@latest add helderberto/tdd-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/helderberto/tdd-3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: helderberto (https://skillmd.com/u/helderberto)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/helderberto/tdd-3

---


This is a React hooks library — all behavior is testable via `renderHook`.

## Cycle

### Red
Write a failing test in `src/__tests__/<hook-name>.test.ts`:
- Cover: hook is defined, mounted state, unmounted state, any side effects
- Use `renderHook` from `@testing-library/react`
- Run `npm test` and confirm it fails for the right reason

### Green
Implement the minimum hook code in `src/<hook-name>.ts` to pass:
- Run `npm test` and confirm all tests pass

### Refactor
Clean up without breaking tests:
- Run `npm run lint` and `npm run test:tsc` to verify

## Reference patterns

- Mount/unmount: `src/__tests__/use-is-mounted-ref.test.ts`
- Side effects/cleanup: `src/__tests__/use-abort-controller.test.ts`