← ClaudeAtlas

generate-vitestlisted

Generate a Vitest test file for an existing component or hook in apps/web/src/. Pass the file path or component name as the argument. Reads the source file first to produce meaningful mocks and assertions.
anchit-choudhry/gryffin-calorai · ★ 0 · Testing & QA · score 64
Install: claude install-skill anchit-choudhry/gryffin-calorai
# Generate Test File You are generating a test file for an existing source file in Gryffin Calorai. The argument is a file path relative to `apps/web/src/` (e.g. `components/FoodLogger.tsx`) or just a name (e.g. `FoodLogger`). Resolve the full path before proceeding. If no argument was given, ask: "Which component or hook should I write tests for?" ## Step 1 - Read the source file Read the full source file. Identify: - **Props interface** - what props does the component accept? - **Zustand selectors** - what does `useAppState()` destructure? - **External hooks used** - e.g. `useFoodForm`, `useWaterForm`, custom hooks - **shadcn/ui or Radix primitives used** - Dialog, Tooltip, Tabs, etc. (need portal mocks) - **Async operations** - toast calls, Dexie queries, API calls - **User interactions** - button clicks, form submits, input changes - **Conditional renders** - loading states, empty states, error states ## Step 2 - Determine test file path Component `apps/web/src/components/Foo.tsx` -> test at `apps/web/src/components/Foo.test.tsx` Hook `apps/web/src/hooks/useFoo.ts` -> test at `apps/web/src/hooks/useFoo.test.ts` Check if the test file already exists. If it does, read it and ask the user whether to extend it or rewrite it. ## Step 3 - Generate the test file ### For components ```tsx import {beforeEach, describe, expect, it, vi} from "vitest"; import {act, fireEvent, render, screen} from "@testing-library/react"; import ComponentName from "./ComponentName"; impor