Back to skills
SkillHub ClubBuild UIFrontendTesting

frontend-test

Automatically generates React/Vue component tests using React Testing Library when triggered by specific phrases. Creates test files covering rendering, user interactions, accessibility, and snapshots. Works with common frontend testing patterns.

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars
160
Hot score
96
Updated
March 20, 2026
Overall rating
A7.7
Composite score
5.2
Best-practice grade
B80.4

Install command

npx @skill-hub/cli install alekspetrov-navigator-frontend-test
react-testingcomponent-testingtest-generationfrontend-automation

Repository

alekspetrov/navigator

Skill path: skills/frontend-test

Automatically generates React/Vue component tests using React Testing Library when triggered by specific phrases. Creates test files covering rendering, user interactions, accessibility, and snapshots. Works with common frontend testing patterns.

Open repository

Best for

Primary workflow: Build UI.

Technical facets: Frontend, Testing.

Target audience: Frontend developers working with React or Vue who need to quickly generate component tests following React Testing Library patterns.

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: alekspetrov.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

  • Install frontend-test into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
  • Review https://github.com/alekspetrov/navigator before adding frontend-test to shared team environments
  • Use frontend-test for frontend workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

Original source / Raw SKILL.md

---
name: frontend-test
description: Generate frontend component tests (unit, snapshot, e2e). Auto-invoke when user says "test this component", "write component test", or "add component test".
allowed-tools: Read, Write, Edit, Grep, Glob, Bash
version: 1.0.0
---

# Frontend Test Generator

Generate React/Vue component tests with React Testing Library including user interactions.

## When to Invoke

Auto-invoke when user mentions:
- "Test this component"
- "Write component test"
- "Test component"
- "Add component test"
- "Component tests for [name]"

## What This Does

1. Generates test file with RTL utilities
2. Tests component rendering
3. Tests user interactions (click, type, etc.)
4. Tests accessibility
5. Generates snapshot tests

## Success Criteria

- [ ] Test file generated with RTL imports
- [ ] Tests render component correctly
- [ ] User interactions are tested
- [ ] Accessibility attributes validated
- [ ] Tests follow React Testing Library best practices

**Auto-invoke when writing frontend component tests** ⚛️
frontend-test | SkillHub