vitest-test-setup-generator

Generate Vitest configurations and Firebase mocks for React and Next.js projects.

1|Updated Jan 21, 2026
One-click install
npx skills add https://github.com/dfrabik/dev-portfolio --skill vitest-test-setup-generator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vitest-test-setup-generator
Source: https://github.com/dfrabik/dev-portfolio/tree/main/.cursor/skills/vitest-test-setup-generator
Command: npx skills add https://github.com/dfrabik/dev-portfolio --skill vitest-test-setup-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps front-end and test engineers quickly generate comprehensive Vitest test configurations, including Firebase mocking, browser API mocks, and component testing patterns, reducing boilerplate and setup time.

Core Features & Use Cases

  • Vitest configuration setup: Create a complete vitest.config.ts with React plugin, aliases, test environment, and coverage.
  • Firebase and browser mocks: Provide mock setups for Firebase services and browser APIs to support isolated tests.
  • Component testing scaffolding: Generate test utilities, setup files, and mock hooks for UI components in a Next.js + Firebase monorepo.
  • Use Case: When starting a new Firebase + Next.js app, run the generator to produce deterministic test scaffolding, then adapt to project structure.

Quick Start

Run the Vitest test setup generator to create and tailor your Vitest configurations for your app.

Frequently Asked Questions about vitest-test-setup-generator

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

FAQPage Schema
How do I set up Vitest with Firebase mocks for a React project?

To set up Vitest with Firebase mocks for React, you generate a complete vitest.config.ts with React plugin support and ready-to-use mock templates for Firebase services. This provides isolated component testing by automating setup script creation.

What is the best way to configure Vitest in a Next.js monorepo?

Configuring Vitest in a Next.js monorepo requires setting up test environments, path aliases, and coverage options. This generator produces tailored config files and scaffolding to support component testing patterns across the monorepo structure.

Can I generate browser API mocks alongside Firebase service mocks in Vitest?

Yes, you can generate browser API mocks alongside Firebase service mocks in Vitest. The generated setup scripts provide mock setups for both Firebase services and browser APIs to support isolated unit tests.

How do I start unit testing React components that use Firebase hooks?

Start unit testing React components using Firebase hooks by generating test utilities and mock hooks. The generator produces setup files and mock templates that allow immediate test execution without hitting live Firebase services.

Does this Vitest setup generator handle integration test scaffolding?

Yes, the Vitest setup generator handles integration test scaffolding. It produces ready-to-use configuration files, setup scripts, and mock templates that cover unit tests, rules, and integration scaffolding for Next.js and Firebase projects.