# React Component Testing

> Test React components with Testing Library — render, query by role, and assert on user-visible behavior.

- Skill: `alexngai/react-component-testing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add alexngai/react-component-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/alexngai/react-component-testing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: alexngai (https://skillmd.com/u/alexngai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/alexngai/react-component-testing

---


# React Component Testing

Test what the user sees, not implementation details.

1. `render(<Component />)` from `@testing-library/react`.
2. Query by accessible role: `screen.getByRole('button', { name: /save/i })`.
3. Drive interactions with `userEvent`, then assert on the resulting DOM.
4. Avoid `container.querySelector` and snapshot-everything tests — they break on refactors.

Prefer `findBy*` for async UI and `getBy*` for content that is already present.