test-implement

$npx mdskill add shinpr/claude-code-workflows/test-implement

Implements test patterns for unit, integration, and E2E testing using RTL+Vitest+MSW and Playwright.

  • Helps developers create reliable tests for React components and browser-level scenarios.
  • Integrates with RTL, Vitest, MSW for component testing and Playwright for E2E testing.
  • Recommends patterns based on AAA structure, test independence, and clear naming conventions.
  • Delivers results through structured references and principles for consistent test implementation.

SKILL.md

.github/skills/test-implementView on GitHub ↗
---
name: test-implement
description: Test implementation patterns and conventions. Use when implementing unit tests, integration tests, or E2E tests, including RTL+Vitest+MSW component testing and Playwright E2E testing.
---

# Test Implementation Patterns

## Reference Selection

| Test Type | Reference | When to Use |
|-----------|-----------|-------------|
| **Unit / Integration** | [references/frontend.md](references/frontend.md) | Implementing React component tests with RTL + Vitest + MSW |
| **E2E** | [references/e2e.md](references/e2e.md) | Implementing browser-level E2E tests with Playwright |

## Common Principles

### AAA Structure
All tests follow **Arrange-Act-Assert**:
- **Arrange**: Set up preconditions and inputs
- **Act**: Execute the behavior under test
- **Assert**: Verify the expected outcome

### Test Independence
- Each test runs independently without depending on other tests
- No shared mutable state between tests
- Deterministic execution — no random or time dependencies without mocking

### Naming
- Test names describe expected behavior from user perspective
- One test verifies one behavior

More from shinpr/claude-code-workflows

SkillDescription
ai-development-guideTechnical decision criteria, anti-pattern detection, debugging techniques, and quality check workflow. Use when making technical decisions, detecting code smells, or performing quality assurance.
coding-principlesLanguage-agnostic coding principles for maintainability, readability, and quality. Use when implementing features, refactoring code, or reviewing code quality.
documentation-criteriaDocumentation creation criteria including PRD, ADR, Design Doc, and Work Plan requirements with templates. Use when creating or reviewing technical documents, or determining which documents are required.
frontend-ai-guideFrontend-specific technical decision criteria, anti-patterns, debugging techniques, and quality check workflow. Use when making frontend technical decisions or performing quality assurance.
implementation-approachImplementation strategy selection framework. Use when planning implementation strategy, selecting development approach, or defining verification criteria.
integration-e2e-testingIntegration and E2E test design principles, ROI calculation, test skeleton specification, and review criteria. Use when designing integration tests, E2E tests, or reviewing test quality.
recipe-add-integration-testsAdd integration/E2E tests to existing codebase using Design Docs
recipe-buildExecute decomposed tasks in autonomous execution mode
recipe-designExecute from requirement analysis to design document creation
recipe-diagnoseInvestigate problem, verify findings, and derive solutions