testing-frontend

The testing-frontend skill is an specialized toolkit designed for frontend developers focused on writing robust, user-centric tests. It streamlines the creation and maintenance of unit and integration tests for modern web applications, ensuring high reliability for complex UI components. By enforcing a behavioral testing philosophy, it helps developers focus on how users interact with the application rather than brittle internal implementation details.

• Expert support for testing frameworks including Vitest, React Testing Library, and Vue Test Utils.

• Implements user-centric testing patterns, prioritizing accessibility-based queries like getByRole and getByLabelText to ensure code is both testable and accessible.

• Provides standardized patterns for mocking API responses and managing asynchronous operations in React and Vue components.

• Simplifies form testing workflows, including user interaction simulation with user-event, form submission validation, and state-change assertions.

• Supports complex testing scenarios such as QueryClientProvider wrappers for React Query, Pinia state management for Vue, and complex loading or error state handling.

• Enforces best practices to avoid implementation-dependent tests, reducing maintenance overhead when refactoring UI code.

• Target users include front-end engineers, software architects, and quality assurance developers building interactive web interfaces.

• Use this skill when implementing new UI features, refactoring components, or writing end-to-end integration tests for frontend logic.

• Input typically involves component code, interaction requirements, or API definitions; output results in clean, maintainable test files that follow industry-standard testing methodologies.

• Practical constraints include adherence to the provided query priority hierarchy, ensuring tests remain maintainable as the component tree evolves.

• Always prioritize semantic queries over test-ids to mimic real-world browser usage patterns and improve application accessibility coverage.