skills.rest
planetaryescape
planetaryescapeOFFICIAL
Explore all skills by this author →
GitHub

writing-tests

Writes user-centric frontend tests using accessibility queries and boundary mocking.

7|Updated Dec 4, 2025
Search Tags:#testing#accessibility#frontend#mocking#user-behavior#getByRole
One-click install
npx skills add https://github.com/planetaryescape/blah.chat --skill writing-tests-planetaryescape
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: writing-tests
Source: https://github.com/planetaryescape/blah.chat/tree/main/.claude/skills/writing-tests
Command: npx skills add https://github.com/planetaryescape/blah.chat --skill writing-tests-planetaryescape

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides you to write tests focused on user-visible behavior, accessibility, and real-world usage rather than implementation details.

Core Features & Use Cases

  • Behavior-first testing: validate user interactions and outcomes.
  • Accessibility-focused: use queries like getByRole, getByLabelText.
  • Boundary mocking: mock at integration boundaries, not internals.

Quick Start

Start by outlining a test that mirrors a real user action, render the component, trigger actions via accessibility queries, and assert expected outcomes. Then see an example test structure and recommended tooling to adopt the Kent C. Dodds approach.

Frequently Asked Questions about writing-tests

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write frontend tests that reflect real user behavior instead of implementation details?▼

User-centric testing validates how an app behaves for real users by rendering components, triggering actions via accessibility queries like getByRole and getByLabelText, and asserting expected outcomes without relying on internal implementation details.

What is the best way to mock dependencies when testing frontend components and hooks?▼

The best way to mock dependencies is at integration boundaries rather than component internals. Boundary mocking keeps tests resilient to refactoring while validating real user workflows and interactions across components, hooks, and features.

Why should I use getByRole and getByLabelText queries in my frontend tests?▼

Using getByRole and getByLabelText queries ensures tests interact with elements exactly as users do, validating accessibility and real-world usage. This behavior-first approach catches issues that implementation-focused queries like getByTestId would miss.

Can I apply Kent C. Dodds testing principles to validate interactions across components and hooks?▼

Yes, the Kent C. Dodds testing approach applies across frontend components, hooks, and features by focusing on behavior-first validation, accessibility queries, and boundary mocking to mirror real user workflows throughout the testing process.

When do I need behavior-first testing for my frontend project?▼

Behavior-first testing is needed when validating user interactions and outcomes in frontend projects. It ensures tests mirror real user actions, uses accessibility-focused queries, and mocks at integration boundaries to verify actual app behavior.

Testing implementation details vs user behavior: which approach prevents test breakage during refactoring?▼

Testing user behavior prevents test breakage during refactoring. By validating outcomes through accessibility queries and mocking at boundaries instead of internals, tests remain resilient to internal code changes while still verifying real workflows.

Related Skills

Explore More Software Engineering Skills→
notbozhonotbozho

testing-library

Validate UI component behavior across React, Vue, and Svelte using Testing Library queries and user events.

Community
Intermediate
zhangzhang-111-izhangzhang-111-i
2

coverage

Generate code coverage reports from Playwright test executions.

Community
Intermediate
buzzdanbuzzdan
4

testing

Guide React component, hook, and integration tests with Jest, React Testing Library, and MSW.

Community
Advanced
rhuangabrielsantosrhuangabrielsantos

vercel-composition-patterns

Refactor React components to replace boolean props with provider-based composition patterns.

Community
Intermediate