fix(pages): repair hydration on five pages, add a site-wide smoke suite - #146
Merged
Conversation
The smoke suite goes wide where the rest of the tests go deep: every route, both locales, asserting the page renders and hydrates. It found five pages failing hydration with React #418, and they are fixed here. Both causes were MDX turning valid-looking source into invalid HTML. A <p> written across several lines has its contents parsed as markdown and wrapped in a second <p>. The browser splits that nesting into siblings, so the server sent five children where React built three. The authored <p style> rendered empty with the text beside it. A bare email address inside an <a> gets auto-linked, nesting an <a> in an <a>, which the parser also pulls apart. Neither is visible. Both pages look and behave right, which is why they survived this long: only the console mentions it. Fixed on /contact/, /terms/, /nl/about/, /nl/contact/ and /nl/terms/ by keeping those paragraphs on one line and passing the addresses as JSX strings. The suite records what it cannot fix tonight, rather than skipping it: - PAGES_WITHOUT_H1 — fourteen pages open on an <h2> because they use a SectionHead instead of a hero. A document with no level-one heading is a real accessibility and SEO defect, but giving these pages an h1 is a decision about page hierarchy, not a mechanical edit. - PAGES_THAT_SCROLL_SIDEWAYS — /connext/ in both locales. A separate test asserts those lists are still accurate, so a page cannot be "fixed" by adding a line to an allowlist, and a genuine fix forces the list to shrink. Writing it found its own bug: measured immediately after navigation it reported /connext/ as clean, because the overflow comes from a client-rendered element. It waits for hydration now. All of this was confirmed identical under React 18 and React 19, which is how the pending React 19 bump stopped being guesswork.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What it found
A smoke suite covering every route in both locales, asserting each page renders and hydrates. It immediately found five pages failing hydration (React #418) —
/contact/,/terms/,/nl/about/,/nl/contact/,/nl/terms/— all fixed here.Both causes were MDX turning valid-looking source into invalid HTML:
<p>written across several lines has its contents parsed as markdown and wrapped in a second<p>. The browser splits that nesting into siblings, so the server sent 5 children where React built 3. The authored<p style>rendered empty, with the text beside it.<a>gets auto-linked, nesting an<a>in an<a>, which the parser also pulls apart.Neither is visible. Both pages look and behave correctly — only the console mentions it. That is exactly why a console-error assertion across every route is worth more here than screenshots.
What it records rather than hides
PAGES_WITHOUT_H1— 14 pages open on an<h2>because they use aSectionHeadinstead of a hero. No level-one heading is a real accessibility (WCAG 1.3.1) and SEO defect, but giving them an h1 is a decision about page hierarchy, not a mechanical edit. Wants your call.PAGES_THAT_SCROLL_SIDEWAYS—/connext/in both locales.A separate test asserts those lists are still accurate, so a page cannot be "fixed" by adding a line to an allowlist, and a real fix forces the list to shrink. Writing that test found its own bug: measured immediately after navigation it declared
/connext/clean, because the overflow comes from a client-rendered element. It waits for hydration now.Bonus: React 19 is decidable now
Running this against React 18 and React 19 gave identical results (same 18 failures before these fixes, same passes after). So the pending #122/#124 bumps introduce no regression this suite can see. Left unmerged because the preset still declares
react: ^18.0.0as a peer, which should be widened first.63 tests passing.