Testing

This teaches you to write tests the way users actually interact with your app, not by poking at internal state. It's built around React Testing Library and Vitest, with a clear hierarchy: use getByRole first, getByLabelText for forms, and only reach for getByTestId when nothing else works. The guide hammers on userEvent over fireEvent, waiting with findBy instead of arbitrary timeouts, and keeping toBeInTheDocument even though getBy already throws, because it signals intent to whoever reads your test later. Includes MSW setup templates and a solid list of mistakes people actually make, like querying with container.querySelector or wrapping everything in act.

skills.sh installs: 413
GitHub stars: 4
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dalestudy/skills --skill testing --agent claude-code

Installs into .claude/skills of the current project.

Files

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 (최후 수단) - 다른 방법이 불가능할 때만 사용

상세 가이드: references/query-priority.md

사용자 상호작용 테스트

userEvent 사용 (권장)

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('사용자가 폼을 제출할 수 있다', async () => {
  const user = userEvent.setup();
  render(<LoginForm />);

SKILL.md on GitHub