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
Decision gist · record as of 2026-04-07
Testing teaches React Testing Library best practices centered on user-focused component testing with proper query priorities. 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.
Use it when
- The testing skill recommends userEvent over fireEvent for simulating realistic user interactions.
- React Testing Library's testing skill teaches async patterns: use findBy queries (which combine getBy + waitFor) for elements appearing.
Verify before relying
Read SKILL.md below before installing (8 files). Open directory: indexed for reading, not audited.
Install
DaleStudy/skills/testing · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn React Testing Library best practices and query priorities”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
React Testing Library guides you through writing tests that mirror real user behavior rather than internal implementation. It emphasizes querying by role, label, and text—prioritizing accessibility—and provides utilities for simulating user interactions, handling async operations, and debugging. Master query types, user events, and common patterns like custom renders and hook testing.
This skill guides you through unit testing React components, hooks, and utilities with Vitest and React Testing Library. It enforces the Given/When/Then pattern, prioritizes accessible queries like getByRole, and requires userEvent for realistic interactions. Learn proper async handling, mocking strategies, and what to avoid when testing user-visible behavior.
This skill teaches you to test React components effectively using Jest and React Testing Library. You'll learn configuration setup, query strategies, mocking techniques, async testing patterns, custom hooks testing, and integration approaches that follow user-behavior-first principles.
Master Testing Library and Vitest patterns for React components, custom hooks, and async workflows. This skill covers behavior-driven testing with userEvent, MSW for API mocking, renderHook for custom logic, and jest-axe for accessibility audits—everything except E2E tests and TDD enforcement.
Master unit testing for React components by querying the DOM as users do, not by inspecting implementation details. This skill covers React Testing Library patterns, userEvent interactions, network mocking with MSW, custom hook testing, and accessibility checks with axe. Learn when to reach for Vitest, Jest, or browser-based runners, and how to structure provider-wrapped tests that mirror production.
Master React Native testing workflows with this agent skill designed for AI coding assistants. It equips you to write, review, and refine component tests using Testing Library patterns, streamlining quality assurance in your React Native projects.
More skills Testing Qa (unlicensed) · vitest-testing-patterns (MIT) · react-native-testing (MIT)