Claude MarketplacesSubmit
itechmeat avatar

React Testing Library

itechmeat/llm-code

This is the go-to library for testing React components the way users actually interact with them. Instead of poking at component internals or state, you query elements by their accessible roles, labels, and visible text, then simulate real user events like typing and clicking. The query priority system pushes you toward getByRole and getByLabelText first, falling back to test IDs only when semantic queries won't work. It includes async utilities for waiting on elements that appear after data loads, and the user-event library over fireEvent for more realistic interactions. The philosophy is simple: if your test doesn't resemble how someone uses your UI, it's probably testing the wrong thing.

skills.sh installs
1.4K
GitHub stars
23
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add itechmeat/llm-code --skill react-testing-library --agent claude-code

Installs into .claude/skills of the current project.

Files

React Testing Library Skill

Quick Navigation

TopicLink
Queriesreferences/queries.md
User Eventsreferences/user-events.md
APIreferences/api.md
Asyncreferences/async.md
Debuggingreferences/debugging.md
Configreferences/config.md

Installation

Install: npm install --save-dev @testing-library/react @testing-library/dom. Recommended extras: @testing-library/user-event and @testing-library/jest-dom. React 19 requires v16.1.0+.

Core Philosophy

"The more your tests resemble the way your software is used, the more confidence they can give you."

Avoid testing:

  • Internal state of components
  • Internal methods
  • Lifecycle methods
  • Child component implementation details

Test instead:

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/itechmeat/llm-code
Categories
Frontend Development, Backend & APIs, Testing & QA, Documentation, AI & Agent Building, Design & UI/UX
First seen
May 16, 2026

More from itechmeat/llm-code

All 10

Recommended

More Frontend Development
1next-safe-action avatarsafe-action-hooksnext-safe-action/skillsUse when executing next-safe-action actions from React client components -- useAction, useOptimisticAction, handling status/callbacks (onSuccess/onError/onSettl1.2Kskills.sh installs
2vercel-labs avatarsveltevercel-labs/json-renderSvelte 5 renderer for json-render that turns JSON specs into Svelte component trees. Use when working with @json-render/svelte, building Svelte UIs from JSON, c1.2Kskills.sh installs
3zarazhangrui avatarfrontend-slideszarazhangrui/frontend-slidesCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PP1.2Kskills.sh installs
4pixel-process-ug avatarui-ux-pro-maxpixel-process-ug/superkit-agentsUse when the user needs full UI/UX design intelligence — styles, palettes, fonts, UX guidelines, chart selection, and accessible, performant implementation acro1.2Kskills.sh installs
5am-will avatarvercel-react-best-practicesam-will/codex-skillsReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c1.2Kskills.sh installs
6aj-geddes avatarresponsive-web-designaj-geddes/useful-ai-promptsCreate responsive layouts using CSS Grid, Flexbox, media queries, and mobile-first design. Use when building adaptive interfaces that work across all devices.1.1Kskills.sh installs