// vitest.config.ts - Environment separation
export default defineConfig({
  test: {
    projects: [
      {
        name: 'client',
        environment: 'jsdom',      // React components, UI logic
        include: ['src/**/*.test.{ts,tsx}'],
        exclude: ['src/services/**/*.test.{ts,tsx}'],
      },
      {
        name: 'server',
        environment: 'node',       // Services, business logic
        include: ['src/services/**/*.test.{ts,tsx}'],
      },
    ],
  },
})

src/
├── __tests__/                    # 🔧 General - Test setup & utilities
│   └── setup-test.ts
├── lib/
│   └── __tests__/               # 🧪 Unit - Pure functions
│       └── crypto.test.ts
├── app/
│   └── __tests__/               # 🎨 UI Components
│       ├── home.test.tsx
│       └── theme.test.tsx
├── db/
│   └── repositories/__tests__/  # 🗄️ Repository Layer
│       └── user-repository.test.ts
├── services/
│   ├── __tests__/               # ⚙️ Service Layer
│   │   ├── user-service.test.ts
│   │   └── organization-service.test.ts
│   └── authorization/__tests__/  # 🔐 Authorization
│       └── casl-authorization-service.test.ts
└── e2e/                         # 🌐 End-to-End
    ├── auth.spec.ts
    ├── homepage.spec.ts
    └── mobile.spec.ts

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
  webServer: {
    command: 'pnpm dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
})

# .env.test - Test environment variables
DATABASE_URL="postgresql://localhost:5432/test_db"
BETTER_AUTH_SECRET="test-secret-key"
BETTER_AUTH_URL="http://localhost:3000"
RESEND_API_KEY="re_test_key"
STRIPE_SECRET_KEY="sk_test_..."

// src/__tests__/setup-test.ts - Client setup
import { beforeAll, afterEach } from 'vitest'
import { cleanup } from '@testing-library/react'
import '@testing-library/jest-dom'

beforeAll(() => {
  // Mock window objects, localStorage, etc.
})

afterEach(() => {
  cleanup()
})

// src/services/__tests__/setup-mocks.ts - Server setup
import { vi } from 'vitest'

vi.mock('@/services/authentication/auth-service', () => ({
  getAuthUser: vi.fn(),
}))

// src/lib/__tests__/utils.test.ts
import { describe, it, expect } from 'vitest'
import { formatPrice, validateEmail } from '../utils'

describe('Utility Functions', () => {
  describe('formatPrice', () => {
    it('should format price correctly', () => {
      expect(formatPrice(1999)).toBe('$19.99')
      expect(formatPrice(0)).toBe('$0.00')
    })
  })

  describe('validateEmail', () => {
    it('should validate email format', () => {
      expect(validateEmail('test@example.com')).toBe(true)
      expect(validateEmail('invalid-email')).toBe(false)
    })
  })
})

// src/components/__tests__/Button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react'
import { describe, it, expect, vi } from 'vitest'
import { Button } from '../Button'

describe('Button Component', () => {
  it('should render button text', () => {
    render(<Button>Click me</Button>)
    expect(screen.getByRole('button')).toHaveTextContent('Click me')
  })

  it('should handle click events', () => {
    const handleClick = vi.fn()
    render(<Button onClick={handleClick}>Click me</Button>)

    fireEvent.click(screen.getByRole('button'))
    expect(handleClick).toHaveBeenCalledTimes(1)
  })
})

// e2e/basic-flow.spec.ts
import { test, expect } from '@playwright/test'

test('should navigate to login page', async ({ page }) => {
  await page.goto('/en')
  await page.click('a[href="/login"]')
  await expect(page).toHaveURL(/\/login/)
  await expect(page.locator('form')).toBeVisible()
})

// Test data factory
const createTestUser = (overrides = {}) => ({
  id: crypto.randomUUID(),
  name: 'Test User',
  email: 'test@example.com',
  role: 'user' as const,
  emailVerified: true,
  createdAt: new Date(),
  ...overrides,
})

// Mock setup pattern
beforeEach(() => {
  vi.clearAllMocks()
  vi.mocked(getUserByIdDao).mockResolvedValue(createTestUser())
})

// Good assertions
expect(result).toMatchObject({
  id: expect.stringMatching(/^[0-9a-f-]{36}$/),
  email: 'test@example.com',
})

expect(result).toEqual(expect.objectContaining({
  name: 'Test User',
  role: 'user',
}))

// Error testing
await expect(service.getUserById('invalid')).rejects.toThrow('User not found')

// Wait for async operations
await waitFor(() => {
  expect(screen.getByText('Loading...')).not.toBeInTheDocument()
})

// Test async service calls
it('should handle async user creation', async () => {
  const result = await createUserService(userData)
  expect(result.id).toBeDefined()
})

# Production testing pipeline
pnpm test --run --coverage    # Single run with coverage
pnpm test:e2e --reporter=json # E2E with JSON output
pnpm test --reporter=junit    # JUnit XML for CI

# Database testing
pnpm db:reset-seed            # Reset test database
pnpm db:migrate              # Run pending migrations
pnpm test src/db/__tests__   # Test database layer

# Debug failing tests
DEBUG_TESTS=true pnpm test
pnpm test --reporter=verbose

# Visual debugging
pnpm test:e2e --debug        # Playwright debugger
pnpm test:e2e --headed       # See browser actions

# Performance analysis
pnpm test --reporter=html    # Detailed HTML report
pnpm test --coverage --reporter=lcov