chore(deps): bump jsdom to 30 with test harness fixes - #1598
Merged
Conversation
Bumps jsdom from 29.1.1 to 30.0.1 in /frontend, together with the 7 test-assertion updates that the dependabot bump (#1586) cannot carry. Supersedes dependabot's blocked bump; dependabot will auto-close/rebase once main is on 30.0.1. jsdom 30 intentionally changed CSS serialization (see #1514 discussion): - calc() is simplified before serialization, even for inline styles, so authored expressions like calc(5 * 1.75rem) now serialize as calc(8.75rem) - getComputedStyle() converts length values to pixels, so ch-unit expectations via toHaveStyle no longer match The affected assertions now check the raw inline style property (element.style.X) instead of routing through getComputedStyle: simplified calc forms for the 5 maxHeight assertions, and authored ch values (preserved on the inline style) for the 2 minWidth ones. Component code is unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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.
Bumps
jsdomfrom 29.1.1 to 30.0.1 in/frontendand updates the 7 test assertions that break under jsdom 30's new CSS value pipeline.Supersedes the blocked dependabot bump #1586 (dependabot can bump the dependency but cannot carry the harness fixes, so its CI is deterministically red — see the failure analysis on #1514). Once main is on 30.0.1, dependabot will auto-close/rebase #1586.
Why the tests break (jsdom 30 behavior changes, not app regressions)
Component inline styles are unchanged; only jsdom's serialization changed:
calc()before serialization (matching browsers), so authored expressions no longer round-trip. This applies to the inline style itself, not just computed style:el.style.maxHeight = "calc(5 * 1.75rem)"now reads back as"calc(8.75rem)".toHaveStyleroutes throughgetComputedStyle, which now converts lengths (incl.ch) to pixel values dependent on jsdom's font metrics.The 7 assertion updates (per the list on #1514)
All switched from
toHaveStyle(computed style) to asserting the raw inline style property, which avoids depending on jsdom's font metrics:src/components/donut-chart.test.tsxtoHaveStyle({ maxHeight: "calc(5 * 1.75rem)" }).style.maxHeight→"calc(8.75rem)"src/features/apis/components/account-cost-donut.test.tsxtoHaveStyle({ maxHeight: "calc(5 * 1.75rem + 4 * 0rem)" }).style.maxHeight→"calc(8.75rem)"src/features/dashboard/components/account-cards.test.tsxtoHaveStyle({ maxHeight: "calc(2 * 11.5rem + 1rem)" }).style.maxHeight→"calc(24rem)"src/features/reports/components/model-distribution-donut.test.tsxtoHaveStyle({ maxHeight: "calc(4 * 2rem)" }).style.maxHeight→"calc(8rem)"src/features/reports/components/model-distribution-donut.test.tsxtoHaveStyle({ minWidth: "7ch" })×2.style.minWidth→"7ch"(authored form preserved on inline style)src/features/reports/components/useragent-distribution-donut.test.tsxtoHaveStyle({ maxHeight: "calc(4 * 2rem)" }).style.maxHeight→"calc(8rem)"src/features/reports/components/useragent-distribution-donut.test.tsxtoHaveStyle({ minWidth: "4ch" })×2.style.minWidth→"4ch"(authored form preserved on inline style)Note on the approach suggested in #1514: asserting the raw style attribute with the authored calc string (
stringContaining("calc(5 * 1.75rem)")) doesn't survive jsdom 30 either — the CSSOM simplifies calc at parse time, so evengetAttribute("style")reports the simplified form. The simplified expected strings are the closest stable pin; thechassertions do keep their authored values via the inline style. Original authored expressions are preserved in comments next to each assertion.Verification (local, bun 1.3.14 — same as CI)
vitest run: 135 files / 1027 tests passed (was 7 failed / 5 files on jsdom 30 before the assertion fixes, matching chore(deps): bump jsdom from 29.1.1 to 30.0.1 in /frontend #1586's CI)eslint .: cleantsc -b: cleanAlso note from #1514: jsdom 30 raises the Node.js floor to
^22.22.2 || ^24.15.0 || >=26.0.0. CI runs the suite under Bun (unaffected); local vitest under older Node will hit the engines wall.Refs #1586, #1514
🤖 Generated with Claude Code