Files
zitadel/apps/login/integration/support/e2e.ts
T
Max PeintnerandGitHub adaa6a8de6 fix(login): integration tests failing due to React 19 SSR errors (#10613)
# Which Problems Are Solved

Integration tests were failing with Minified React error 419 caused by
React 19 Suspense boundary issues during server-side rendering (SSR) to
client-side rendering (CSR) transitions.

# How the Problems Are Solved

The fix handles infrastructure-level SSR errors gracefully while
maintaining proper error detection for actual application issues.

- Added Cypress error handling for React 19 SSR hydration errors that
don't affect functionality

# Additional Changes

Enhanced Next.js configuration with React 19 compatibility
optimizations:
- `optimizePackageImports`: @radix-ui/react-tooltip and @heroicons/react
can have large bundle sizes if not optimized. Such packages are
suggested to be optimized in
https://nextjs.org/docs/app/api-reference/config/next-config-js/optimizePackageImports
- `poweredByHeader`: Not that important. Benefits are smaller HTTP
headers, Tiny bandwidth savings, and more professional appearance due to
cleaner response headers, added it as a "security best practice".


# Additional Context

- Replaces #10611
2025-09-01 16:16:18 +02:00

50 lines
1.5 KiB
TypeScript

// Handle React 19 SSR hydration errors that don't affect functionality
Cypress.on('uncaught:exception', (err, runnable) => {
// React error #419 is specifically about SSR Suspense boundary issues
// This doesn't affect the actual functionality, just the SSR/CSR transition
if (err.message.includes('Minified React error #419')) {
console.warn('Cypress: Suppressed React SSR error #419 (Suspense boundary issue):', err.message);
return false;
}
// Other hydration mismatches that are common with React 19 + Next.js 15
if (err.message.includes('server could not finish this Suspense boundary') ||
err.message.includes('Switched to client rendering') ||
err.message.includes('Hydration failed') ||
err.message.includes('Text content does not match server-rendered HTML')) {
console.warn('Cypress: Suppressed React hydration error (non-functional):', err.message);
return false;
}
// Let other errors fail the test as they should
return true;
});
const url = Cypress.env("CORE_MOCK_STUBS_URL") || "http://localhost:22220/v1/stubs";
function removeStub(service: string, method: string) {
return cy.request({
url,
method: "DELETE",
qs: {
service,
method,
},
});
}
export function stub(service: string, method: string, out?: any) {
removeStub(service, method);
return cy.request({
url,
method: "POST",
body: {
stubs: [
{
service,
method,
out,
},
],
},
});
}