What problem does it solve? Front-end tests often break on refactors or pass while bugs exist because they target implementation details instead of user-visible behavior. This Skill guides you to write DOM tests that mirror how users interact with your UI, reducing false negatives and false positives. ## Core Features & Use Cases - Accessibility-first query selection: Prioritize getByRole and getByLabelText over test IDs and CSS selectors, with clear guidance on query variants (getBy, queryBy, findBy). - Realistic user interactions: Use userEvent.setup() patterns for clicks, typing, and keyboard input instead of low-level fireEvent calls. - Async and network testing: Handle loading states, debounced inputs, and API responses with findBy, waitFor, and MSW network-level mocking. - Use Case: When writing a Vitest or Jest test for a login form, this Skill directs you to mount the component, type into labeled fields with userEvent, click the submit button by role, and assert the callback fired exactly once. ## Quick Start Write a DOM test for my login form that types an email, clicks submit, and verifies the submit handler was called once.
