frontend-test_skill

Overview

This skill generates and maintains frontend tests across unit, integration, and end-to-end (E2E) levels for web applications. It focuses on producing runnable test files placed in standard locations and improving test coverage over time. The skill works with common testing frameworks and creates tests that are clear, maintainable, and suited for CI pipelines.

How this skill works

The agent inspects source code, component structure, and routes to determine appropriate test targets and strategies. It writes unit tests for functions and components, integration tests for component interactions, and E2E scripts for full user flows. Tests are saved to designated folders and include assertions, mocks, and setup/teardown where applicable.

When to use it

• Add tests for new components, utilities, or pages
• Increase coverage for a risky or changing area of the frontend
• Create regression tests after fixing bugs
• Automate critical user flows for CI/E2E verification
• Onboarding: provide example tests to show best practices

Best practices

• Place unit and integration tests under __tests__/ and E2E scripts under e2e/
• Write focused unit tests that assert single responsibilities
• Use integration tests to cover interactions between components and services
• Keep E2E tests for the most critical user journeys to avoid flakiness
• Mock network and external dependencies in unit/integration tests, not in E2E

Example use cases

• Generate Jest/RTL unit tests for a React component and its hooks
• Create integration tests that validate component composition and event handling
• Produce Cypress or Playwright E2E scenarios for signup, checkout, and navigation
• Update test coverage for a refactored module and add regression checks
• Provide CI-ready test suites with setup scripts and clear assertions