Our Journey to 100% Test Coverage: Cypress 14, Playwright 1.45, and Jest 30 for Next.js 15

// jest.config.mjs - Jest 30 native ESM configuration for Next.js 15\n// No babel-jest required, Jest 30 handles .ts and .tsx files via node's ESM loader\nimport type { Config } from 'jest';\n\nconst config: Config = {\n  testEnvironment: 'node',\n  extensionsToTreatAsEsm: ['.ts', '.tsx'],\n  globals: {\n    'ts-jest': {\n      useESM: true\n    }\n  },\n  moduleNameMapper: {\n    // Map Next.js 15 internal aliases\n    '^@/(.*)$': '/src/$1',\n    '^next/cache$': '/node_modules/next/cache.js'\n  },\n  collectCoverageFrom: [\n    'src/**/*.{ts,tsx}',\n    '!src/**/*.d.ts',\n    '!src/app/api/**/*.ts' // API routes covered by Playwright E2E\n  ],\n  coverageThreshold: {\n    global: {\n      branches: 100,\n      functions: 100,\n      lines: 100,\n      statements: 100\n    }\n  }\n};\n\nexport default config;\n

// src/app/actions/create-user.test.ts\n// Jest 30 unit test for Next.js 15 server action with 100% coverage\nimport { createUser } from './create-user';\nimport { db } from '@/lib/db';\nimport { revalidatePath } from 'next/cache';\n\n// Mock Next.js 15 internal modules\njest.mock('next/cache', () => ({\n  revalidatePath: jest.fn()\n}));\n\njest.mock('@/lib/db', () => ({\n  db: {\n    user: {\n      create: jest.fn(),\n      findUnique: jest.fn()\n    }\n  }\n}));\n\n// Mock Next.js 15's request context for server actions\njest.mock('next/headers', () => ({\n  headers: jest.fn(() => new Map([['x-user-id', 'test-user-123']]))\n}));\n\ndescribe('createUser Server Action', () => {\n  beforeEach(() => {\n    jest.clearAllMocks();\n  });\n\n  it('creates a new user and revalidates the /users path on success', async () => {\n    // Arrange\n    const mockUser = {\n      id: 'user-123',\n      email: 'test@example.com',\n      name: 'Test User'\n    };\n    (db.user.findUnique as jest.Mock).mockResolvedValue(null);\n    (db.user.create as jest.Mock).mockResolvedValue(mockUser);\n\n    // Act\n    const result = await createUser({\n      email: 'test@example.com',\n      name: 'Test User'\n    });\n\n    // Assert\n    expect(db.user.findUnique).toHaveBeenCalledWith({\n      where: { email: 'test@example.com' }\n    });\n    expect(db.user.create).toHaveBeenCalledWith({\n      data: {\n        email: 'test@example.com',\n        name: 'Test User'\n      }\n    });\n    expect(revalidatePath).toHaveBeenCalledWith('/users');\n    expect(result).toEqual({ success: true, user: mockUser });\n  });\n\n  it('returns an error if user already exists', async () => {\n    // Arrange\n    const existingUser = {\n      id: 'user-123',\n      email: 'test@example.com',\n      name: 'Existing User'\n    };\n    (db.user.findUnique as jest.Mock).mockResolvedValue(existingUser);\n\n    // Act\n    const result = await createUser({\n      email: 'test@example.com',\n      name: 'Test User'\n    });\n\n    // Assert\n    expect(db.user.create).not.toHaveBeenCalled();\n    expect(result).toEqual({ success: false, error: 'User already exists' });\n  });\n\n  it('handles database errors gracefully', async () => {\n    // Arrange\n    (db.user.findUnique as jest.Mock).mockRejectedValue(new Error('DB connection failed'));\n\n    // Act\n    const result = await createUser({\n      email: 'test@example.com',\n      name: 'Test User'\n    });\n\n    // Assert\n    expect(result).toEqual({ success: false, error: 'Failed to create user' });\n  });\n\n  it('validates required fields before database calls', async () => {\n    // Arrange & Act\n    const result = await createUser({\n      email: '',\n      name: 'Test User'\n    });\n\n    // Assert\n    expect(db.user.findUnique).not.toHaveBeenCalled();\n    expect(result).toEqual({ success: false, error: 'Email is required' });\n  });\n});\n

// cypress/component/UserCard.cy.tsx\n// Cypress 14 component test for Next.js 15 App Router component\nimport React from 'react';\nimport { UserCard } from '@/components/UserCard';\nimport { mount } from 'cypress/react18';\n\n// Mock Next.js 15 Image component to avoid Cypress webpack issues\nCypress.Commands.add('mountWithNext', (component: React.ReactElement) => {\n  return mount(\n    \n      {component}\n    \n  );\n});\n\ndescribe('UserCard Component (Cypress 14)', () => {\n  const mockUser = {\n    id: 'user-123',\n    name: 'Alice Smith',\n    email: 'alice@example.com',\n    avatarUrl: 'https://example.com/avatar.jpg',\n    role: 'admin' as const\n  };\n\n  it('renders user details correctly', () => {\n    cy.mountWithNext();\n\n    // Assert all user details are rendered\n    cy.get('[data-testid=\'user-name\']').should('contain.text', mockUser.name);\n    cy.get('[data-testid=\'user-email\']').should('contain.text', mockUser.email);\n    cy.get('[data-testid=\'user-role\']').should('contain.text', mockUser.role);\n    cy.get('[data-testid=\'user-avatar\']').should('have.attr', 'src', mockUser.avatarUrl);\n  });\n\n  it('shows admin badge for admin users', () => {\n    cy.mountWithNext();\n    cy.get('[data-testid=\'admin-badge\']').should('be.visible');\n  });\n\n  it('hides admin badge for non-admin users', () => {\n    const nonAdminUser = { ...mockUser, role: 'user' as const };\n    cy.mountWithNext();\n    cy.get('[data-testid=\'admin-badge\']').should('not.exist');\n  });\n\n  it('calls onEdit callback when edit button is clicked', () => {\n    const onEditMock = cy.stub().as('onEditStub');\n    cy.mountWithNext();\n\n    cy.get('[data-testid=\'edit-button\']').click();\n    cy.get('@onEditStub').should('have.been.calledOnceWith', mockUser.id);\n  });\n\n  it('handles missing avatar URL with fallback', () => {\n    const userWithoutAvatar = { ...mockUser, avatarUrl: undefined };\n    cy.mountWithNext();\n    cy.get('[data-testid=\'user-avatar\']').should('have.attr', 'src', '/fallback-avatar.jpg');\n  });\n\n  it('matches snapshot for consistent UI', () => {\n    cy.mountWithNext();\n    cy.get('[data-testid=\'user-card\']').toMatchSnapshot();\n  });\n});\n\n// cypress.config.ts - Cypress 14 configuration for Next.js 15\nimport { defineConfig } from 'cypress';\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'next',\n      bundler: 'webpack',\n      nextConfig: {\n        // Next.js 15 App Router configuration\n        appDir: true,\n        reactStrictMode: true\n      }\n    },\n    specPattern: 'cypress/component/**/*.cy.{js,jsx,ts,tsx}',\n    coverage: {\n      enabled: true,\n      reporter: ['lcov', 'text-summary'],\n      include: ['src/components/**/*.{ts,tsx}'],\n      exclude: ['src/components/**/*.stories.tsx']\n    }\n  }\n});\n

// tests/e2e/login.spec.ts\n// Playwright 1.45 E2E test for Next.js 15 login flow with trace collection\nimport { test, expect } from '@playwright/test';\nimport { LoginPage } from './pages/LoginPage';\nimport { DashboardPage } from './pages/DashboardPage';\n\ntest.describe('Next.js 15 Login Flow (Playwright 1.45)', () => {\n  let loginPage: LoginPage;\n  let dashboardPage: DashboardPage;\n\n  test.beforeEach(async ({ page }) => {\n    loginPage = new LoginPage(page);\n    dashboardPage = new DashboardPage(page);\n    await page.goto('/login');\n  });\n\n  test('successful login redirects to dashboard and shows user email', async ({ page }) => {\n    // Arrange\n    const testEmail = 'test@example.com';\n    const testPassword = 'ValidPass123!';\n\n    // Act\n    await loginPage.fillEmail(testEmail);\n    await loginPage.fillPassword(testPassword);\n    await loginPage.clickLogin();\n\n    // Assert\n    await expect(page).toHaveURL('/dashboard');\n    await expect(dashboardPage.userEmail).toHaveText(testEmail);\n    await expect(dashboardPage.welcomeMessage).toBeVisible();\n  });\n\n  test('failed login shows error message and does not redirect', async ({ page }) => {\n    // Arrange\n    const testEmail = 'test@example.com';\n    const testPassword = 'WrongPass123!';\n\n    // Act\n    await loginPage.fillEmail(testEmail);\n    await loginPage.fillPassword(testPassword);\n    await loginPage.clickLogin();\n\n    // Assert\n    await expect(page).toHaveURL('/login');\n    await expect(loginPage.errorMessage).toHaveText('Invalid email or password');\n    await expect(dashboardPage.welcomeMessage).not.toBeVisible();\n  });\n\n  test('login with unverified email shows verification prompt', async ({ page }) => {\n    // Arrange\n    const testEmail = 'unverified@example.com';\n    const testPassword = 'ValidPass123!';\n\n    // Act\n    await loginPage.fillEmail(testEmail);\n    await loginPage.fillPassword(testPassword);\n    await loginPage.clickLogin();\n\n    // Assert\n    await expect(page).toHaveURL('/verify-email');\n    await expect(page.getByTestId('verification-prompt')).toContainText(testEmail);\n  });\n\n  test('remembers user session across page reloads', async ({ page, context }) => {\n    // Arrange\n    const testEmail = 'test@example.com';\n    const testPassword = 'ValidPass123!';\n\n    // Act: Login\n    await loginPage.fillEmail(testEmail);\n    await loginPage.fillPassword(testPassword);\n    await loginPage.clickLogin();\n    await expect(page).toHaveURL('/dashboard');\n\n    // Reload page\n    await page.reload();\n\n    // Assert session persists\n    await expect(page).toHaveURL('/dashboard');\n    await expect(dashboardPage.userEmail).toHaveText(testEmail);\n  });\n\n  test('logout clears session and redirects to login', async ({ page }) => {\n    // Arrange: Login first\n    const testEmail = 'test@example.com';\n    const testPassword = 'ValidPass123!';\n    await loginPage.fillEmail(testEmail);\n    await loginPage.fillPassword(testPassword);\n    await loginPage.clickLogin();\n    await expect(page).toHaveURL('/dashboard');\n\n    // Act: Logout\n    await dashboardPage.clickLogout();\n\n    // Assert\n    await expect(page).toHaveURL('/login');\n    await page.goto('/dashboard');\n    await expect(page).toHaveURL('/login'); // Redirect back to login if not authenticated\n  });\n});\n\n// playwright.config.ts - Playwright 1.45 configuration for Next.js 15\nimport { defineConfig } from '@playwright/test';\n\nexport default defineConfig({\n  testDir: './tests/e2e',\n  timeout: 30_000,\n  retries: 2,\n  use: {\n    baseURL: 'http://localhost:3000',\n    trace: 'on-first-retry', // Playwright 1.45 trace collection on failure\n    screenshot: 'only-on-failure',\n    video: 'retain-on-failure'\n  },\n  projects: [\n    {\n      name: 'chromium',\n      use: { ...devices['Desktop Chrome'] }\n    },\n    {\n      name: 'firefox',\n      use: { ...devices['Desktop Firefox'] }\n    },\n    {\n      name: 'mobile',\n      use: { ...devices['iPhone 13'] }\n    }\n  ]\n});\n

// GitHub Actions workflow snippet to block PRs with <100% coverage\nname: Test Coverage Gate\non: [pull_request]\n\njobs:\n  coverage-check:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: 20\n      - run: npm ci\n      - run: npm run test:unit -- --coverage\n      - run: npm run test:component -- --coverage\n      - run: npm run test:e2e -- --coverage\n      - name: Check 100% coverage\n        run: |\n          if grep -q 'All files' coverage/lcov-report/index.html | grep -v '100%'; then\n            echo 'Coverage is below 100%. Failing PR.'\n            exit 1\n          fi\n

// playwright.config.ts snippet for trace collection\nuse: {\n  trace: 'on-first-retry',\n  screenshot: 'only-on-failure',\n  video: 'retain-on-failure'\n}\n

// Cypress 14 component test for Next.js 15 Root Layout\nimport { mount } from 'cypress/react18';\nimport { RootLayout } from '@/app/layout';\n\ndescribe('RootLayout', () => {\n  it('renders navigation menu and user dropdown', () => {\n    cy.mount(\n      \n        Test Page\n      \n    );\n    cy.get('[data-testid=\'nav-menu\']').should('be.visible');\n    cy.get('[data-testid=\'user-dropdown\']').should('be.visible');\n  });\n});\n