From 99e161c67ba610d1127ce6f236abd52f7b7fbd28 Mon Sep 17 00:00:00 2001 From: Trevor Burnham Date: Sat, 15 Aug 2026 19:16:07 -0400 Subject: [PATCH] chore: Allow Portal's hidden SSR placeholder in the SSR test The SSR test asserts that modal and tooltip emit no server markup at all, because Portal returns null on the server. component-toolkit#249 makes Portal render its hidden placeholder span during SSR so that the server markup matches the first client render, which would break that assertion. Assert what the test actually cares about instead: the portaled content is not in the server markup, and whatever is emitted is either nothing or the hidden placeholder. Passes both before and after that change. --- src/__tests__/functional-tests/ssr.test.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/__tests__/functional-tests/ssr.test.ts b/src/__tests__/functional-tests/ssr.test.ts index ba5d1f0150..4c3db1387d 100644 --- a/src/__tests__/functional-tests/ssr.test.ts +++ b/src/__tests__/functional-tests/ssr.test.ts @@ -24,6 +24,14 @@ afterEach(() => { const vrOnlyComponents = ['app-layout-toolbar']; +// Components whose entire tree is rendered through a portal. The server renderer has no +// container to portal into, so none of their content reaches the server markup. Portal +// itself renders a hidden placeholder element in its place, so that the markup matches +// the first client render and hydration succeeds; the client replaces it on the first +// commit. Older component-toolkit versions emit nothing at all, hence the optional match. +const portaledComponents = ['modal', 'tooltip']; +const emptyOrHiddenPlaceholder = /^(<\/span>)?$/; + test('ensure is it not DOM', () => { expect(typeof window).toBe('undefined'); expect(typeof CSS).toBe('undefined'); @@ -34,9 +42,9 @@ for (const componentName of getAllComponents().filter(component => vrOnlyCompone const { default: Component } = requireComponent(componentName); const props = getRequiredPropsForComponent(componentName); const content = renderToStaticMarkup(React.createElement(Component, props, 'test content')); - if (componentName === 'modal' || componentName === 'tooltip') { - // modal and tooltip use portal API which does not work on server and returns an empty content - expect(content.length).toEqual(0); + if (portaledComponents.indexOf(componentName) !== -1) { + expect(content).not.toContain('test content'); + expect(content).toMatch(emptyOrHiddenPlaceholder); } else { expect(content.length).toBeGreaterThan(0); }