skills.rest
homeslands
homeslandsCOMMUNITY
Explore all skills by this author →
GitHub

tdd-workflow

Guides writing Vitest tests for React components, hooks, stores, and API services.

Updated Aug 19, 2026
Search Tags:#unit tests#vitest#testing#tdd#react#zustand#react-query
One-click install
npx skills add https://github.com/homeslands/trend-ui --skill tdd-workflow-homeslands
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tdd-workflow
Source: https://github.com/homeslands/trend-ui/tree/main/app/order-ui/.claude/skills/tdd-workflow
Command: npx skills add https://github.com/homeslands/trend-ui --skill tdd-workflow-homeslands

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers working in the order-ui codebase often lack a consistent approach to writing tests, leading to inconsistent file placement, missing coverage of critical logic, and uncertainty about which testing patterns to apply for hooks, stores, or API services. ## Core Features & Use Cases - Standardized Test Conventions: Enforces co-located test files in __tests__/ folders with consistent naming (<source-file>.test.ts(x)). - Pattern Library: Provides ready-to-use Arrange/Act/Assert templates for API services (mocked http), React Query hooks (QueryClientProvider wrapper), Zustand stores, components, and Zod schemas. - Scope Guidance: Clarifies what to test (API services, hooks, stores, critical interactions, schemas) and what to skip (Radix/shadcn primitives, type-only files). - Use Case: When adding a new use-printer hook, follow the hook test pattern to mock the API layer, wrap with QueryClientProvider, and assert on query state transitions. ## Quick Start Ask the assistant to write a test for a specific component, hook, store, or API service following the project's TDD workflow conventions.

Frequently Asked Questions about tdd-workflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test a React Query hook with Vitest?▼

Wrap renderHook with a QueryClientProvider configured with retry disabled, mock the underlying API module with vi.mock, and use waitFor to assert on isSuccess state. This isolates the hook from network calls while testing its query behavior.

How to test Zustand store actions in React?▼

Use renderHook from @testing-library/react to access the store, call actions inside act(), and assert on the resulting state. Reset store state in beforeEach to keep tests isolated.

Where should test files be placed in a Vite React project?▼

Co-locate tests in a __tests__ folder inside the same directory as the source file, named <source-file>.test.ts or .test.tsx. This keeps tests discoverable and close to the code they verify.

Should I test shadcn or Radix UI components?▼

No, skip pure Radix UI and shadcn components since they are already tested by their libraries. Focus testing effort on API services, custom hooks, stores, critical interactions, and Zod schemas.

How do I mock API calls in Vitest service tests?▼

Use vi.mock to replace the http utility module with vi.fn() stubs for get, post, patch, and delete. Then use vi.mocked to set resolved values and assert the correct endpoints and payloads were called.

Related Skills

Explore More Software Engineering Skills→
GSU26SE55GSU26SE55

feature

Scaffolds React frontend feature modules with standardized folder structure, naming conventions, and code patterns.

Official
Intermediate
arelbenarelben

pytest-coverage-check

Run pytest with pytest-cov and fail below a minimum coverage threshold.

Community
Basic
Async-IOAsync-IO

validate-frontend

Execute TypeScript type checks, ESLint linting, and Vitest unit tests on frontend code.

Official
Intermediate
gzp79gzp79

playwright-testing

Automate browser-based tests for API integrations and user journeys with Playwright.

Community
Advanced