Designs frontend tests using the repository's configured React test and browser harnesses, including RTL, MSW, Vitest, and Playwright when present. Use when adding or reviewing component, loading/erro
1---2name: frontend-typescript-testing3description: Designs frontend tests using the repository's configured React test and browser harnesses, including RTL, MSW…4---56# .claude/skills-en/frontend-typescript-testing/SKILL.md
F
SKILL.mdAgent skill
Transport
File
Status
Listed
SKILL.md
Install
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
shterminal
1npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a cursor -y
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
Designs frontend tests using the repository's configured React test and browser harnesses, including RTL, MSW, Vitest, and Playwright when present. Use when adding or reviewing component, loading/error-state, integration, or frontend E2E tests.
FAQ
Questions
Publisher
Updated
2026-11-09
Stars
236
Agents
3
Categories
3
How do I install frontend-typescript-testing?
Download .claude/skills-en/frontend-typescript-testing/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does frontend-typescript-testing live?
The publisher keeps it at https://github.com/shinpr/ai-coding-project-boilerplate.
Which agents can use frontend-typescript-testing?
Claude, Cursor, Codex, and Grok Build can read a SKILL.md you add from the publisher's repository. Grok Bot installs it when you send the skill's GitHub folder link in a chat.
From the publisher
SKILL.md
name
frontend-typescript-testing
description
Designs frontend tests using the repository's configured React test and browser harnesses, including RTL, MSW, Vitest, and Playwright when present. Use when adding or reviewing component, loading/error-state, integration, or frontend E2E tests.
TypeScript Testing Rules (Frontend)
Prerequisite Detection
Inspect package.json, the lockfile, test configuration, and existing test imports before selecting a framework or command. Apply Vitest, React Testing Library, MSW, or Playwright rules only when the dependency/configuration is present. Use the repository's configured equivalent when different. If no runnable harness can be identified, report the inspected paths and the missing framework or command instead of inventing one.
References
Test Type
Reference
When to Use
Unit / Integration
This document
Implementing React component tests with RTL + Vitest + MSW
Implementing browser-level E2E tests with Playwright
Test Framework
Vitest: Use when the repository config or existing tests select Vitest
React Testing Library: For component testing
MSW (Mock Service Worker): For API mocking
Test imports: import { describe, it, expect, beforeEach, vi } from 'vitest'
Component test imports: import { render, screen } from '@testing-library/react'
User interaction: import userEvent from '@testing-library/user-event'
Mock creation: Use vi.mock()
Basic Testing Policy
Quality Requirements
Regression protection: assert the named acceptance result, public branch, or failure state on critical paths and high-reuse components
Independence: Each test can run independently without depending on other tests
Reproducibility: Control time, randomness, environment values, network responses, and browser state so identical inputs produce the same observable result
Readability: Each test names one user-visible behavior, separates setup/action/assertion, and keeps fixtures limited to values used by that behavior
Where to concentrate test rigor
For shared components, custom hooks, and utilities reused across features, cover their public branches, error states, and boundary contracts because their regression blast radius is wider. Verify page-level composition through integration/E2E tests when the behavior depends on multiple rendered units.
Test Types and Scope
Unit Tests (React Testing Library)
Verify behavior of individual components or functions
Mock all external dependencies
Focus on user-observable behavior
Integration Tests (React Testing Library + MSW)
Verify coordination between multiple components
Mock APIs with MSW (Mock Service Worker)
No actual DB connections (backend manages DB)
Verify flows that implement a primary acceptance criterion or coordinate multiple rendered components
Cross-functional Verification
When a new feature reaches a shared integration point, continuity of the existing feature becomes a proof obligation if its failure would break a primary user journey or contract, or degrade a secondary observable behavior. Prove it at the cheapest boundary that can expose its failure
Verification pattern: Existing feature operation -> Enable new feature -> Verify continuity of existing features
Success criteria: Preserve the displayed content and interaction behavior named by the source acceptance criteria; apply a rendering-time threshold only when project configuration or a requirement defines its value and measurement method
Designed for automatic execution in CI/CD pipelines
Test Implementation Conventions
Directory Structure and Naming
Co-locate a component's test in the component's own directory, so implementation and test move together
Test files: {ComponentName}.test.tsx
Integration test files: {FeatureName}.integration.test.tsx
Test suites: Names describing target components or features
Test cases: Names describing expected behavior from user perspective
Test Code Quality Rules
Keep every committed test active. Repair a test that protects current behavior. Remove a test when its behavior is no longer required and the source requirement or implementation contract confirms the removal, or when another retained test fails for every regression the removed test detects.
Mock Type Safety Enforcement
Constrain an MSW handler's response body with satisfies against the domain type it stands for, so a fixture that drifts from the contract fails at compile time rather than producing a passing test against a shape the app never receives.
Type a component or dependency mock to the surface the subject under test actually consumes — Pick<Props, 'usedProp'>, Pick<Router, 'push'> — rather than the full interface, and constrain the literal with satisfies so an extra or misnamed member fails at compile time.
Test Design Patterns
Test user-visible results, not implementation details. Query by the role and accessible name the user perceives (getByRole/getByLabelText/getByText), not getByTestId or container.querySelector. Drive interactions through userEvent with userEvent.setup() per test rather than firing raw events, so the test reproduces the browser's event sequence. await every interaction and async assertion — an unawaited interaction asserts against the pre-update render, so use findBy* for async UI.
Cover the empty, error, and loading/async states that the component renders or the accepted behavior defines, not only the happy path. Produce an error state by overriding the MSW handler for that single test rather than changing the shared handler set.
When the required UI state, accessibility name, or external contract is unknown, stop test design for that assertion and name the UI Spec, acceptance criterion, implementation contract, or user decision needed. Continue with independent assertions whose expected behavior is observed.
