veta-testing

Run Vitest and React Testing Library tests for Veta flows with mocked Supabase boundaries.

1|Updated Nov 26, 2025
One-click install
npx skills add https://github.com/marcogonzalo/studio-manager --skill veta-testing
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: veta-testing
Source: https://github.com/marcogonzalo/studio-manager/tree/main/.agents/skills/veta-testing
Command: npx skills add https://github.com/marcogonzalo/studio-manager --skill veta-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Testing complex frontend and server flows without confidence leads to regressions, brittle changes, and low coverage that hides real bugs.

Core Features & Use Cases

  • What to test: Focus on business logic, utilities, data transformers (unit), and key flows such as adding budget items or creating projects (integration).
  • How to test: Use Vitest as the runner and React Testing Library for UI behavior, while avoiding testing framework internals or third-party library behavior.
  • Coverage and verification: Set a coverage goal of at least 85% for new code and review reports to identify untested branches.
  • Mocking strategy: Mock Supabase/auth and API-route boundary dependencies using existing helpers in src/test/mocks/supabase.ts (createMockUser, createMockSession, mockSupabase, mockSupabaseAuth).
  • Edge-case resilience: Include empty states, invalid inputs, and error paths (e.g., Supabase error returns), plus form validation success/failure scenarios.

Quick Start

Use the veta-testing skill to create a Vitest + React Testing Library test for a budget flow, mocking Supabase at the boundary and ensuring the new code meets the 85% coverage target.

Frequently Asked Questions about veta-testing

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

FAQPage Schema
How do I write reliable Vitest tests for full-stack Supabase flows?

Write reliable Vitest tests by mocking Supabase and auth boundaries using provided helpers like mockSupabase and createMockSession, while using React Testing Library to validate UI behavior and server route logic.

What is the recommended test coverage target for new code in a Vitest project?

The recommended test coverage target for new code is at least 85 percent. Reviewing coverage reports helps identify untested branches and ensures edge cases like empty states, invalid inputs, and Supabase error paths are verified for resilience.

How do I mock Supabase authentication boundaries in an integration test?

Mock Supabase authentication boundaries in an integration test by importing boundary-focused helpers from the test mocks file, such as createMockUser, createMockSession, and mockSupabaseAuth, to isolate and control auth responses during UI flow verification.

Does this Vitest setup work with React Testing Library for UI behavior testing?

Yes, this setup uses Vitest as the runner and React Testing Library for UI behavior testing. It targets key integration flows like adding budget items and creating projects, while explicitly avoiding testing framework internals or third-party library behavior.

What edge cases should I include when testing form validation and error paths?

When testing form validation and error paths, include edge cases such as empty states, invalid inputs, and Supabase error returns. Verifying both form validation success and failure scenarios ensures true resilience against regressions and brittle changes.

Why does my full-stack test coverage hide real bugs in frontend and server flows?

Full-stack test coverage hides real bugs when tests avoid error paths or fail to mock boundaries correctly. Applying Vitest with boundary-focused mocks for Supabase and auth ensures both UI flows and server route behavior are reliably verified against regressions.