component-tester

Run Vitest tests for modified React components and report coverage.

21|2|Updated Nov 5, 2023
One-click install
npx skills add https://github.com/sgcarstrends/sgcarstrends --skill component-tester
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: component-tester
Source: https://github.com/sgcarstrends/sgcarstrends/tree/main/apps/web/.claude/skills/component-tester
Command: npx skills add https://github.com/sgcarstrends/sgcarstrends --skill component-tester

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solves? This Skill automates the tedious process of running Vitest tests for React components, ensuring code quality and maintaining test coverage without manual command execution, allowing developers to focus on building.

Core Features & Use Cases

  • Automated Test Execution: Automatically runs relevant Vitest tests when a component is created or modified, saving manual effort.
  • Coverage Reporting: Provides detailed test coverage percentages (statements, branches, functions, lines) and identifies gaps, ensuring high code quality.
  • Clear Feedback: Reports pass/fail status, error messages for failing tests, and coverage issues directly, streamlining debugging.
  • Use Case: After making changes to src/app/blog/_components/progress-bar.tsx, activate this Skill. It will automatically run pnpm test -- src/app/blog/_components/progress-bar, report if all tests pass, and show the coverage, ensuring your changes haven't introduced regressions or reduced quality.

Quick Start

Run Vitest tests for the 'UserAvatar' component located at 'src/components/user-avatar.tsx' and report coverage.

Frequently Asked Questions about component-tester

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

FAQPage Schema
How do I automatically run tests for React components I've modified?

Activate this Skill after modifying a React component to automatically execute Vitest tests for that specific component path. It runs tests without watch mode, validates coverage thresholds across statements, branches, functions, and lines, then reports pass/fail status and coverage percentages directly.

Can I check test coverage for individual components with Vitest?

Yes. This Skill runs Vitest tests scoped to a single component path and provides detailed coverage reporting showing statement, branch, function, and line coverage percentages, identifying gaps to maintain code quality standards.

What's the best way to ensure code quality before submitting pull requests?

Run component-specific Vitest tests automatically before pull requests using this Skill. It executes tests, validates coverage thresholds, and reports failing tests with error messages, preventing regressions and quality drops in your changes.

Do I need to manually run test commands for each React component I change?

No. This Skill automates running pnpm test for modified React components, eliminating manual command execution and allowing you to focus on building while maintaining automated quality checks and coverage validation.

How do I identify which tests are failing after modifying a component?

This Skill executes component-path-specific Vitest tests and reports clear feedback including pass/fail status and error messages for any failing tests, streamlining debugging and immediate issue identification.

What happens if test coverage drops below required thresholds?

This Skill validates coverage against thresholds for statements, branches, functions, and lines, reporting coverage percentages and identifying gaps when they fall below requirements, helping you maintain code quality standards.