testing
Master React Testing Library fundamentals through accessibility-first query selection, user-centric event simulation, and async handling patterns. Learn when to use getByRole, userEvent, and findBy queries, plus common pitfalls to avoid in component testing.
Testing teaches React Testing Library best practices centered on user-focused component testing with proper query priorities.
AI-generated summary based on this skill's SKILL.md
Install
DaleStudy/skills/testing · repository language: TypeScript
git clone https://github.com/DaleStudy/skills
cp -r skills/skills/testing ~/.claude/skills/testingnpx skillfed install DaleStudy/skills/testingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are React Testing Library best practices for query selection?
React Testing Library prioritizes queries by user perspective: getByRole is preferred for accessible elements, followed by getByLabelText, getByPlaceholderText, and getByText. Avoid getByTestId unless elements lack semantic meaning. The testing skill emphasizes accessibility-first query selection to ensure tests reflect how users interact with components, reducing brittle tests tied to implementation details.
How should I choose between userEvent vs fireEvent in React testing?
The testing skill recommends userEvent over fireEvent for simulating realistic user interactions. userEvent dispatches actual browser events and handles user behavior sequences (typing, clicking with modifiers), while fireEvent directly triggers events without user context. Use userEvent for most scenarios; fireEvent only when testing low-level event handling. This approach better validates component behavior.
What's the proper async testing pattern with waitFor and findBy queries?
React Testing Library's testing skill teaches async patterns: use findBy queries (which combine getBy + waitFor) for elements appearing after async operations, or explicitly wrap assertions in waitFor for state updates. Avoid testing implementation details like state changes; instead, verify DOM updates users see. This ensures tests remain maintainable and reflect actual user experience.
How do I set up Vitest with MSW for component testing?
The testing skill covers Vitest setup with Mock Service Worker for API mocking: configure Vitest's test environment, import MSW handlers, establish server setup in beforeAll/afterEach hooks, and define request mocks matching your API contracts. This approach isolates component tests from network calls, enabling reliable, fast test execution without external dependencies.
What common testing anti-patterns should I avoid?
The testing skill identifies key anti-patterns: testing implementation details (internal state, component methods), using getByTestId as default, relying on fireEvent for user simulation, and not awaiting async operations. Instead, test user-visible behavior, prioritize semantic queries, use userEvent, and properly handle async patterns. These practices prevent brittle tests and maintain long-term test suite health.
How does getByRole differ from getByTestId in testing?
React Testing Library's testing skill emphasizes getByRole queries elements by their accessible role (button, heading, textbox), encouraging semantic HTML and accessibility compliance. getByTestId targets data-testid attributes, tying tests to implementation. Prefer getByRole to ensure components remain accessible and tests validate real user interactions rather than internal structure.
SKILL.md
rendered from the published skill — quoted content, verbatim
Testing Library
React Testing Library 기반 테스트 작성 모범 관례 및 안티패턴 회피 가이드.
핵심 원칙
Testing Library의 철학: 사용자가 사용하는 방식대로 테스트하라
- 접근성 기반 쿼리 우선 - 실제 사용자가 요소를 찾는 방식 사용
- 구현 세부사항 테스트 금지 - 컴포넌트 내부 상태/메서드 직접 접근 지양
- 실제 사용자 행동 시뮬레이션 - userEvent 사용, fireEvent 지양
- 비동기 처리 명시적 대기 - waitFor, findBy 활용
쿼리 우선순위
Testing Library는 다양한 쿼리를 제공하지만, 접근성과 사용자 경험을 반영하는 순서로 사용해야 함.
권장 쿼리 순서 (높음 → 낮음)
getByRole(최우선) - 스크린 리더가 인식하는 방식getByLabelText- 폼 요소 (label과 연결된 input)getByPlaceholderText- placeholder가 명확한 경우getByText- 텍스트 콘텐츠로 검색getByDisplayValue- 현재 입력된 값으로 검색 (폼 요소)getByAltText- 이미지 alt 속성getByTitle- title 속성 (tooltip 등)getByTestId(최후 수단) - 다른 방법이 불가능할 때만 사용
상세 가이드:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 8 files
skills/testing/SKILL.md
skills/testing/assets/msw-setup.ts
skills/testing/assets/test-setup.ts
skills/testing/assets/vitest.config.ts
skills/testing/references/async-patterns.md
skills/testing/references/common-mistakes.md
skills/testing/references/query-priority.md
skills/testing/references/user-events.md