Next.js 16 Tests Passed in CI but Failed in Production — The Runtime Env Gap

// ============================================
// Vitest Configuration for Next.js 16
// ============================================

import { defineConfig } from 'vitest/config'
import path from 'path'

// ---- Vitest config with Next.js aliases ----

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./vitest.setup.ts'],
    include: ['**/*.test.{ts,tsx}'],
    // Run component tests with jsdom
    pool: 'forks',
    poolOptions: {
      forks: {
        singleFork: true,
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './'),
      '@/lib': path.resolve(__dirname, './lib'),
      '@/app': path.resolve(__dirname, './app'),
      '@/components': path.resolve(__dirname, './components'),
    },
  },
})

// ---- vitest.setup.ts ----

import '@testing-library/jest-dom'
import { vi } from 'vitest'

// Mock global fetch for all tests
vi.stubGlobal('fetch', vi.fn())

// Mock IntersectionObserver (not available in jsdom)
vi.stubGlobal(
  'IntersectionObserver',
  vi.fn(() => ({
    observe: vi.fn(),
    unobserve: vi.fn(),
    disconnect: vi.fn(),
  }))
)

// ============================================
// Playwright Configuration for Next.js 16
// ============================================

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 ? 4 : undefined,
  reporter: 'html',

  use: {
    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],

  webServer: {
    command:
      process.env.CI
        ? 'next start --port 3000' // Production build
        : 'next dev --port 3000', // Dev server
    port: 3000,
    reuseExistingServer: !process.env.CI,
    timeout: 120_000,
  },
})

// ---- E2E test: Validate checkout page ----

// File: e2e/checkout.spec.ts
import { test, expect } from '@playwright/test'

test('checkout page loads and submits an order', async ({
  page,
}) => {
  await page.goto('/products/test-product')

  // Wait for the product to load (tests real data fetching)
  await expect(page.locator('h1')).toBeVisible()

  // Click buy button
  await page.click('button:has-text("Buy Now")')

  // Navigate to checkout
  await page.waitForURL('/checkout')

  // Fill in checkout form
  await page.fill('input[name="email"]', 'test@example.com')
  await page.fill('input[name="card"]', '4242424242424242')
  await page.fill('input[name="cvv"]', '123')

  // Submit form — tests Server Action
  await page.click('button:has-text("Pay Now")')

  // Wait for success
  await expect(page.locator('text=Payment successful')).toBeVisible()
})

// ============================================
// Testing Server Actions
// ============================================

import { describe, it, expect, vi, beforeEach } from 'vitest'
import { checkout } from '@/app/actions/checkout'

// ---- Mock revalidateTag ----

vi.mock('next/cache', () => ({
  revalidateTag: vi.fn(),
  revalidatePath: vi.fn(),
}))

// ---- Mock database ----

vi.mock('@/lib/db', () => ({
  db: {
    query: vi.fn(),
  },
}))

import { revalidateTag } from 'next/cache'
import { db } from '@/lib/db'

describe('checkout Server Action', () => {
  const mockFormData = (overrides = {}) => {
    const data = new FormData()
    data.set('email', 'test@example.com')
    data.set('card', '4242424242424242')
    data.set('cvv', '123')
    data.set('idempotencyKey', 'test-key-123')
    data.set('productId', 'prod-1')
    data.set('quantity', '1')
    for (const [key, value] of Object.entries(overrides)) {
      data.set(key, value as string)
    }
    return data
  }

  beforeEach(() => {
    vi.clearAllMocks()
  })

  it('should succeed with valid data', async () => {
    vi.mocked(db.query).mockResolvedValueOnce({ id: 'order-1' })

    const result = await checkout(
      { success: false },
      mockFormData()
    )

    expect(result.success).toBe(true)
    expect(result.message).toBeDefined()
    expect(revalidateTag).toHaveBeenCalledWith('orders')
  })

  it('should return validation errors for invalid email', async () => {
    const result = await checkout(
      { success: false },
      mockFormData({ email: 'not-an-email' })
    )

    expect(result.success).toBe(false)
    expect(result.errors?.email).toBeDefined()
  })

  it('should return error for out-of-stock product', async () => {
    vi.mocked(db.query).mockResolvedValueOnce(null)

    const result = await checkout(
      { success: false },
      mockFormData()
    )

    expect(result.success).toBe(false)
    expect(result.errors?.form).toContain('no longer available')
  })

  it('should handle database errors gracefully', async () => {
    vi.mocked(db.query).mockRejectedValueOnce(
      new Error('Connection refused')
    )

    const result = await checkout(
      { success: false },
      mockFormData()
    )

    expect(result.success).toBe(false)
    // Should not expose system error details
    expect(result.errors?.form).not.toContain('Connection refused')
    expect(result.errors?.form).toContain('try again')
  })
})

// ============================================
// Testing Caching Behavior with Playwright
// ============================================

import { test, expect } from '@playwright/test'

// ---- Test ISR regeneration ----

test('product page regenerates after revalidation', async ({
  page,
  request,
}) => {
  // Step 1: Visit the page to prime the cache
  await page.goto('/products/test-product')
  const firstPrice = await page.locator('.price').textContent()

  // Step 2: Trigger revalidation via API
  const response = await request.post('/api/revalidate', {
    data: {
      path: '/products/test-product',
      secret: process.env.REVALIDATION_SECRET,
    },
  })
  expect(response.ok()).toBeTruthy()

  // Step 3: Visit the page again (should be fresh)
  await page.goto('/products/test-product', {
    // Force fresh load — bypass Router Cache
    waitUntil: 'networkidle',
  })
  const secondPrice = await page.locator('.price').textContent()

  // The price should have changed (data was regenerated)
  expect(secondPrice).not.toBe(firstPrice)
})

// ---- Test Cache-Control headers ----

test('product page has correct cache headers', async ({
  request,
}) => {
  const response = await request.get('/products/test-product')

  const cacheControl = response.headers()['cache-control']
  expect(cacheControl).toContain('s-maxage=60')
  expect(cacheControl).toContain('stale-while-revalidate')
})

// ---- Test Router Cache behavior ----

test('Router Cache serves stale on back navigation', async ({
  page,
}) => {
  // Step 1: Visit product page
  await page.goto('/products/test-product')
  await page.locator('h1').waitFor()

  // Step 2: Navigate away
  await page.goto('/')

  // Step 3: Navigate back — should use Router Cache
  await page.goBack()

  // The page should render instantly (from Router Cache)
  await expect(page.locator('h1')).toBeVisible()
})

// ---- Test data staleness window ----

test('stale data is served within revalidate window', async ({
  page,
  request,
}) => {
  // Visit the page
  await page.goto('/products/test-product')
  const firstRenderTime = await page.evaluate(
    () => window.__RENDERED_AT
  )

  // Visit again immediately — should be cached
  await page.goto('/products/test-product', {
    waitUntil: 'networkidle',
  })

  const secondRenderTime = await page.evaluate(
    () => window.__RENDERED_AT
  )

  // Should be the same cached version
  expect(secondRenderTime).toBe(firstRenderTime)
})

// ============================================
// Test Isolation Patterns
// ============================================

import { test, expect, type Page } from '@playwright/test'
import { describe, it, vi, beforeEach } from 'vitest'

// ---- Vitest: Reset mocks between tests ----

describe('Server Action tests', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  it('test 1 — independent', () => {
    // ...
  })

  it('test 2 — also independent', () => {
    // clearAllMocks() ensures mock state is fresh
  })
})

// ---- Playwright: Clear browser state ----

test.describe('isolated tests', () => {
  // Use a beforeEach to clear state
  test.beforeEach(async ({ context }) => {
    await context.clearCookies()
    await context.addInitScript(() => {
      localStorage.clear()
      sessionStorage.clear()
    })
  })

  test('user can login', async ({ page }) => {
    await page.goto('/login')
    // ...
  })

  test('user can logout', async ({ page }) => {
    // Fresh state — no login from previous test
    await page.goto('/dashboard')
    await expect(page).toHaveURL('/login') // Redirected because not authenticated
  })
})

// ---- Playwright: Isolated database per test ----

test.describe('database-dependent tests', () => {
  // Create test data per test
  test('creates a product', async ({ page }) => {
    await page.goto('/admin/products/new')
    // ... create a product
  })

  test('lists products', async ({ page }) => {
    // This test should NOT depend on the product created above
    // Use database seeding or fixtures for consistent data
  })
})

// ============================================
// Environment Verification Test
// ============================================

import { describe, it, expect } from 'vitest'

// ---- Test that validates production environment ----
// Run this in CI with production env vars only

describe('production environment verification', () => {
  it('all required environment variables are set', () => {
    const requiredVars = [
      'DATABASE_URL',
      'OPENAI_KEY',
      'AUTH_SECRET',
      'NEXT_PUBLIC_API_URL',
    ]

    const missing = requiredVars.filter(
      (v) => !process.env[v]
    )

    expect(missing).toEqual([])
  })

  it('NEXT_PUBLIC_ vars do not contain secrets', () => {
    const publicVars = Object.keys(process.env)
      .filter((k) => k.startsWith('NEXT_PUBLIC_'))
      .filter(
        (k) =>
          /key|secret|token|password|auth/i.test(k)
      )

    expect(publicVars).toEqual([])
  })

  it('server can start with current environment', async () => {
    // This test starts the Next.js server and checks it responds
    // Implemented in CI as a separate step
    expect(true).toBe(true)
  })
})

// ---- CI script: start-and-check.sh ----

// #!/bin/bash
// # Start the production server
// npx next start --port 3000 &
// SERVER_PID=$!
// sleep 5
//
// # Check health endpoint
// curl -f http://localhost:3000/api/health || {
//   echo "Server failed to start with production environment"
//   kill $SERVER_PID
//   exit 1
// }
//
// # Check cache headers
// curl -I http://localhost:3000/products/test | grep -q 's-maxage' || {
//   echo "Cache headers missing"
//   kill $SERVER_PID
//   exit 1
// }
//
// kill $SERVER_PID