Which testing frameworks are required for this skill?

This skill is optimized for projects using Vitest and @testing-library/react.

Where does this skill save the generated test files?

Test files are saved in a dedicated `__tests__` directory located as a sibling to the `/src` folder, using the `.spec.tsx` naming convention.

Does this skill support integration testing?

No, this skill is specifically designed for unit testing. It mocks all sub-components to test the logic and prop passing of a single component in isolation.

Can I use this to update tests I've already written?

Yes, the skill can analyze existing test files and compare them to the current component implementation to add missing coverage or update outdated test cases.

React Component Test Manager

Name: React Component Test Manager
Author: talbenmoshe

bytalbenmoshe

•

Security & Testing

Automates the creation and updating of Vitest test files for React components with a focus on logic, isolation, and prop validation.

About

The React Component Test Manager skill streamlines the frontend testing workflow by generating standardized Vitest test suites that utilize React Testing Library. It enforces a 'logic-first' testing philosophy where all sub-components are automatically mocked to ensure true unit isolation. Whether you are building a new component or updating an existing one, this skill handles the complex boilerplate of creating render helpers, mocking modules, and setting up prop-based test cases, ensuring your test suite remains consistent, maintainable, and aligned with best practices.

Key Features

Standardized patterns for testing callbacks, conditional rendering, and list iterations
Smart updates to existing test files when component logic or props change
4 GitHub stars
Generation of specialized render helper functions with default and custom prop support
Strict adherence to optimized directory structures with tests as siblings to source code
Automatic mocking of all sub-component imports for isolated unit testing

Use Cases

Rapidly generating a new test suite for a complex React component from scratch
Improving test coverage for legacy components by generating isolated logic and prop-validation tests
Updating existing tests after refactoring component props or changing sub-component dependencies

About

Key Features

Standardized patterns for testing callbacks, conditional rendering, and list iterations
Smart updates to existing test files when component logic or props change
4 GitHub stars
Generation of specialized render helper functions with default and custom prop support
Strict adherence to optimized directory structures with tests as siblings to source code
Automatic mocking of all sub-component imports for isolated unit testing

Use Cases

Rapidly generating a new test suite for a complex React component from scratch
Improving test coverage for legacy components by generating isolated logic and prop-validation tests
Updating existing tests after refactoring component props or changing sub-component dependencies