@astryxdesign/core 0.7.1 → 0.7.2-canary.020e1fe

package/src/Typeahead/Typeahead.test.tsx

@@ -17,10 +17,20 @@ import {
   beforeAll,
   afterAll,
   beforeEach,
+  afterEach,
 } from 'vitest';
 import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {createRef, Profiler, type ProfilerOnRenderCallback} from 'react';
+import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {
+  createRef,
+  Profiler,
+  startTransition,
+  StrictMode,
+  Suspense,
+  useState,
+  type ProfilerOnRenderCallback,
+} from 'react';
 import {Typeahead} from './Typeahead';
 import {readFile} from 'node:fs/promises';
 import {resolve} from 'node:path';
@@ -70,6 +80,10 @@ afterAll(() => {
   (HTMLElement.prototype as any).matches = originalMatches;
 });
 
+afterEach(() => {
+  __resetLiveRegionsForTest();
+});
+
 // Test data
 const fruits: SearchableItem[] = [
   {id: '1', label: 'Apple'},
@@ -964,6 +978,193 @@ describe('BaseTypeahead hasEntriesOnFocus', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('clears the loading state when the search source is replaced during an in-flight load', async () => {
+    let settle: (items: SearchableItem[]) => void = () => {};
+    const bootstrap = vi.fn(
+      async () =>
+        new Promise<SearchableItem[]>(resolve => {
+          settle = resolve;
+        }),
+    );
+    const initialSource: SearchSource = {search: () => [], bootstrap};
+    const replacementSource: SearchSource = {
+      search: () => [],
+      bootstrap: () => [],
+    };
+
+    const {rerender} = render(
+      <BaseTypeahead
+        searchSource={initialSource}
+        value={null}
+        onChange={() => {}}
+        hasEntriesOnFocus
+      />,
+    );
+    const input = screen.getByRole('combobox');
+
+    fireEvent.focus(input);
+    await waitFor(() => {
+      expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+    });
+
+    rerender(
+      <BaseTypeahead
+        searchSource={replacementSource}
+        value={null}
+        onChange={() => {}}
+        hasEntriesOnFocus
+      />,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('status', {name: 'Loading'}),
+      ).not.toBeInTheDocument();
+    });
+
+    await act(async () => {
+      settle([]);
+      await Promise.resolve();
+    });
+    expect(
+      screen.queryByRole('status', {name: 'Loading'}),
+    ).not.toBeInTheDocument();
+  });
+
+  it('keeps the loading state under StrictMode for a pending autofocus bootstrap', async () => {
+    let settle: (items: SearchableItem[]) => void = () => {};
+    const bootstrap = vi.fn(
+      async () =>
+        new Promise<SearchableItem[]>(resolve => {
+          settle = resolve;
+        }),
+    );
+    render(
+      <StrictMode>
+        <Typeahead
+          label="Test"
+          searchSource={{search: () => [], bootstrap}}
+          value={null}
+          onChange={() => {}}
+          hasAutoFocus
+          hasEntriesOnFocus
+        />
+      </StrictMode>,
+    );
+
+    expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+
+    await act(async () => {
+      settle([]);
+      await Promise.resolve();
+    });
+    expect(
+      screen.queryByRole('status', {name: 'Loading'}),
+    ).not.toBeInTheDocument();
+  });
+
+  let settlePendingTransitionA: (items: SearchableItem[]) => void = () => {};
+  const stableTransitionSourceA: SearchSource = {
+    search: vi.fn(
+      async () =>
+        new Promise<SearchableItem[]>(resolve => {
+          settlePendingTransitionA = resolve;
+        }),
+    ),
+    bootstrap: () => [],
+  };
+  const stableTransitionSourceB: SearchSource = {
+    search: vi.fn(async () => []),
+    bootstrap: () => [],
+  };
+
+  it('clears loading and aria-busy when source is replaced in a transition that suspends and retries', async () => {
+    let isSuspended = false;
+    let resolveSuspension: () => void = () => {};
+    let pendingSuspension: Promise<void> | null = null;
+
+    function SuspendingSibling({shouldSuspend}: {shouldSuspend: boolean}) {
+      if (shouldSuspend && isSuspended && pendingSuspension) {
+        // eslint-disable-next-line @typescript-eslint/only-throw-error
+        throw pendingSuspension;
+      }
+      return null;
+    }
+
+    let updateState!: (source: SearchSource, shouldSuspend: boolean) => void;
+
+    function TransitionContainer() {
+      const [source, setSource] = useState<SearchSource>(
+        stableTransitionSourceA,
+      );
+      const [shouldSuspend, setShouldSuspend] = useState(false);
+      updateState = (newSource, suspend) => {
+        setSource(newSource);
+        setShouldSuspend(suspend);
+      };
+
+      return (
+        <Suspense fallback={<div>Suspended...</div>}>
+          <Typeahead
+            label="Test"
+            searchSource={source}
+            value={null}
+            onChange={() => {}}
+            debounceMs={0}
+          />
+          <SuspendingSibling shouldSuspend={shouldSuspend} />
+        </Suspense>
+      );
+    }
+
+    render(<TransitionContainer />);
+    const input = screen.getByRole('combobox');
+
+    // Trigger a load so aria-busy="true" is set on the combobox
+    fireEvent.change(input, {target: {value: 'query'}});
+    await waitFor(() => {
+      expect(input).toHaveAttribute('aria-busy', 'true');
+    });
+    expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+
+    // Create the pending promise for suspension
+    isSuspended = true;
+    pendingSuspension = new Promise<void>(resolve => {
+      resolveSuspension = () => {
+        isSuspended = false;
+        resolve();
+      };
+    });
+
+    // Inside startTransition, switch from source A to source B while sibling suspends
+    act(() => {
+      startTransition(() => {
+        updateState(stableTransitionSourceB, true);
+      });
+    });
+
+    // The render suspended, so the previous committed state remains
+    expect(input).toHaveAttribute('aria-busy', 'true');
+
+    // Resolve the pending promise and let the transition commit
+    await act(async () => {
+      resolveSuspension();
+      await pendingSuspension;
+    });
+
+    // Settle the abandoned load
+    await act(async () => {
+      settlePendingTransitionA([]);
+      await Promise.resolve();
+    });
+
+    // The combobox must not keep aria-busy and the spinner must be gone
+    expect(input).not.toHaveAttribute('aria-busy');
+    expect(
+      screen.queryByRole('status', {name: 'Loading'}),
+    ).not.toBeInTheDocument();
+  });
+
   it('shows bootstrap results on mouse click', async () => {
     render(
       <BaseTypeahead
@@ -1323,6 +1524,63 @@ describe('BaseTypeahead hasSearched reset', () => {
     // "No results found" should disappear since hasSearched is reset
     expect(screen.queryByText('No results found')).not.toBeInTheDocument();
   });
+
+  it('resets hasSearched and does not announce "No results found" when search source is replaced during a pending search', async () => {
+    let settle: (items: SearchableItem[]) => void = () => {};
+    const initialSource: SearchSource = {
+      search: vi.fn(
+        async () =>
+          new Promise<SearchableItem[]>(resolve => {
+            settle = resolve;
+          }),
+      ),
+      bootstrap: () => [],
+    };
+    const replacementSource: SearchSource = {
+      search: vi.fn(async () => []),
+      bootstrap: () => [],
+    };
+
+    const {rerender} = render(
+      <BaseTypeahead
+        searchSource={initialSource}
+        value={null}
+        onChange={() => {}}
+        debounceMs={0}
+      />,
+    );
+    const input = screen.getByRole('combobox');
+
+    // Type a query that starts an asynchronous search
+    fireEvent.change(input, {target: {value: 'abc'}});
+    expect(initialSource.search).toHaveBeenCalledWith('abc');
+
+    // Replace the search source while the search is still pending
+    rerender(
+      <BaseTypeahead
+        searchSource={replacementSource}
+        value={null}
+        onChange={() => {}}
+        debounceMs={0}
+      />,
+    );
+
+    // Settle the abandoned search
+    await act(async () => {
+      settle([]);
+      await Promise.resolve();
+    });
+
+    await act(
+      async () =>
+        new Promise<void>(resolve => requestAnimationFrame(() => resolve())),
+    );
+    expect(
+      document.querySelector('[data-astryx-live-region="polite"]')
+        ?.textContent ?? '',
+    ).not.toContain('No results found');
+    expect(screen.queryByText('No results found')).not.toBeInTheDocument();
+  });
 });
 
 describe('BaseTypeahead popover after selection', () => {
@@ -2313,7 +2571,7 @@ describe('Typeahead consumer key handler order', () => {
       currentTarget = event.currentTarget;
       event.preventDefault();
     });
-    const {container} = render(
+    render(
       <Typeahead
         label="Fruit"
         searchSource={fruitSource}

package/src/docPropLiterals.test.ts

@@ -3,7 +3,8 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 /**
  * @file Guards doc prop types against opaque named unions (#1645).
- * @input Every {Name}.doc.mjs plus the TypeScript sources they describe.
+ * @input Every {Name}.doc.mjs plus the TypeScript sources they describe,
+ *   including same-file private aliases used by exported literal unions.
  * @output Fails when a documented prop type hides its legal literal values.
  * @position Repo-wide doc-shape guard, sibling of docPropReferences.test.ts.
  *
@@ -188,18 +189,34 @@ for (const file of findFiles(SRC_DIR, ['.ts', '.tsx'])) {
   // markers the comment-stripped `src` has already removed.
   const rawTypeRhs = new Map<string, string>();
   for (const m of raw.matchAll(
-    /export type ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
+    /\btype ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
   )) {
     rawTypeRhs.set(m[1], m[2]);
   }
-  for (const m of src.matchAll(
-    /export type ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
-  )) {
-    const [, name, rhsRaw] = m;
-    const rhs = rhsRaw.replace(/\s+/g, ' ').trim();
-    if (LITERAL_UNION.test(rhs)) {
+  const declarations = [
+    ...src.matchAll(
+      /\b(export )?type ([A-Z][A-Za-z0-9]*)(?:<[^>]*>)?\s*=\s*([^;]+);/g,
+    ),
+  ];
+  // Resolve same-file literal aliases before registering exported types.
+  // Repeat until no new literal unions are found.
+  const fileLiterals = new Map<string, string>();
+  let previousSize: number;
+  do {
+    previousSize = fileLiterals.size;
+    for (const [, , name, rhsRaw] of declarations) {
+      const rhs = rhsRaw
+        .replace(/\s+/g, ' ')
+        .trim()
+        .split('|')
+        .map(part => fileLiterals.get(part.trim()) ?? part.trim())
+        .join(' | ');
+
+      if (!LITERAL_UNION.test(rhs)) {
+        continue;
+      }
       const deprecated = deprecatedLiteralMembers(rawTypeRhs.get(name) ?? '');
-      literalUnions.set(
+      fileLiterals.set(
         name,
         rhs
           .replace(/^\|\s*/, '')
@@ -209,8 +226,17 @@ for (const file of findFiles(SRC_DIR, ['.ts', '.tsx'])) {
           .filter(member => !deprecated.has(member))
           .join(' | '),
       );
+    }
+  } while (fileLiterals.size !== previousSize);
+  for (const [, exported, name, rhsRaw] of declarations) {
+    if (!exported) {
+      continue;
+    }
+    const literals = fileLiterals.get(name);
+    if (literals !== undefined) {
+      literalUnions.set(name, literals);
     } else {
-      namedBodies.set(name, rhs);
+      namedBodies.set(name, rhsRaw.replace(/\s+/g, ' ').trim());
     }
   }
   for (const m of src.matchAll(

package/src/hooks/useEntryAnimation.doc.mjs

@@ -18,12 +18,12 @@ export const docs = {
     {
       name: 'entryStyle',
       type: 'StyleXStyles | null',
-      description: 'A StyleX style object for the entry animation, or null if the element was rendered on initial page load (no animation needed).',
+      description: 'A StyleX style object for the entry animation, or null if the element was rendered on initial page load or hydrated from server HTML (no animation needed).',
     },
   ],
   usage: {
     description:
-      'Returns a StyleX style for animating an element on mount. Only animates when the element is dynamically inserted after the initial page paint; elements rendered on page load are not animated. Uses Astryx motion tokens (duration, easing) for consistent animation timing. Requires "use client"; does not support SSR.',
+      'Returns a StyleX style for animating an element on mount. Only animates when the element is dynamically inserted after the initial page paint; elements rendered on page load are not animated. Uses Astryx motion tokens (duration, easing) for consistent animation timing. Server-rendered elements hydrate without the entry style and never animate; elements mounted after hydration animate.',
     bestPractices: [
       { guidance: true, description: 'Use for conditionally rendered elements like validation messages, toasts, or expanding sections.' },
       { guidance: true, description: 'Spread the returned style into stylex.props() alongside other styles.' },
@@ -39,7 +39,7 @@ export const docs = {
 /** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
-    'Returns StyleX style for animating element on mount. Only animates when element dynamically inserted after initial page paint; elements rendered on page load not animated. Uses Astryx motion tokens (duration, easing) for consistent timing. Requires "use client"; does not support SSR.',
+    'Returns StyleX style for animating element on mount. Only animates when element dynamically inserted after initial page paint; elements rendered on page load not animated. Uses Astryx motion tokens (duration, easing) for consistent timing. Server-rendered elements hydrate without entry style, never animate; elements mounted after hydration animate.',
   paramDescriptions: {
     preset: 'animation preset applied on mount.',
   },
@@ -48,7 +48,7 @@ export const docsDense = {
   },
   usage: {
     description:
-      'Returns StyleX style for animating element on mount. Only animates when element dynamically inserted after initial page paint; elements rendered on page load not animated. Uses Astryx motion tokens (duration, easing) for consistent timing. Requires "use client"; does not support SSR.',
+      'Returns StyleX style for animating element on mount. Only animates when element dynamically inserted after initial page paint; elements rendered on page load not animated. Uses Astryx motion tokens (duration, easing) for consistent timing. Server-rendered elements hydrate without entry style, never animate; elements mounted after hydration animate.',
     bestPractices: [
       { guidance: true, description: 'Use for conditionally rendered elements like validation messages, toasts, expanding sections.' },
       { guidance: true, description: 'Spread returned style into stylex.props() alongside other styles.' },

package/src/hooks/useEntryAnimation.ssr.test.tsx

@@ -0,0 +1,143 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useEntryAnimation.ssr.test.tsx
+ * @input FieldStatus server markup, React hydration, and client mounts
+ * @output Proves server-rendered entry-animated elements hydrate without mismatches
+ * @position SSR acceptance test for useEntryAnimation
+ */
+
+import {act, useState} from 'react';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {createRoot, hydrateRoot} from 'react-dom/client';
+import {renderToString} from 'react-dom/server';
+
+// Each test imports a fresh copy of FieldStatus with the hook's first-frame
+// callback held back, so server markup renders before the page "paints" (as on
+// a real server) and `paint()` then runs that frame.
+async function importFieldStatus() {
+  const frames: FrameRequestCallback[] = [];
+  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) =>
+    frames.push(callback),
+  );
+  vi.resetModules();
+  const {FieldStatus} = await import('../FieldStatus');
+  vi.unstubAllGlobals();
+  const paint = () => {
+    frames.splice(0).forEach(callback => callback(performance.now()));
+  };
+  return {FieldStatus, paint};
+}
+
+function mountServerHTML(html: string): HTMLDivElement {
+  const container = document.createElement('div');
+  container.innerHTML = html;
+  document.body.appendChild(container);
+  return container;
+}
+
+function classesOf(element: Element | null): string[] {
+  return (element?.getAttribute('class') ?? '').split(/\s+/).filter(Boolean);
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  document.body.replaceChildren();
+});
+
+describe('useEntryAnimation — SSR', () => {
+  it('hydrates server-rendered FieldStatus after the first paint without a mismatch', async () => {
+    const {FieldStatus, paint} = await importFieldStatus();
+    const tree = <FieldStatus type="error" message="x" />;
+    const serverHTML = renderToString(tree);
+    const container = mountServerHTML(serverHTML);
+    const serverClassName = container.firstElementChild?.className;
+    paint();
+
+    const consoleError = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const recoverableErrors: unknown[] = [];
+    let root!: ReturnType<typeof hydrateRoot>;
+    await act(async () => {
+      root = hydrateRoot(container, tree, {
+        onRecoverableError: error => recoverableErrors.push(error),
+      });
+    });
+
+    expect(
+      consoleError.mock.calls.filter(call =>
+        String(call[0] ?? '')
+          .toLowerCase()
+          .includes('hydrat'),
+      ),
+    ).toEqual([]);
+    expect(recoverableErrors).toEqual([]);
+    expect(container.firstElementChild?.className).toBe(serverClassName);
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+
+  it('still animates a client-only mount after the first paint', async () => {
+    const {FieldStatus, paint} = await importFieldStatus();
+    const staticClasses = classesOf(
+      mountServerHTML(renderToString(<FieldStatus type="error" message="x" />))
+        .firstElementChild,
+    );
+    paint();
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(<FieldStatus type="error" message="x" />);
+    });
+
+    const clientClasses = classesOf(container.firstElementChild);
+    expect(clientClasses).toEqual(expect.arrayContaining(staticClasses));
+    expect(clientClasses.length).toBeGreaterThan(staticClasses.length);
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+
+  it('animates a FieldStatus mounted after hydration', async () => {
+    const {FieldStatus, paint} = await importFieldStatus();
+    let showSecond!: () => void;
+    function Form() {
+      const [second, setSecond] = useState(false);
+      showSecond = () => setSecond(true);
+      return (
+        <>
+          <FieldStatus type="error" message="first" />
+          {second ? <FieldStatus type="error" message="second" /> : null}
+        </>
+      );
+    }
+    const container = mountServerHTML(renderToString(<Form />));
+    const staticClasses = classesOf(container.firstElementChild);
+    paint();
+
+    let root!: ReturnType<typeof hydrateRoot>;
+    await act(async () => {
+      root = hydrateRoot(container, <Form />);
+    });
+    await act(async () => {
+      showSecond();
+    });
+
+    const mounted = container.children[1] ?? null;
+    expect(mounted).toHaveTextContent('second');
+    const mountedClasses = classesOf(mounted);
+    expect(mountedClasses).toEqual(expect.arrayContaining(staticClasses));
+    expect(mountedClasses.length).toBeGreaterThan(staticClasses.length);
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+});

package/src/hooks/useEntryAnimation.ts

@@ -3,29 +3,27 @@
 'use client';
 /**
  * @file useEntryAnimation.ts
- * @input Uses React, StyleX, theme tokens
+ * @input Uses React, StyleX, theme tokens, useIsHydrating
  * @output Exports useEntryAnimation hook for mount-only entry animations
  * @position Hook utility; consumed by FieldStatus and available to consumers
  *
  * Provides entry animations for conditionally rendered elements.
  * Only animates when the element is dynamically mounted after the initial
  * page paint — statically rendered elements on page load are not animated.
+ * Server-rendered elements hydrate without the entry style and never play it
+ * (spec:AST-013 FR13).
  */
 
 import {useState} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {durationVars, easeVars, spacingVars} from '../theme/tokens.stylex';
+import {useIsHydrating} from './useIsHydrating';
 
-// Track whether the initial page paint has completed.
-// Elements rendered on page load should not animate;
-// only dynamically inserted ones should.
-//
-// NOTE: This module is marked 'use client' so it never runs on the server.
-// If the directive is removed, this flag will always be false during SSR,
-// and useState(() => initialPaintComplete) will capture false — meaning
-// animations won't run after hydration. Keep 'use client' or add an
-// effect-based fallback if SSR support is needed.
+// Track whether the initial page paint has completed, so elements a
+// client-only root renders on page load do not animate; only dynamically
+// inserted ones should. Server-rendered elements are covered by
+// useIsHydrating instead: hydration can run after this flag turns true.
 let initialPaintComplete = false;
 if (typeof window !== 'undefined') {
   requestAnimationFrame(() => {
@@ -99,16 +97,14 @@ const styles = stylex.create({
 });
 
 export type EntryAnimationPreset =
-  | 'slideDown'
-  | 'slideUp'
-  | 'fadeIn'
-  | 'scaleIn';
+  'slideDown' | 'slideUp' | 'fadeIn' | 'scaleIn';
 
 /**
  * Returns a StyleX style for animating an element on mount.
  *
  * Only animates when the element is dynamically inserted after the initial
- * page paint. Elements rendered on page load are not animated.
+ * page paint. Elements rendered on page load, including server-rendered
+ * elements while they hydrate, are not animated.
  *
  * @example
  * ```
@@ -119,6 +115,9 @@ export type EntryAnimationPreset =
 export function useEntryAnimation(
   preset: EntryAnimationPreset = 'slideDown',
 ): StyleXStyles | null {
-  const [animate] = useState(() => initialPaintComplete);
+  const isHydrating = useIsHydrating();
+  // Captured once: a hydrated element must not start animating when React
+  // re-renders it with the client snapshot after hydration.
+  const [animate] = useState(() => !isHydrating && initialPaintComplete);
   return animate ? styles[preset] : null;
 }

package/src/hooks/useIsHydrating.test.tsx

@@ -0,0 +1,70 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useIsHydrating.test.tsx
+ * @input useIsHydrating, React server render, hydration, and client roots
+ * @output Proves the hook is true only on the server and while hydrating
+ * @position Unit test for the internal hydration-state utility
+ */
+
+import {act, useState} from 'react';
+import {afterEach, describe, expect, it} from 'vitest';
+import {createRoot, hydrateRoot} from 'react-dom/client';
+import {renderToString} from 'react-dom/server';
+import {useIsHydrating} from './useIsHydrating';
+
+const seen: boolean[] = [];
+
+function Probe() {
+  const isHydrating = useIsHydrating();
+  seen.push(isHydrating);
+  return <span data-hydrating={String(isHydrating)} />;
+}
+
+afterEach(() => {
+  seen.length = 0;
+  document.body.replaceChildren();
+});
+
+describe('useIsHydrating', () => {
+  it('is true on the server', () => {
+    expect(renderToString(<Probe />)).toContain('data-hydrating="true"');
+  });
+
+  it('is true while hydrating, then false after hydration', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = renderToString(<Probe />);
+    document.body.appendChild(container);
+    seen.length = 0;
+
+    let root!: ReturnType<typeof hydrateRoot>;
+    await act(async () => {
+      root = hydrateRoot(container, <Probe />);
+    });
+
+    expect(seen[0]).toBe(true);
+    expect(seen.at(-1)).toBe(false);
+    expect(container.querySelector('span')).toHaveAttribute(
+      'data-hydrating',
+      'false',
+    );
+    await act(async () => root.unmount());
+  });
+
+  it('is false in a client-only root and for elements mounted after hydration', async () => {
+    let show!: () => void;
+    function Later() {
+      const [isShown, setIsShown] = useState(false);
+      show = () => setIsShown(true);
+      return isShown ? <Probe /> : null;
+    }
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    await act(async () => root.render(<Later />));
+    await act(async () => show());
+
+    expect(seen).toEqual([false]);
+    await act(async () => root.unmount());
+  });
+});