skills.rest
masakinihirota
masakinihirotaCOMMUNITY
Explore all skills by this author →
𝕏@masakinihirotaGitHub

test-workflow

Guides TDD cycles, test strategy, and scenario generation for Vitest and React Testing Library.

Updated Jul 21, 2026
Search Tags:#vitest#tdd#test automation#red-green-refactor#nextjs#react testing library#accessibility testing
One-click install
npx skills add https://github.com/masakinihirota/2026src-ni --skill test-workflow-masakinihirota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: test-workflow
Source: https://github.com/masakinihirota/2026src-ni/tree/main/.agents/skills/test-workflow
Command: npx skills add https://github.com/masakinihirota/2026src-ni --skill test-workflow-masakinihirota

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It enforces a consistent test-driven development workflow so new features and bug fixes always start with failing tests, follow a Red-Green-Refactor cycle, and use standardized test file naming across a Next.js and Vitest codebase. ## Core Features & Use Cases - TDD Workflow Enforcement: Mandates a two-step process where test case outlines (describe/it.todo) are fixed before implementing the actual test bodies, preventing ad-hoc test writing. - Test Strategy Guidelines: Separates lightweight view/smoke tests (.view.test.tsx) from full logic tests (.spec.tsx), plus logic unit tests and integration tests with msw. - Scenario Generation Checklist: Provides a structured checklist covering happy paths, error handling, boundary values, state transitions, and accessibility (vitest-axe). - Use Case: When asked to add a new form component, the skill first produces a describe/it.todo outline, then implements the tests, then drives the minimal implementation until all tests pass. ## Quick Start Ask the AI to implement a new feature or fix a bug using TDD with the test-case outline first, then the test implementation, following the Red-Green-Refactor cycle.

Frequently Asked Questions about test-workflow

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

FAQPage Schema
How do I write TDD tests with Vitest and React Testing Library?▼

Start by writing a failing test that describes the expected behavior, then implement the minimum code to pass it, and finally refactor while keeping tests green. Use userEvent for interactions and screen queries for user-visible output rather than internal state.

What is the difference between view tests and spec tests in Vitest?▼

View tests (*.view.test.tsx) are lightweight smoke tests checking rendering and prop-based display only. Spec tests (*.spec.tsx) cover full logic including userEvent interactions, validation, mocked API calls, and edge cases.

How do I test accessibility in React components with Vitest?▼

Use vitest-axe and include expect(container).toHaveNoViolations() in your UI component tests. This checks rendered output against accessibility rules automatically as part of the standard test suite.

When should I use msw for integration testing?▼

Use msw (Mock Service Worker) in integration tests (*.logic.integration.test.ts) when verifying data flows that involve API communication or database connections. It intercepts network requests so you can test realistic flows without a live backend.

What edge cases should I cover when generating test scenarios?▼

Cover five categories: happy path success cases, error handling like validation and network failures, boundary values such as zero, negatives, and empty lists, state transitions like loading and empty states, and accessibility including keyboard navigation.

Related Skills

Explore More Software Engineering Skills→
jtvarisjtvaris

tdd-feature

Implement new software features using a RED-GREEN-REFACTOR test-first workflow.

Community
Intermediate
Coverage-CreativesCoverage-Creatives

Pre-Commit Hooks

Automate code quality checks with Git hooks, lint-staged, Husky, and Commitlint.

Official
Advanced
sgcarstrendssgcarstrends
21

code-review

Automate detection of security vulnerabilities, performance issues, and code quality defects in code reviews.

Official
Advanced
spallempatispallempati

bdd-acceptance-tests

Enforce Given/When/Then acceptance tests in release candidate CI pipelines.

Community
Advanced