Use when writing or fixing tests in apps/frontend. Covers Jest and React Testing Library conventions, targeted test runs, the coverage mandate, Zustand mocking, and common pitfalls.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Use when writing or fixing tests in apps/frontend. Covers Jest and React Testing Library conventions, targeted test runs, the coverage mandate, Zustand mocking, and common pitfalls.
Frontend Testing — Yosemite Crew
Description
Use this skill when writing or fixing tests in apps/frontend. Covers Jest + React Testing Library conventions, targeting rules, and common pitfalls in this codebase.
TRIGGER: any task involving test files in apps/frontend, or when asked to write/fix/run frontend tests.
Coverage Mandate — Non-Negotiable
Target: ≥ 95% Statements, Branches, Functions, Lines across apps/frontend. Every change must move coverage upward, never downward.
Rules that apply to every task — add, modify, remove
Any file you touch must finish with equal or higher coverage than you found it. Run the targeted test and confirm before handoff.
Any file you create must hit ≥ 90% Statements, Branches, Functions on first commit. New code with no tests is a blocker — do not declare the task done.
When you delete code, delete the corresponding test code too. Dead test scaffolding that no longer maps to real behaviour inflates noise and hides real gaps.
When you modify behaviour (rename, refactor, add a branch, change a conditional), update every existing test that covers the changed path AND add new cases for new branches.
Snapshot tests count but do not substitute for behavioural assertions. A snapshot alone does not satisfy coverage for a branch. Every logical branch needs at least one assertion that validates the outcome.
Test types required — use all of them, not just one
Layer
Tool
When required
Unit
Jest
Every service, store, hook, utility, helper
Component
React Testing Library (RTL)
Every UI component — render + interaction + conditional rendering
Snapshot
Jest toMatchSnapshot / toMatchInlineSnapshot
Stable UI layouts — complement behavioural tests, never replace them
E2E
Playwright (e2e/)
Auth flows, booking, checkout, payment, any critical user journey
All four layers must grow together. Do not add 20 RTL tests while leaving Playwright untouched for a critical flow, and vice versa.
Coverage enforcement workflow
# After every change, run coverage for the touched file(s):
pnpm --filter frontend run test -- --testPathPattern="<YourFile>" --coverage --collectCoverageFrom="src/app/path/to/YourFile.tsx"# Check the output — if Statements/Branches/Functions dropped vs what you started with, add tests before declaring done.
If adding a test for a previously-uncovered branch, note it in the COMMIT CHECKPOINT message (e.g. test(frontend): improve branch coverage for CompanionHistoryPage loading state).
New Code = New Tests (Mandatory)
Every new module, service, hook, store, utility, or component added to apps/frontend must ship with tests in the same batch. No exceptions.
What you add
What you must also add
Service function / API call
Jest unit: success + all error branches (axios + non-axios)
Zustand store
Jest: every action, selector, guard, and edge case
Custom hook
renderHook covering all return values and state branches
Coverage bar for any new file you author: Statements ≥ 90%, Branches ≥ 90%, Functions ≥ 90%.
Do not leave an existing file in a worse coverage state than you found it. If you touch a file, hold or improve its coverage.
Mandatory Checks — Run in This Order After Every Change
Run all three every time you touch apps/frontend. Never skip any step.
# 1. Type check — run from apps/frontend/
npx tsc --noemit
# 2. Lint — run from repo root
pnpm --filter frontend run lint
# 3. Prefer targeted tests for the files you modified; full Jest runs are allowed if the user explicitly asks or if you are validating shared test infrastructure
pnpm --filter frontend run test -- --testPathPattern="<ModifiedComponentName>"# Examples
pnpm --filter frontend run test -- --testPathPattern="CompanionCard"
pnpm --filter frontend run test -- --testPathPattern="Availability"
pnpm --filter frontend run test -- --testPathPattern="__tests__/features/billing"
Full suite is discouraged by default. Use targeted runs for normal development, but a full Jest run is allowed if the user explicitly asks, if you are triaging repo-wide breakage, or if you changed shared test infrastructure. Playwright and accessibility runs are allowed whenever they are relevant.
When modifying an existing file, always check whether a test file already exists for it (look in src/app/__tests__/ mirroring the source path). If it does, run it and fix any failures your change introduced before declaring the task done. A change is not complete if it breaks existing tests.
Stack
Jest 29 + React Testing Library (@testing-library/react, @testing-library/user-event)
Playwright for E2E (separate from unit/integration tests)
Test files: src/app/__tests__/
Jest config: apps/frontend/jest.config.ts
Mocks: src/app/jest.mocks/
Rules
DOM Nesting
jest.spyOn(console, 'error') checks are active — DOM nesting warnings are treated as test failures.
When a hook calls useXxxStore.getState() directly (e.g. to read status without subscribing), jest.mock alone produces a plain function with no getState method and the test will throw TypeError: useXxxStore.getState is not a function.
Two patterns depending on how the store is mocked:
jest.mock('@/app/stores/xxxStore') (auto-mock) — attach getState in beforeEach:
If you use jest.resetAllMocks() in beforeEach, any mock initialized with .mockReturnValue() in a jest.mock() factory is reset to undefined. Re-initialize all mock return values inside beforeEach after resetAllMocks():
beforeEach(() => {
jest.resetAllMocks();
// Must re-set these — factory defaults are gone after resetAllMocks
(canTransitionAppointmentStatus as jest.Mock).mockReturnValue(true);
(useAuthStore.getStateas jest.Mock).mockReturnValue({ user: mockUser, attributes: {} });
});
axios.isAxiosError mock — use jest.mock("axios", ...) not jest.spyOn
jest.spyOn on axios.isAxiosError doesn't reliably work because the service imports axios at module load time. Use:
Module-level singletons break cross-test isolation with jest.resetModules()
Services that maintain module-level singletons (e.g. connectionPromise, chatClient) can't easily test "connection in progress" state when jest.resetModules() resets the module between each test. Drop those test scenarios or use a single beforeAll import for that specific describe block.
performAppointmentAction requires a valid lead.id for accept action
When testing acceptAppointment or changeAppointmentStatus → UPCOMING, the appointment must have a non-empty lead.id or the service throws "Cannot accept appointment without a valid lead." Always include lead: { id: 'vet-1', name: 'Dr Vet' } in those test fixtures.
canTransitionAppointmentStatus from @/app/lib/appointments
This function is imported by appointmentService.ts from @/app/lib/appointments (not from a utils sub-path). Mock it as:
