alekspetrov/navigator/frontend-test

Claude Code and agent skill by alekspetrov/navigator

Trust tier 2
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

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".

Install

npx vskill@latest install alekspetrov/navigator/frontend-test

SKILL.md

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:-$(cat "${NAVIGATOR_CONFIG_HOME:-${XDG_CONFIG_HOME:-$HOME/.config}/navigator}/plugin-root" 2>/dev/null)}"
[ -d "$PLUGIN_DIR/skills" ] || 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)
  - Component name (e.g., UserProfile)

Read the component in full so generated tests cover actual behavior (props handled, events emitted, conditional rendering, etc.).

Step 2: Detect Test Framework + Library
bash
# React Testing Library
grep -q '"@testing-library/react"' package.json 2>/dev/null && echo "RTL detected"
# Vue Test Utils
grep -q '"@vue/test-utils"' package.json 2>/dev/null && echo "Vue Test Utils detected"
# Test runner
grep -q '"vitest"' package.json 2>/dev/null && echo "Vitest"
grep -q '"jest"' package.json 2>/dev/null && echo "Jest"

Check for setupTests.ts / vitest.setup.ts to understand global utilities and matchers.

Step 3: Generate Test File

File location: colocate with the component (UserProfile.test.tsx next to UserProfile.tsx) unless the project convention is otherwise.

Structure (RTL + Vitest/Jest):

tsx
import { describe, it, expect, vi } from 'vitest';  // or '@jest/globals'
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { {COMPONENT_NAME} } from './{COMPONENT_NAME}';
describe('{COMPONENT_NAME}', () => {
  describe('rendering', () => {
    it('renders with required props', () => {
      render(<{COMPONENT_NAME} {...{REQUIRED_PROPS}} />);
      expect(screen.getByRole('{ROLE}')).toBeInTheDocument();
    });
    it('renders conditional content when prop is set', () => {
      render(<{COMPONENT_NAME} {...{REQUIRED_PROPS}} {OPTIONAL_PROP} />);
      expect(screen.getByText('{EXPECTED_TEXT}')).toBeInTheDocument();
    });
  });
  describe('interactions', () => {
    it('calls onClick handler when clicked', async () => {
      const user = userEvent.setup();
      const onClick = vi.fn();
      render(<{COMPONENT_NAME} {...{REQUIRED_PROPS}} onClick={onClick} />);
      await user.click(screen.getByRole('button'));
      expect(onClick).toHaveBeenCalledOnce();
    });
  });
  describe('accessibility', () => {
    it('has accessible name', () => {
      render(<{COMPONENT_NAME} {...{REQUIRED_PROPS}} />);
      expect(screen.getByRole('{ROLE}')).toHaveAccessibleName();
    });
  });
});

Snapshot tests: only generate if the project's existing tests use them (check peer test files first). They're easy to over-rely on; prefer assertion-based tests for behavior, snapshots only for stable visual structure.

Step 4: Verify
bash
{TEST_COMMAND} {COMPONENT_NAME}

If tests fail because they assume incorrect behavior, fix the tests. Only fix the component if it's actually buggy — surface that to the user.

Step 5: Emit Execution Summary (Graph Ingestion)
json
{
  "execution_summary": {
    "skill": "frontend-test",
    "task": "tests for {COMPONENT_NAME}",
    "files_created": ["{test file path}"],
    "files_modified": [],
    "tests_added": ["{test file path}"],
    "stack_detected": "{e.g. react+rtl+vitest}",
    "patterns_followed": [
      {"summary": "{e.g. queries via getByRole, not getByTestId}", "concepts": ["frontend", "testing"], "confidence": 0.85}
    ],
    "decisions_made": [
      {"summary": "{e.g. asserted accessible name instead of snapshot to avoid brittleness}", "concepts": ["testing"], "confidence": 0.8}
    ],
    "pitfalls_avoided": [
      {"summary": "{e.g. used userEvent.setup() not fireEvent — RTL recommendation}", "concepts": ["testing"], "confidence": 0.85}
    ],
    "assumptions_made": ["{e.g. project uses Vitest globals from setup file}"]
  }
}

Ingest:

bash
PLUGIN_DIR="${CLAUDE_PLUGIN_ROOT:-$(cat "${NAVIGATOR_CONFIG_HOME:-${XDG_CONFIG_HOME:-$HOME/.config}/navigator}/plugin-root" 2>/dev/null)}"
[ -d "$PLUGIN_DIR/skills" ] || PLUGIN_DIR="$HOME/.claude/plugins/marketplaces/navigator-marketplace"
echo '<execution_summary JSON>' | python3 "$PLUGIN_DIR/skills/nav-graph/functions/execution_to_graph.py" -

Success Criteria

  • [ ] Test file colocated with component (or per project convention)
  • [ ] Rendering, interactions, and at least one accessibility check covered
  • [ ] Queries use getByRole / getByLabelText over getByTestId where possible
  • [ ] All generated tests pass on first run
  • [ ] Execution summary emitted

When NOT to Use This Skill

  • You're creating a new component from scratch — use frontend-component (it generates tests as part of its workflow)
  • You want to test a backend endpoint or service — use backend-test
  • You want visual regression testing — use visual-regression

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
159
Repository forks
7
7-day trend score
25

Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 20 Mar 2026, 7 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/alekspetrov/navigator/frontend-test/badge)](https://verified-skill.com/skills/alekspetrov/navigator/frontend-test)

Something wrong with this skill or its page? Tell us.