front-end-testing_skill

Overview

This skill teaches framework-agnostic DOM Testing Library patterns for behavior-driven UI testing across React, Vue, Svelte, and plain DOM apps. It focuses on testing what users see and do, not implementation details, so tests survive refactors and catch real bugs. Use the patterns to write accessible, reliable, and maintainable front-end tests.

How this skill works

The skill describes query selection priority (role, label, placeholder, text, etc.), async utilities (findBy, waitFor, waitForElementToBeRemoved), and realistic user simulation with userEvent.setup(). It also covers MSW integration for network-level API mocking and when to prefer fireEvent. Examples show concrete patterns to assert user-visible behavior and avoid brittle implementation-based assertions.

When to use it

• Testing interactive UI behavior (clicks, typing, keyboard navigation)
• Verifying async flows like loading states and API-driven renders
• Ensuring accessible markup and ARIA-backed components
• Mocking network responses consistently across tests with MSW
• When you want tests that survive refactors of state or implementation

Best practices

• Query by accessibility first: getByRole, getByLabelText, then fallbacks
• Use userEvent.setup() per test to simulate realistic user interactions
• Prefer findBy for waiting for elements and waitFor for complex assertions
• Avoid getByTestId except as last resort; don’t assert non-existence with getBy*
• Keep waitFor callbacks as pure assertions (no side effects)

Example use cases

• Submit a form by typing into labeled inputs and clicking the submit role button
• Wait for an API-driven list to render using MSW and assert listitem count
• Test a debounced search input by typing and awaiting suggestion items with findBy
• Assert a modal opens/closes by querying dialog role and using waitForElementToBeRemoved
• Validate keyboard interactions using userEvent.keyboard for accessibility tests