pf-test-hook_skill

Overview

This skill generates TypeScript test files for React custom hooks using Vitest and @testing-library/react. It produces structured tests for initialization, actions, props changes, async behavior, Zustand stores, and context-wrapped hooks, matching common patterns used by PF DEV. Use the skill by requesting "hook 테스트" or "훅 테스트" and providing the hook name and signature.

How this skill works

Given a hook name and optional details (parameters, return shape, dependencies, async behavior, store or context needs), the skill scaffolds test cases and utilities. It emits renderHook-based tests with act, waitFor, mocks for fetch or services, Zustand store resets, and a wrapper component for context providers. The output follows consistent sections: initialization, actions, props/dep changes, async flows, and cleanup checks.

When to use it

• You need unit tests for a new or existing custom hook.
• You want consistent, team-standard test structure for PF DEV monorepo.
• Hook has async logic (fetches, timers) and needs mocked behaviors.
• Hook uses global stores (Zustand) or requires context providers.
• You want a checklist-driven test scaffold to speed PRs.

Best practices

• Provide hook signature and example return values to generate focused assertions.
• Include which external services to mock (fetch, authService) to create realistic tests.
• Reset global or store state in beforeEach to avoid cross-test leaks.
• Wrap hooks requiring context with a small wrapper that composes providers in the same order used in the app.
• Assert initial state, all returned values, action effects, props/dep changes, and cleanup behavior explicitly.

Example use cases

• Create tests for a counter hook: initial state, increment/decrement/reset actions, prop-based reset.
• Generate async tests for data fetching hooks with mocked global.fetch and success/error flows.
• Scaffold tests for hooks that consume Zustand stores and spy on service calls.
• Produce context-wrapped tests for theme or auth hooks using a wrapper composing ThemeProvider and AuthProvider.
• Output a test checklist to include with PRs so reviewers can verify coverage.