skills.rest
recca0120
recca0120COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-testing

Define React frontend testing strategies using testing-library user-visible assertions.

11|2|Updated Feb 5, 2026
Search Tags:#vitest#test doubles#react#frontend testing#storybook#testing-library#userEvent
One-click install
npx skills add https://github.com/recca0120/code-quest --skill frontend-testing-recca0120
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/recca0120/code-quest/tree/main/.claude/skills/frontend-testing
Command: npx skills add https://github.com/recca0120/code-quest --skill frontend-testing-recca0120

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend testing becomes slow and brittle when tests split into unclear unit vs integration layers, rely on fragile mocks, or fail to validate the real user experience of React components and hooks.

Core Features & Use Cases

  • Testing Library first: write tests from the user’s observable behavior using real rendering and a single consistent test filename pattern.
  • Fake-first strategy for hard dependencies: use fakes for external systems (Socket.IO, browser APIs, time, CLI/network boundaries) and use spies/partial mocks for internal observation.
  • Fake components for React subcomponent isolation: replace child components with Fake<Name> implementations that preserve prop typing and expose test-friendly signals.
  • Correct query priority: prefer role/label/placeholder/text queries before falling back to test ids.
  • Choose the right test surface: use Storybook play functions for visual/interactive demos and Vitest + testing-library for correctness and regression.

Quick Start

Use the frontend-testing skill to decide the right test double approach and testing-library query style while writing React component, hook, or store tests.

Frequently Asked Questions about frontend-testing

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

FAQPage Schema
How do I write reliable React component tests without relying on implementation details?▼

Reliable React testing uses testing-library to assert user-visible behavior through role, label, and text queries, avoiding brittle implementation checks and prioritizing real rendering over fragile component mocks.

When should I use fake components instead of mocks for React subcomponent isolation?▼

Use fake components to replace child components with Fake<Name> implementations that preserve prop typing and expose test-friendly signals, whereas spies and partial mocks are better for internal observation of logic.

What's the best way to test React hooks and state stores with Vitest?▼

Testing React hooks and state stores with Vitest applies a fake-first strategy for external systems like Socket.IO, using deterministic fakes for boundaries and spies to verify internal store behavior and hook logic.

Should I use Storybook play functions or testing-library for frontend testing?▼

Storybook play functions are for visual and interactive demos, while Vitest with testing-library provides correctness and regression testing for React components, establishing clear coverage boundaries between the two.

Why do my frontend tests break when I refactor UI code even though user behavior stays the same?▼

Frontend tests break during refactoring when they rely on implementation details or test ids; using testing-library query priority rules for role and label assertions ensures tests validate user behavior instead.

Does Vitest support fake timers and network boundaries for deterministic React testing?▼

Vitest supports deterministic React testing by applying a fake-first strategy for hard dependencies, using fakes for browser APIs, time, and Socket/CLI network boundaries to ensure consistent test execution.

Related Skills

Explore More Software Engineering Skills→
iliaaliliaal

testing-react

Generate React/TypeScript tests with Vitest and React Testing Library.

Community
Intermediate
Brite-NitesBrite-Nites

testing-strategy

Standardize testing patterns across Vitest, React Testing Library, MSW, Playwright, and pytest.

Official
Advanced
alexgorbatchevalexgorbatchev
1

react-testing

Automate React component validation with Storybook stories and play functions.

Community
Intermediate
heaptracetechnologyheaptracetechnology
13

e2e-test

Automate end-to-end browser tests for multi-step user journeys with Playwright or Cypress.

Community
Advanced