# Af Rtl Component Tests

> Write React Testing Library (RTL) component tests for UI behavior, accessibility, and design contracts. Use when testing React components, creating component test files, or defining UI behavior before implementation during Refinement phase.

- Skill: `majiayu000/af-rtl-component-tests` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/af-rtl-component-tests`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/af-rtl-component-tests/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/af-rtl-component-tests

---


# RTL Component Tests

## What to read

**When RTL tests are written (Refinement phase, before engineering):**
→ [testing-guide.md#test-writing-timeline](../../docs/guides/testing-guide.md#test-writing-timeline)

**React component testing patterns with RTL:**
→ [testing-guide.md#react-component-testing](../../docs/guides/testing-guide.md#react-component-testing)

**RTL workflow, selector contracts, and component behavior specs:**
→ [af-testing-expertise/SKILL.md](../af-testing-expertise/SKILL.md) — see "Workflow: Writing RTL Component Tests"

**UX design flow and Storybook integration:**
→ [af-ux-design-expertise/SKILL.md](../af-ux-design-expertise/SKILL.md) — see "Stage 4: Behavior Locked with Tests"