component-tester

Identify modified React components and execute their Vitest test suites.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automatically identify modified React components and run their Vitest tests to ensure code quality and maintain sufficient coverage.

Core Features & Use Cases

  • Identify changed components and locate the relevant test files.
  • Run tests in non-watch mode and report pass/fail status plus coverage metrics.
  • Provide actionable feedback to fix failing tests and improve coverage thresholds.

Quick Start

Identify the changed component path and run its Vitest tests, e.g., pnpm test -- src/app/components/MyButton.tsx

Frequently Asked Questions about component-tester

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

FAQPage Schema
How do I run Vitest tests for a specific modified React component?

Running Vitest tests for a modified React component involves resolving the component path and executing its test suite in non-watch mode. You provide the specific file path, such as passing src/app/components/MyButton.tsx to the test runner, to verify changes.

How does Vitest verify statement, branch, and function coverage thresholds?

Vitest verifies statement, branch, function, and line coverage thresholds by executing the component test suite and evaluating the results against configured limits. It reports pass or fail status alongside these coverage metrics for your React components.

Can I automatically locate and run tests for changed React components?

Yes, you can automatically locate and run tests for changed React components. The process identifies the modified component path, finds the corresponding test files, and executes them in non-watch mode to ensure correctness and maintain coverage.

Does Vitest test execution require watch mode to report React component coverage?

Vitest test execution does not require watch mode to report React component coverage. It operates in non-watch mode to execute the test suite, providing concise result reporting for pass or fail status and coverage metrics without active file watching.

What is the best way to fix failing Vitest tests and improve coverage thresholds?

The best way to fix failing Vitest tests and improve coverage thresholds is to review the actionable feedback provided after execution. It identifies failing tests and missing coverage in statements, branches, functions, or lines to guide your corrections.