# Testing Guide

This project uses **Vitest** with **React Testing Library** for comprehensive unit testing.



This project uses **Vitest** with **React Testing Library** for comprehensive unit testing.

## Testing Stack [#testing-stack]

* **[Vitest](https://vitest.dev/)** - Fast unit testing framework
* **[React Testing Library](https://testing-library.com/)** - Component testing
* **[jsdom](https://github.com/jsdom/jsdom)** - DOM implementation for Node.js
* **[@vitest/coverage-v8](https://vitest.dev/guide/coverage)** - Code coverage

## Running Tests [#running-tests]

```bash
bun run test             # Watch mode
bun run test:run         # Run once
bun run test:watch       # Watch mode
bun run test:coverage    # Coverage report
```

## Test Configuration [#test-configuration]

### Vitest Config (`vitest.config.ts`) [#vitest-config-vitestconfigts]

* **Environment**: jsdom
* **Setup Files**: Global mocks and utilities in `src/__tests__/setup.ts`
* **Coverage**: v8 provider
* **Path Aliases**: Same as production (`@/` → `src/`)

### Global Setup (`src/__tests__/setup.ts`) [#global-setup-src__tests__setupts]

Automatically mocks:

* **Next.js Router** - Navigation hooks
* **Next.js Image** - Renders as `<img>`
* **Framer Motion** - Renders as plain elements
* **Browser APIs** - IntersectionObserver, ResizeObserver, matchMedia
* **fetch** - Global mock
* **localStorage** - In-memory mock

### Custom Render (`src/__tests__/utils.tsx`) [#custom-render-src__tests__utilstsx]

Wraps components in `ThemeProvider`:

```typescript
import { render } from "@/__tests__/utils";
render(<MyComponent />); // Wrapped in ThemeProvider
```

## Test Structure [#test-structure]

```text
src/__tests__/
├── setup.ts           # Global mocks
├── utils.tsx          # Custom render
├── lib/               # Utility tests
├── hooks/             # Hook tests
├── components/        # Component tests
└── app/api/og/        # OG API tests
```

## Coverage Goals [#coverage-goals]

* **Statements**: > 80%
* **Branches**: > 80%
* **Functions**: > 80%
* **Lines**: > 80%

Current coverage: 93% statements, 81% branches, 98% functions, 96% lines.

## Common Patterns [#common-patterns]

### Component Test [#component-test]

```typescript
import { render, screen } from "@/__tests__/utils";
import MyComponent from "@/components/MyComponent";

it("renders", () => {
  render(<MyComponent />);
  expect(screen.getByText("Hello")).toBeDefined();
});
```

### Hook Test [#hook-test]

```typescript
import { renderHook, waitFor } from "@testing-library/react";
import { useMyHook } from "@/hooks/use-my-hook";

it("fetches data", async () => {
  vi.mocked(global.fetch).mockResolvedValueOnce({
    ok: true,
    json: () => Promise.resolve({ data: [] }),
  } as Response);
  const { result } = renderHook(() => useMyHook());
  await waitFor(() => expect(result.current.loading).toBe(false));
});
```

## Resources [#resources]

* [Vitest Documentation](https://vitest.dev/)
* [Testing Library Docs](https://testing-library.com/)
* [Jest DOM Matchers](https://github.com/testing-library/jest-dom)