denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test(e2e): avoid networkidle in hydration checks

Browse Source 
The app performs background polling/analytics, so networkidle can hang. Use domcontentloaded + short waits to reliably catch hydration errors.

Co-authored-by: dennis <dennis@konkol.net>
This commit is contained in:
Cursor Agent
2026-01-14 21:59:23 +00:00
parent a56ec97ef9
commit 721bdfaf53
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
e2e/hydration.spec.ts
View File

@@ -19,9 +19,11 @@ test.describe('Hydration Tests', () => {
} }
}); });
// Navigate to home page // Navigate to home page.
await page.goto('/en', { waitUntil: 'networkidle' }); // Avoid `networkidle` because the app has background polling/analytics requests.
await page.waitForLoadState('domcontentloaded'); await page.goto('/en', { waitUntil: 'domcontentloaded' });
// Give hydration a moment to run
await page.waitForTimeout(1000);
// Check for hydration errors // Check for hydration errors
const hydrationErrors = consoleErrors.filter(error => const hydrationErrors = consoleErrors.filter(error =>
@@ -51,8 +53,8 @@ test.describe('Hydration Tests', () => {
} }
}); });
await page.goto('/en'); await page.goto('/en', { waitUntil: 'domcontentloaded' });
await page.waitForLoadState('networkidle'); await page.waitForTimeout(500);
// Check for duplicate key warnings // Check for duplicate key warnings
const keyWarnings = consoleWarnings.filter(warning => const keyWarnings = consoleWarnings.filter(warning =>
@@ -71,14 +73,15 @@ test.describe('Hydration Tests', () => {
} }
}); });
await page.goto('/en', { waitUntil: 'networkidle' }); await page.goto('/en', { waitUntil: 'domcontentloaded' });
await page.waitForLoadState('domcontentloaded'); await page.waitForTimeout(500);
// Navigate to projects page via link // Navigate to projects page via link
const projectsLink = page.locator('a[href*="/projects"]').first(); const projectsLink = page.locator('a[href*="/projects"]').first();
if (await projectsLink.count() > 0) { if (await projectsLink.count() > 0) {
await projectsLink.click(); await projectsLink.click();
await page.waitForLoadState('domcontentloaded'); await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(500);
// Check for errors after navigation // Check for errors after navigation
const hydrationErrors = consoleErrors.filter(error => const hydrationErrors = consoleErrors.filter(error =>
@@ -95,8 +98,8 @@ test.describe('Hydration Tests', () => {
// Get initial HTML // Get initial HTML
const initialHTML = await page.content(); const initialHTML = await page.content();
// Wait for React to hydrate // Wait for React to hydrate (avoid networkidle due to background requests)
await page.waitForLoadState('networkidle'); await page.waitForTimeout(1000);
// Get HTML after hydration // Get HTML after hydration
const hydratedHTML = await page.content(); const hydratedHTML = await page.content();
@@ -109,7 +112,7 @@ test.describe('Hydration Tests', () => {
test('Interactive elements work after hydration', async ({ page }) => { test('Interactive elements work after hydration', async ({ page }) => {
await page.goto('/en'); await page.goto('/en');
await page.waitForLoadState('networkidle'); await page.waitForTimeout(1000);
// Try to find and click interactive elements // Try to find and click interactive elements
const buttons = page.locator('button, a[role="button"]'); const buttons = page.locator('button, a[role="button"]');