frontend-component-test

Structure React component tests by organizing Vitest and RTL suites to cover rendering, props, events, state changes, and conditional rendering, ensuring consistent readability and robust validation across your codebase.

React Testing Library selectors should prioritize accessible queries like Role, Label, Text, and TestId to ensure robust component tests, deliberately avoiding brittle DOM-queries that break during refactoring.

Test state changes and events in React components using Vitest by rendering the component with RTL, triggering user events, and asserting that the UI updates correctly across conditional rendering scenarios.

Vitest is required to enforce this specific React Testing Library component testing convention, as the Skill establishes a defined test structure and accessible selector practices tailored for the Vitest environment.

Accessible selectors like Role and Text prevent brittle component tests by querying elements similarly to how users interact with the DOM, ensuring tests remain valid during implementation refactoring.

The recommended workflow for React component tests involves creating or updating test files using Vitest and RTL, following established guidelines for rendering, accessible selectors, and state validation to maintain codebase consistency.