Skip to content

test: Add integration tests for tolerant hydration in mount() #627

@vertz-advocate

Description

@vertz-advocate

Summary

mount() with { hydration: "tolerant" } is a critical path for SSR apps. The current implementation in packages/ui/src/mount.ts and packages/ui/src/hydrate/hydration-context.ts handles DOM walking, node claiming, and error recovery — but there are no integration tests verifying the full mount-with-hydration flow.

Missing Tests

Integration tests

  • Preserves SSR DOM nodesmount(App, root, { hydration: "tolerant" }) on a root with existing SSR HTML should NOT clear and re-create the DOM. The original DOM nodes should be the same object references after hydration.

  • Attaches event handlers — After tolerant hydration, event handlers (e.g., onclick) should be attached to the existing SSR elements and fire correctly on user interaction.

  • Falls back to CSR on mismatch — When the SSR HTML structure does not match what the app function produces (e.g., different tag names, missing elements), mount() should catch the error, log a warning, and fall back to replace mode (clear + re-render). The app should still work after fallback.

Regression tests

  • startHydration is actually called in tolerant mode — Verify that startHydration(root) is invoked when mount() is called with hydration: "tolerant" and the root has children. This prevents regressions where the tolerant code path is accidentally bypassed.

Context

  • Implementation: packages/ui/src/mount.ts (lines 70-100, tolerant hydration branch)
  • Hydration context: packages/ui/src/hydrate/hydration-context.ts
  • These tests should live in packages/ui/src/__tests__/ alongside existing mount tests
  • Tests need a DOM environment (happy-dom or jsdom)

Acceptance Criteria

  • All four test cases above pass
  • Tests use real DOM assertions (node identity, event firing), not just "no errors thrown"
  • Tests verify the dev-mode warning messages are logged where applicable

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions