Component tests

Render one component, or a small tree, with its real providers, and drive it the way a person does: find controls by role and name, type and click through user events, wait for what appears, and let only the network be fake. Success is a test that fails when the component breaks for a person and keeps passing when the markup is refactored.

Process

1. Pick the level. A component test owns one screen region's behavior: rendering per state, interaction, validation, focus, and how it talks to its data layer.

   The risk is in	Test it with
   A pure rule (formatting, totals, validation logic)	test-unit, then one component test that shows the result
   Rendering, interaction, states, keyboard and ARIA of one component or form	This skill
   The real API, database or service contract behind the component	test-integration
   A path across pages, auth, real backend, routing in the built app	test-e2e
   Layout, real CSS, scrolling, contrast, pixels	A browser runner (step 2), test-visual, test-accessibility