test(tanstackstart-react): Wait for hydration before clicking client-error button (#21065)

mydea · web-flow · commit 7d6f9f8a99fd · 2026-05-20T15:08:32.000+02:00
## Summary - Adds a hydration marker (`data-hydrated="true"` on `<html>`) in `__root.tsx` of the tanstackstart-react e2e app, set in a `useEffect` so it fires only after React hydration completes. - Updates the two flaky client-error tests (`errors.test.ts:9`, `tunnel.test.ts:17`) to wait on that marker before clicking the "Break the client" button. ## Root cause (shared by three reported flakes) [#20641](#20641), [#20685](#20685), and [#20867](#20867) all fail with the same pattern: ``` Test timeout of 30000ms exceeded. ``` …after the same test step: click "Break the client", await the error event. The three issues differ only in which variant they were captured in (tunnel-object, tunnel-static, proxy). Same root cause. The "Break the client" button is server-rendered HTML; its onClick handler (`() => { throw new Error('Sentry Client Test Error'); }`) is attached only when React hydrates. Playwright's `toBeVisible()` polls the DOM for visibility but doesn't wait for hydration — on slow CI runs, the click can fire before React has attached the handler. With no handler attached, the click does nothing, no error is thrown, the Sentry SDK never sees an error, and `await errorEventPromise` times out at 30 s. ## Fix In `__root.tsx`: ```tsx useEffect(() => { document.documentElement.setAttribute('data-hydrated', 'true'); }, []); ``` The `useEffect` only runs on the client after hydration. Tests now wait on it explicitly: ```ts await page.goto('/'); await page.locator('html[data-hydrated="true"]').waitFor(); // ← new await expect(page.locator('button').filter({ hasText: 'Break the client' })).toBeVisible(); await page.locator('button').filter({ hasText: 'Break the client' }).click(); ``` This is the standard Playwright + SSR-React pattern. Deterministic (no `networkidle` flakiness), self-documenting, and the marker is now reusable for any future client-interaction test in this app. Fixes #20641 Fixes #20685 Fixes #20867 🤖 Generated with [Claude Code](https://claude.com/claude-code)
diff --git a/dev-packages/e2e-tests/test-applications/tanstackstart-react/src/routes/__root.tsx b/dev-packages/e2e-tests/test-applications/tanstackstart-react/src/routes/__root.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { useEffect, type ReactNode } from 'react';
 import { Outlet, createRootRoute, HeadContent, Scripts } from '@tanstack/react-router';
 
 export const Route = createRootRoute({
@@ -20,6 +20,14 @@ export const Route = createRootRoute({
 });
 
 function RootComponent() {
+  // Mark the document as hydrated so tests can wait for React to attach event
+  // handlers before clicking. `toBeVisible()` only confirms the SSR HTML is
+  // rendered; on slow CI runs Playwright can click before hydration completes,
+  // the onClick handler isn't yet attached, and tests asserting on the
+  // resulting client-side error time out (see #20641, #20685, #20867).
+  useEffect(() => {
+    document.documentElement.setAttribute('data-hydrated', 'true');
+  }, []);
   return (
     <RootDocument>
       <Outlet />
diff --git a/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/errors.test.ts b/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/errors.test.ts
@@ -13,6 +13,11 @@ test('Sends client-side error to Sentry with auto-instrumentation', async ({ pag
 
   await page.goto(`/`);
 
+  // Wait for React to hydrate (see __root.tsx) before clicking — the SSR HTML
+  // renders the button before the onClick handler is attached, and clicking
+  // pre-hydration would fire no handler and produce no error.
+  await page.locator('html[data-hydrated="true"]').waitFor();
+
   await expect(page.locator('button').filter({ hasText: 'Break the client' })).toBeVisible();
 
   await page.locator('button').filter({ hasText: 'Break the client' }).click();
diff --git a/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/tunnel.test.ts b/dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/tunnel.test.ts
@@ -22,6 +22,11 @@ test('Sends client-side errors through the configured tunnel route', async ({ pa
   await page.goto('/');
   const pageOrigin = new URL(page.url()).origin;
 
+  // Wait for React to hydrate (see __root.tsx) before clicking — the SSR HTML
+  // renders the button before the onClick handler is attached, and clicking
+  // pre-hydration would fire no handler and produce no error.
+  await page.locator('html[data-hydrated="true"]').waitFor();
+
   await expect(page.locator('button').filter({ hasText: 'Break the client' })).toBeVisible();
 
   const managedTunnelResponsePromise = page.waitForResponse(response => {
