Writing Tests

Create tests following Pixel Studio's testing patterns with Vitest and Playwright.

Test Commands

bash

npm run test             # Vitest watch mode
npm run test:run         # Run once
npm run test:coverage    # With coverage report
npm run test:e2e         # Playwright E2E tests

Unit Tests with Vitest

Basic Test Structure

typescript

// app/utils/myUtil.test.ts
import { describe, it, expect, beforeEach, vi } from "vitest";
import { myFunction } from "./myUtil";

describe("myFunction", () => {
  beforeEach(() => {
    // Reset state before each test
  });

  it("should return expected value", () => {
    const result = myFunction("input");
    expect(result).toBe("expected");
  });

  it("should handle edge case", () => {
    expect(() => myFunction("")).toThrow("Invalid input");
  });
});

Testing Utilities

typescript

// Testing a utility function
import { describe, it, expect } from "vitest";
import { cn } from "./cn";

describe("cn utility", () => {
  it("merges class names", () => {
    expect(cn("foo", "bar")).toBe("foo bar");
  });

  it("handles conditional classes", () => {
    expect(cn("base", false && "hidden", true && "visible")).toBe(
      "base visible",
    );
  });

  it("handles undefined/null", () => {
    expect(cn("base", undefined, null)).toBe("base");
  });
});

Testing with Mocks

typescript

import { describe, it, expect, vi, beforeEach } from "vitest";

// Mock a module
vi.mock("~/services/prisma.server", () => ({
  prisma: {
    user: {
      findUnique: vi.fn(),
      create: vi.fn(),
    },
  },
}));

import { prisma } from "~/services/prisma.server";
import { getUser } from "./getUser.server";

describe("getUser", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("returns user when found", async () => {
    const mockUser = { id: "1", name: "Test" };
    vi.mocked(prisma.user.findUnique).mockResolvedValue(mockUser);

    const result = await getUser("1");

    expect(result).toEqual(mockUser);
    expect(prisma.user.findUnique).toHaveBeenCalledWith({
      where: { id: "1" },
    });
  });

  it("returns null when not found", async () => {
    vi.mocked(prisma.user.findUnique).mockResolvedValue(null);

    const result = await getUser("invalid");

    expect(result).toBeNull();
  });
});

Testing Async Functions

typescript

import { describe, it, expect } from "vitest";

describe("async operations", () => {
  it("resolves with data", async () => {
    const result = await fetchData();
    expect(result).toHaveProperty("data");
  });

  it("rejects with error", async () => {
    await expect(fetchInvalid()).rejects.toThrow("Not found");
  });
});

Snapshot Testing

typescript

import { describe, it, expect } from "vitest";

describe("formatOutput", () => {
  it("matches snapshot", () => {
    const output = formatComplexData(input);
    expect(output).toMatchSnapshot();
  });
});

E2E Tests with Playwright

Basic E2E Test

typescript

// tests/pages.spec.ts
import { test, expect } from "@playwright/test";

test.describe("Public pages", () => {
  test("home page loads", async ({ page }) => {
    await page.goto("/");
    await expect(page).toHaveTitle(/Pixel Studio/);
    await expect(page.locator("h1")).toBeVisible();
  });

  test("explore page shows images", async ({ page }) => {
    await page.goto("/explore");
    await expect(page.locator("[data-testid='image-grid']")).toBeVisible();
  });
});

Testing Authentication

typescript

test.describe("Protected pages", () => {
  test("redirects to login when not authenticated", async ({ page }) => {
    await page.goto("/generate");
    await expect(page).toHaveURL(/\/auth\/login/);
  });
});

test.describe("Authenticated user", () => {
  test.use({ storageState: "tests/.auth/user.json" });

  test("can access generate page", async ({ page }) => {
    await page.goto("/generate");
    await expect(page.locator("form")).toBeVisible();
  });
});

Testing Forms

typescript

test("creates new collection", async ({ page }) => {
  await page.goto("/collections/new");

  await page.fill("[name='title']", "My Collection");
  await page.fill("[name='description']", "Test description");
  await page.click("button[type='submit']");

  await expect(page).toHaveURL(/\/collections\//);
  await expect(page.locator("h1")).toContainText("My Collection");
});

Testing API Endpoints

typescript

test("API returns data", async ({ request }) => {
  const response = await request.get("/api/images");

  expect(response.ok()).toBeTruthy();

  const data = await response.json();
  expect(data).toHaveProperty("images");
  expect(Array.isArray(data.images)).toBe(true);
});

test("API requires authentication", async ({ request }) => {
  const response = await request.post("/api/collections", {
    data: { title: "Test" },
  });

  expect(response.status()).toBe(401);
});

Page Object Pattern

typescript

// tests/pages/CollectionPage.ts
import { Page, Locator } from "@playwright/test";

export class CollectionPage {
  readonly page: Page;
  readonly titleInput: Locator;
  readonly submitButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.titleInput = page.locator("[name='title']");
    this.submitButton = page.locator("button[type='submit']");
  }

  async goto() {
    await this.page.goto("/collections/new");
  }

  async create(title: string) {
    await this.titleInput.fill(title);
    await this.submitButton.click();
  }
}

// Usage in test
test("creates collection", async ({ page }) => {
  const collectionPage = new CollectionPage(page);
  await collectionPage.goto();
  await collectionPage.create("My Collection");
});

Test File Organization

code

tests/
├── pages.spec.ts        # E2E page tests
├── api.spec.ts          # E2E API tests
├── .auth/               # Auth state storage
└── pages/               # Page objects

app/
├── utils/
│   ├── myUtil.ts
│   └── myUtil.test.ts   # Co-located unit test
└── server/
    ├── getUser.server.ts
    └── getUser.test.ts  # Server function test

Common Assertions

typescript

// Vitest
expect(value).toBe(expected);           // Strict equality
expect(value).toEqual(expected);        // Deep equality
expect(value).toBeTruthy();
expect(value).toBeFalsy();
expect(value).toBeNull();
expect(value).toBeDefined();
expect(array).toContain(item);
expect(array).toHaveLength(3);
expect(object).toHaveProperty("key");
expect(fn).toHaveBeenCalled();
expect(fn).toHaveBeenCalledWith(arg);
expect(async fn).rejects.toThrow();

// Playwright
await expect(page).toHaveURL(/pattern/);
await expect(page).toHaveTitle(/title/);
await expect(locator).toBeVisible();
await expect(locator).toBeHidden();
await expect(locator).toBeEnabled();
await expect(locator).toBeDisabled();
await expect(locator).toContainText("text");
await expect(locator).toHaveAttribute("name", "value");
await expect(locator).toHaveCount(5);

Test Data Fixtures

typescript

// tests/fixtures/users.ts
export const testUser = {
  id: "test-user-1",
  email: "test@example.com",
  name: "Test User",
  credits: 100,
};

export const testImage = {
  id: "test-image-1",
  prompt: "A beautiful sunset",
  url: "https://example.com/image.png",
  model: "dall-e-3",
};

Checklist

• Test file follows naming convention (.test.ts or .spec.ts)
• Tests are organized in describe blocks
• Each test has clear assertion
• Mocks are cleared between tests
• Async operations properly awaited
• Tests are independent (no shared state)
• Edge cases covered
• Error cases tested