playbooks

home / skills / alekspetrov / navigator / frontend-test

frontend-test skill

/skills/frontend-test

This skill generates React component tests with RTL, covering rendering, interactions, accessibility, and snapshot tests to boost reliability.

npx playbooks add skill alekspetrov/navigator --skill frontend-test

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.0 KB
---
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** ⚛️

Overview

This skill generates complete frontend component tests for React and Vue using best-practice testing libraries. It creates unit, snapshot, accessibility, and user-interaction tests so teams can validate rendering, behavior, and ARIA attributes quickly. Auto-invokes when you ask to test a component or add component tests.

How this skill works

When triggered, the skill inspects the component name, props, and visible markup to produce a test file scaffold. It includes React Testing Library (or appropriate Vue testing utilities) imports, render setup, interaction flows (click, type, etc.), accessibility assertions, and optional snapshot tests. The output is focused, editable code you can drop into your test suite.

When to use it

  • You want unit tests and interaction coverage for a new or existing React/Vue component
  • You ask phrases like "test this component", "write component test", or "add component test"
  • You need quick accessibility assertions (ARIA roles, labels, focus) added to tests
  • You want a starting point for snapshot tests and behavior-driven test cases

Best practices

  • Prefer user-centric queries (getByRole, getByLabelText) over implementation details
  • Mock only external services; keep component tests focused on UI and interaction
  • Keep tests deterministic: avoid timers or randomness unless mocked
  • Assert on behavior and accessibility rather than internal implementation
  • Split complex interaction flows into clear arrange-act-assert sections

Example use cases

  • Generate tests for a form component that verifies input, validation messages, and submit behavior
  • Create a button component test that checks click handlers and ARIA attributes
  • Produce snapshot and interaction tests for a dropdown or modal component
  • Add accessibility checks for components that manage focus or keyboard navigation
  • Scaffold tests for a list component that verifies rendering of dynamic items

FAQ

Which testing library does this use?

By default it generates code for React Testing Library; for Vue it uses equivalent Vue testing utilities. You can adapt imports to your project setup.

Will it mock network requests?

The generated tests favor local interaction; network calls are left to you to mock with your preferred tool (msw, jest.mock, etc.).