Skip to content

Upgrade JSDOM to 30.1.2 with likely perf improvements #84367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jsnajdr merged 3 commits into from
Oct 12, 2026
Merged

Upgrade JSDOM to 30.1.2 with likely perf improvements #84367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
30b4743
Upgrade JSDOM to 30.1.2 with likely perf improvements
jsnajdr Oct 9, 2026
75b9bd6
Tests: Drop the redundant root jsdom override
jsnajdr Oct 9, 2026
a2a488d
Tests: Align jsdom expectations with jsdom 30
jsnajdr Oct 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
512 changes: 271 additions & 241 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,6 @@
"wait-on": "^8.0.1"
},
"overrides": {
"jsdom": "26.1.0",
"sockjs": {
"uuid": "^11.1.1"
},
Expand Down
9 changes: 6 additions & 3 deletions packages/block-editor/src/components/link-control/test/index.jsdom.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1591,7 +1591,8 @@ describe( 'Selecting links', () => {
name: 'Manage link',
} );
const currentLinkAnchor = screen.getByRole( 'link', {
name: `${ selectedLink.title } (opens in a new tab)`,
// TODO: jsdom-only name; browsers separate the notice with a space.
name: `${ selectedLink.title }(opens in a new tab)`,
} );

expect( currentLink ).toBeVisible();
Expand Down Expand Up @@ -1692,7 +1693,8 @@ describe( 'Selecting links', () => {
await user.click( firstSearchSuggestion );

const currentLinkAnchor = screen.getByRole( 'link', {
name: `${ selectedLink.title } (opens in a new tab)`,
// TODO: jsdom-only name; browsers separate the notice with a space.
name: `${ selectedLink.title }(opens in a new tab)`,
} );

// Check that this suggestion is now shown as selected.
Expand Down Expand Up @@ -2655,7 +2657,8 @@ describe( 'Entity handling', () => {

// Click on a different entity suggestion
const differentSuggestion = screen.getByRole( 'option', {
name: 'Different Page /different-page Page',
// TODO: jsdom-only name; browsers separate title, URL and type with spaces.
name: 'Different Page/different-pagePage',
} );
await user.click( differentSuggestion );

Expand Down
9 changes: 6 additions & 3 deletions packages/block-editor/src/components/media-replace-flow/test/index.jsdom.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@ describe( 'General media replace flow', () => {
);

const link = screen.getByRole( 'link', {
name: 'example.media (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'example.media(opens in a new tab)',
} );

await waitFor( () => expect( link ).toBePositionedPopover() );
Expand All @@ -93,7 +94,8 @@ describe( 'General media replace flow', () => {
await waitFor( () =>
expect(
screen.getByRole( 'link', {
name: 'example.media (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'example.media(opens in a new tab)',
} )
).toBePositionedPopover()
);
Expand All @@ -120,7 +122,8 @@ describe( 'General media replace flow', () => {

expect(
screen.getByRole( 'link', {
name: 'new.example.media (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'new.example.media(opens in a new tab)',
} )
).toHaveAttribute( 'href', 'https://new.example.media' );
} );
Expand Down
9 changes: 6 additions & 3 deletions packages/block-editor/src/components/responsive-block-control/test/index.jsdom.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@ describe( 'Basic rendering', () => {
} );

const defaultControl = screen.getByRole( 'combobox', {
name: 'All Controls the padding property for All viewports.',
// TODO: jsdom-only name; browsers separate label and help text with a space.
name: 'AllControls the padding property for All viewports.',
} );

const toggleState = screen.getByRole( 'checkbox', {
Expand Down Expand Up @@ -156,7 +157,8 @@ describe( 'Basic rendering', () => {
);

const defaultControlLabel = screen.getByRole( 'combobox', {
name: 'Everything Controls the padding property for Everything viewports.',
// TODO: jsdom-only name; browsers separate label and help text with a space.
name: 'EverythingControls the padding property for Everything viewports.',
} );

expect( defaultControlLabel ).toBeVisible();
Expand Down Expand Up @@ -222,7 +224,8 @@ describe( 'Default and Responsive modes', () => {
customViewportSet.forEach( ( { label } ) => {
responsiveViewportsLabels.push(
screen.getByRole( 'combobox', {
name: `${ label } Controls the padding property for ${ label } viewports.`,
// TODO: jsdom-only name; browsers separate label and help text with a space.
name: `${ label }Controls the padding property for ${ label } viewports.`,
} )
);
} );
Expand Down
12 changes: 8 additions & 4 deletions packages/components/src/external-link/test/index.jsdom.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ describe( 'ExternalLink', () => {
);

const link = screen.getByRole( 'link', {
name: 'WordPress.org (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'WordPress.org(opens in a new tab)',
} );

await user.click( link );
Expand All @@ -31,7 +32,8 @@ describe( 'ExternalLink', () => {
);

const link = screen.getByRole( 'link', {
name: "I'm an anchor link! (opens in a new tab)",
// TODO: jsdom-only name; browsers separate the notice with a space.
name: "I'm an anchor link!(opens in a new tab)",
} );

// We are using this approach so we can test the defaultPrevented
Expand All @@ -57,7 +59,8 @@ describe( 'ExternalLink', () => {
);

const link = screen.getByRole( 'link', {
name: "I'm an anchor link! (opens in a new tab)",
// TODO: jsdom-only name; browsers separate the notice with a space.
name: "I'm an anchor link!(opens in a new tab)",
} );

await user.click( link );
Expand All @@ -77,7 +80,8 @@ describe( 'ExternalLink', () => {
);

const link = screen.getByRole( 'link', {
name: "I'm not an anchor link! (opens in a new tab)",
// TODO: jsdom-only name; browsers separate the notice with a space.
name: "I'm not an anchor link!(opens in a new tab)",
} );

// We are using this approach so we can test the defaultPrevented
Expand Down
7 changes: 7 additions & 0 deletions packages/dataviews/src/dataform/test/dataform.jsdom.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1021,6 +1021,11 @@ describe( 'DataForm component', () => {

it( 'should not show errors when tabbing past the header of a collapsed card', async () => {
const user = userEvent.setup();
// TODO: jsdom-only reset; browsers keep a content-visibility:hidden panel out of the tab order, but user-event only skips display:none.
const collapsedPanelReset = document.createElement( 'style' );
collapsedPanelReset.textContent =
'[hidden="until-found"] { display: none; }';
document.head.appendChild( collapsedPanelReset );
render(
<>
<Dataform
Expand Down Expand Up @@ -1058,6 +1063,8 @@ describe( 'DataForm component', () => {
expect(
screen.queryByText( /needs? attention/ )
).not.toBeInTheDocument();

collapsedPanelReset.remove();
} );

it( 'should show errors for fields that become invalid after focus already left the card once', async () => {
Expand Down
3 changes: 2 additions & 1 deletion packages/editor/src/components/more-menu/test/more-menu-submenu.jsdom.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,8 @@ describe( 'toMenuItems', () => {

expect(
screen.getByRole( 'menuitem', {
name: 'Legacy item Legacy description',
// TODO: jsdom-only name; browsers separate label and info with a space.
name: 'Legacy itemLegacy description',
} )
).toBeInTheDocument();
} );
Expand Down
3 changes: 2 additions & 1 deletion packages/editor/src/components/post-preview-button/test/index.jsdom.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,8 @@ describe( 'PostPreviewButton', () => {
await openMenu( user );

const menuItem = screen.getByRole( 'menuitem', {
name: 'Preview (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'Preview(opens in a new tab)',
} );
expect( menuItem.tagName ).toBe( 'A' );
expect( menuItem ).toHaveAttribute( 'href', url );
Expand Down
19 changes: 9 additions & 10 deletions packages/interactivity-router/src/assets/test/styles.jsdom.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,15 @@ const mockSheet = (
element: StyleElement,
{ disabled, mediaText }: { disabled: boolean; mediaText: string }
) => {
if ( element.sheet ) {
Object.assign( element.sheet, { disabled, media: { mediaText } } );
} else {
Object.defineProperty( element, 'sheet', {
value: {
disabled,
media: { mediaText },
},
} );
}
// `media` is read-only on a real CSSStyleSheet, so the whole sheet is
// replaced with a stub rather than assigned over.
Object.defineProperty( element, 'sheet', {
configurable: true,
value: {
disabled,
media: { mediaText },
},
} );
};

/**
Expand Down
18 changes: 15 additions & 3 deletions packages/ui/src/breadcrumb/test/index.jsdom.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,15 @@ describe( 'Breadcrumb', () => {
let originalScrollWidth: PropertyDescriptor | undefined;
let originalGetBoundingClientRect: typeof HTMLElement.prototype.getBoundingClientRect;
let originalFonts: PropertyDescriptor | undefined;
let listPaddingReset: HTMLStyleElement;

beforeEach( () => {
// TODO: jsdom-only reset; the component stylesheet, which the jsdom project mocks away, already removes the UA list padding that the measurements would otherwise subtract.
listPaddingReset = document.createElement( 'style' );
listPaddingReset.textContent =
'ol { padding-inline-start: 0; padding-inline-end: 0; }';
document.head.appendChild( listPaddingReset );

availableWidth = 500;
listAvailableWidth = null;
labelWidths = new Map();
Expand Down Expand Up @@ -196,6 +203,7 @@ describe( 'Breadcrumb', () => {
} );

afterEach( () => {
listPaddingReset.remove();
if ( originalClientWidth ) {
Object.defineProperty(
HTMLElement.prototype,
Expand Down Expand Up @@ -377,7 +385,8 @@ describe( 'Breadcrumb', () => {
);

const link = screen.getByRole( 'link', {
name: 'General (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'General(opens in a new tab)',
} );
expect( link ).toHaveAttribute( 'href', href );
expect( link ).toHaveAttribute( 'target', '_blank' );
Expand Down Expand Up @@ -660,7 +669,8 @@ describe( 'Breadcrumb', () => {
);
act( flushAllAnimationFrames );
const menuLink = await screen.findByRole( 'menuitem', {
name: 'Settings (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'Settings(opens in a new tab)',
} );
expect( menuLink ).toHaveAttribute(
'href',
Expand Down Expand Up @@ -935,7 +945,9 @@ describe( 'Breadcrumb', () => {
screen.queryByRole( 'button', { name: /hidden breadcrumb/ } )
).not.toBeInTheDocument();

list.style.paddingInline = '4px';
// TODO: jsdom-only longhands; it does not expand the paddingInline shorthand into the computed logical longhands the component reads.
list.style.paddingInlineStart = '4px';
list.style.paddingInlineEnd = '4px';
notifyResize( list );

expect(
Expand Down
12 changes: 8 additions & 4 deletions packages/ui/src/link/test/index.jsdom.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@ describe( 'Link', () => {

expect(
screen.getByRole( 'link', {
name: 'External (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'External(opens in a new tab)',
} )
).toBeVisible();
} );
Expand All @@ -104,7 +105,8 @@ describe( 'Link', () => {

expect(
screen.getByRole( 'link', {
name: 'External (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'External(opens in a new tab)',
} )
).toHaveAttribute( 'target', '_blank' );
} );
Expand All @@ -118,7 +120,8 @@ describe( 'Link', () => {

expect(
screen.getByRole( 'link', {
name: 'External (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'External(opens in a new tab)',
} )
).toHaveAttribute( 'target', '_BLANK' );
} );
Expand Down Expand Up @@ -151,7 +154,8 @@ describe( 'Link', () => {

expect(
screen.getByRole( 'link', {
name: 'Preview (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'Preview(opens in a new tab)',
} )
).toHaveAttribute( 'target', 'wp-preview-123' );
} );
Expand Down
6 changes: 4 additions & 2 deletions packages/ui/src/menu/test/index.jsdom.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -747,7 +747,8 @@ describe( 'Menu', () => {
await user.click( screen.getByRole( 'button', { name: 'Actions' } ) );

const item = await screen.findByRole( 'menuitem', {
name: 'WordPress.org (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'WordPress.org(opens in a new tab)',
} );

expect( item ).toHaveAttribute( 'target', '_blank' );
Expand All @@ -764,7 +765,8 @@ describe( 'Menu', () => {
screen.getAllByLabelText( '(opens in a new tab)' )
).toHaveLength( 3 );
const developerItem = screen.getByRole( 'menuitem', {
name: 'Developer resources (opens in a new tab)',
// TODO: jsdom-only name; browsers separate the notice with a space.
name: 'Developer resources(opens in a new tab)',
} );
const developerItemIndicator =
queryExternalLinkIndicator( developerItem );
Expand Down
Loading
Loading