← ClaudeAtlas

frontend-testlisted

Generate frontend component tests (React Testing Library, Vue Test Utils, snapshot) for existing components. Auto-invoke when user says "test this component", "write component test", or "add component test".
alekspetrov/navigator · ★ 189 · Web & Frontend · score 80
Install: claude install-skill alekspetrov/navigator
# Frontend Component Test Generator Generate component tests for **existing components** — typically components written without tests, or where additional coverage is needed beyond what `frontend-component` already produced. > **When to use this vs. `frontend-component`**: `frontend-component` generates tests as part of creating a new component. Use `frontend-test` when the component already exists and you need to add or expand its tests. ## When to Invoke Auto-invoke when user says: - "Test this component" - "Write component test" - "Add component test" - "Test component [name]" - "Component tests for [name]" ## Execution Steps ### Step 0: Check Existing Patterns (Phase 0) ```bash PLUGIN_DIR="${CLAUDE_PLUGIN_ROOT:-$HOME/.claude/plugins/cache/navigator-marketplace/navigator}" [ -d "$PLUGIN_DIR" ] || PLUGIN_DIR="$HOME/.claude/plugins/marketplaces/navigator-marketplace" python3 "$PLUGIN_DIR/skills/nav-graph/functions/graph_manager.py" \ --action query --concept frontend \ --graph-path .agent/knowledge/graph.json 2>/dev/null | head -40 python3 "$PLUGIN_DIR/skills/nav-graph/functions/graph_manager.py" \ --action query --concept testing \ --graph-path .agent/knowledge/graph.json 2>/dev/null | head -40 ``` Look for patterns about test utilities used (RTL vs Enzyme), snapshot policy, accessibility-test conventions. ### Step 1: Locate Component Under Test Ask if not specified: ``` Which component should I test? - File path (e.g., src/components/UserProfile.tsx)