frontend-testing

Generate Vitest and React Testing Library tests for frontend components, hooks, and utilities.

785|169|Updated Aug 8, 2024
One-click install
npx skills add https://github.com/Ohh-889/skyroc-admin --skill frontend-testing-ohh-889
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/Ohh-889/skyroc-admin/tree/main/.agents/skills/frontend-testing
Command: npx skills add https://github.com/Ohh-889/skyroc-admin --skill frontend-testing-ohh-889

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Generate high-quality Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities, ensuring robust test coverage and maintainable test suites.

Core Features & Use Cases

  • Automated Test Scaffolding: Generate test skeletons for components, hooks, and utilities following standard conventions.
  • Pattern Adoption: Enforce consistent testing patterns (AAA, RTL queries, real components, integration-style tests).
  • Use Case: When adding a new frontend module, generate unit and integration tests aligned with project standards.

Quick Start

Create a Vitest + RTL test suite for your target frontend component in one step.

Frequently Asked Questions about frontend-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Vitest and RTL tests for frontend components automatically?

Automated test scaffolding generates Vitest and RTL test skeletons for frontend components, hooks, and utilities. It enforces standard conventions like AAA patterns and semantic queries to ensure robust test coverage and maintainable suites.

What is the best way to structure unit and integration tests for React components?

The best way to structure unit and integration tests is using pattern-based generation that conforms to AAA conventions, semantic RTL queries, and real component rendering. This approach ensures tests remain maintainable and accurately reflect user interactions.

Can I use this to add integration tests for existing frontend utilities and hooks?

Yes, you can generate both unit and integration tests for existing frontend utilities and hooks. The generation process applies incremental, pattern-based test creation aligned with project standards across the entire frontend codebase.

Does automated frontend testing support mock patterns and real component rendering?

Automated frontend testing supports mock patterns and enforces using real components during test generation. This combination allows for integration-style tests that validate component behavior accurately without sacrificing isolation.

Why should I use semantic queries in React Testing Library instead of test IDs?

You should use semantic queries in React Testing Library because automated test generation enforces them to validate actual DOM accessibility and user behavior. This approach yields more robust and maintainable integration tests.

What are the limitations of incremental test generation for frontend modules?

Incremental test generation for frontend modules is limited to Vitest and RTL environments. It relies on pattern-based generation, meaning highly unconventional component structures may require manual adjustments to conform to standard testing conventions.