Testing Blueprints

The template ships with full Vitest suites under __tests__/. They currently reference the @/ module alias from a Next.js project. Replace those imports with your actual modules as you build the app. Use this guide to adapt the patterns.

API routes

File: __tests__/api/*
Focus: HTTP status codes, query parsing, pagination, error handling.
Mocks: database adapters, third-party SDKs, feature flags.
Tips: assert on both response body and the parameters passed into mocked dependencies.

Components

File: __tests__/components/*
Focus: accessibility, copy, conditional rendering, navigation flows.
Mocks: Next.js router, contexts, external hooks.
Tips: render minimal UI tree, interact with @testing-library/react utilities, assert on semantics not implementation.

Hooks

File: __tests__/hooks/*
Focus: lifecycle, browser APIs (scroll, resize), async behaviour.
Mocks: window, document, timers, intersection observers.
Tips: wrap act around updates, reset mocks between tests, include teardown coverage.

Flags & configuration

File: __tests__/flags/*
Focus: toggling features on/off, server-side overrides, fallbacks.
Mocks: flag evaluation client, configuration store.
Tips: include “flag service offline” scenarios to enforce safe defaults.

Libraries

File: __tests__/lib/*
Focus: data migration guards, validation, persistence abstractions.
Mocks: filesystem, database clients, clock.
Tips: write table-driven tests so new edge cases are easy to add.

Making them yours

Rename folders to match real domains (users, billing, cms).
Swap module imports from @/lib/... to wherever your implementation lives.
Keep the error-handling tests, even if you simplify the happy path—they are cheap insurance.
Run pnpm test (or your equivalent) often; treat failures as documentation gaps.

These suites double as onboarding material. New contributors can read the tests to understand intent before diving into production code.

2.0 KiB Raw Permalink Blame History