gen-test

Generate Vitest and React Testing Library test scaffolds with MSW and MSAL mocks.

1|Updated Feb 27, 2026
One-click install
npx skills add https://github.com/jrmatherly/apollos-portal --skill gen-test-jrmatherly
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gen-test
Source: https://github.com/jrmatherly/apollos-portal/tree/main/.claude/skills/gen-test
Command: npx skills add https://github.com/jrmatherly/apollos-portal --skill gen-test-jrmatherly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automate the creation of frontend tests to reduce boilerplate and ensure consistent coverage across components.

Core Features & Use Cases

  • Generate a Vitest + React Testing Library test file beside the target component.
  • Set up MSW handlers and an MSAL mock to simulate API interactions and authentication flows.
  • Wrap tests with a QueryClient and align with project conventions, including common render patterns and basic interaction checks.
  • Use case: when adding tests for a new component, generate a ready-to-run scaffold with placeholders for props and interactions.

Quick Start

Provide the target component path to generate its test scaffold.

Frequently Asked Questions about gen-test

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

FAQPage Schema
How do I generate a Vitest and React Testing Library test scaffold for a React component?

To generate a Vitest and React Testing Library test scaffold, provide the target component path. The tool reads the component to infer props and outputs a ready-to-run test file with rendering, loading, and interaction cases.

Can I automatically set up MSW handlers and MSAL mocks when creating frontend tests?

Yes, you can automatically set up MSW handlers and MSAL mocks when creating frontend tests. The scaffold simulates API interactions and authentication flows, wrapping tests with the necessary mock accounts and configurations.

Does this test generation approach align with project conventions like wrapping components with QueryClient?

Yes, the test generation aligns with project conventions by wrapping components with QueryClient. It applies common render patterns, routing where needed, and outputs lint-friendly code to ensure consistent coverage across components.

What is the best way to reduce boilerplate when adding React component tests?

The best way to reduce boilerplate when adding React component tests is automating scaffold creation. This generates a file next to the component with placeholders for props and basic interaction checks, ensuring consistent test coverage.

How does the tool infer props and hooks for a ready-to-run test file?

The tool infers props and hooks by reading the target component file directly. It uses this analysis to generate a ready-to-run test file, populating the scaffold with appropriate placeholders and interaction cases based on the component's structure.