Skip to main content

Testing Guide

Drop Testing Guide

Last updated: 2026-02-13 Source: src/drop-app/vitest.config.ts, playwright.config.ts, package.json, tests/

Test Frameworks

Framework Version Type Config
Vitest ^4.0.18 Unit, Integration, Performance, Regression vitest.config.ts
Playwright ^1.58.2 E2E (browser) playwright.config.ts

Running Tests

Unit + Integration Tests (Vitest)

# Single run (CI mode)
npm test

# Watch mode (development)
npm run test:watch

# Run specific test file
npx vitest run tests/unit/auth.test.ts

# Run with coverage
npx vitest run --coverage

Configuration (vitest.config.ts:4-14):

  • Environment: node
  • Test pattern: tests/**/*.test.ts
  • Setup file: tests/setup.ts (sets NODE_ENV=test)
  • Path alias: @ -> ./src

E2E Tests (Playwright)

# Run all E2E tests
npx playwright test

# Run specific project
npx playwright test --project=user-flows
npx playwright test --project=full-flows
npx playwright test --project=input-chaos

# Run with UI mode
npx playwright test --ui

# View HTML report
npx playwright show-report

Configuration (playwright.config.ts:3-38):

  • Serial execution (1 worker) to avoid rate limit conflicts
  • Auto-starts dev server (npm run dev) if not running
  • HTML reporter
  • Trace on first retry (CI mode: 2 retries)

Test Architecture

Setup

File: tests/setup.ts:1

Sets NODE_ENV=test for all Vitest tests.

Mocking Strategy

All unit/integration tests mock the following Next.js modules:

  • next/server -- NextResponse.json() returns plain objects
  • next/headers -- cookies() returns mock getters/setters
  • @/lib/db -- Uses in-memory SQLite (better-sqlite3 with :memory:) for isolation

Each test file creates and destroys its own database in beforeEach/afterEach.

E2E Test Helpers

File: tests/e2e/input-chaos.spec.ts:21-42

loginAsDemo(page) -- Mocks the /api/auth/me endpoint to bypass rate limiting in chaos tests. Returns a pre-authenticated user object.

CHAOS_STRINGS -- Dictionary of malicious/edge-case inputs used across E2E tests:

  • Empty, spaces, XSS, SQL injection, HTML injection
  • Unicode, RTL override, null bytes
  • Very long strings (10K chars)
  • Norwegian (aeoa), Bosnian (sdccz), Japanese characters
  • Zalgo text, special characters

Writing Tests

Unit Test Pattern

import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import Database from "better-sqlite3";

let testDb: Database.Database;

// Mock dependencies before import
vi.mock("@/lib/db", () => ({
  getDb: vi.fn(() => testDb),
  // ... other db functions
}));

describe("Feature", () => {
  beforeEach(() => {
    testDb = new Database(":memory:");
    // Create schema...
  });

  afterEach(() => {
    testDb.close();
  });

  it("does something", () => {
    // Arrange, Act, Assert
  });
});

E2E Test Pattern

import { test, expect } from "@playwright/test";

test.describe.configure({ mode: "serial" }); // Avoid rate limits

test.describe("Feature", () => {
  test("user flow", async ({ page }) => {
    await page.goto("http://localhost:3000/login");
    await page.locator('input[type="email"]').fill("[email protected]");
    await page.locator('input[type="password"]').fill("demo1234");
    await page.locator('button[type="submit"]').click();
    await page.waitForURL("**/dashboard", { timeout: 15000 });
  });
});

Test Results

Current status (2026-02-13):

Vitest

Test Files  6 passed (6)
Tests       40 passed (40)
Duration    1.40s

Playwright

  • 3 test projects configured: user-flows, full-flows, input-chaos
  • input-chaos depends on user-flows

Test Coverage Areas

Area Unit Integration E2E Performance
Password hashing (bcrypt) auth.test.ts api-routes.test.ts -- api-benchmarks.test.ts
JWT sign/verify auth.test.ts -- -- --
Rate limiting middleware.test.ts api-routes.test.ts user-flows.spec.ts api-benchmarks.test.ts
Input validation validation.test.ts -- input-chaos.spec.ts --
Database schema db.test.ts api-endpoints.test.ts -- --
Feature flags feature-flags.test.ts -- -- --
Utility functions utils.test.ts -- -- --
Registration flow -- api-endpoints.test.ts user-flows.spec.ts --
Login flow -- api-endpoints.test.ts user-flows.spec.ts --
Remittance -- api-endpoints.test.ts full-flows.spec.ts --
QR Payment -- api-endpoints.test.ts full-flows.spec.ts --
XSS/SQLi prevention validation.test.ts -- input-chaos.spec.ts --
Session management -- api-routes.test.ts full-flows.spec.ts --
Known bug regressions -- known-bugs.test.ts -- --
Back to top