hydrated

tcmts.cli.test.browser.hydrated · #brk7pxky · term · runs anywhere

Wait until React has taken over (hydrated or rendered) the page's #app, its effects included: before that, clicks do nothing, or nothing the app's (a link useAppLinks follows, whose handler an effect adds, loads the next page). React is on the root as soon as it starts, and on what's in it once it has rendered it (not the scripts and styles it puts first, which it leaves to the browser); its effects run after the next frame.

import type { Page } from "#codebase/tcmts/cli/test/browser";

export const hydrated = async (page: Page) =>
  (await page.waitFor<boolean>(
    `(() => { const app = document.getElementById("app"); const has = (n, p) => !!n && Object.keys(n).some((k) => k.startsWith(p)); const first = [...(app?.children ?? [])].find((c) => !/^(SCRIPT|LINK|STYLE|META|TITLE)$/.test(c.tagName)); return has(app, "__reactContainer") && (!first || has(first, "__reactFiber")); })()`,
    (v) => !!v,
  )) &&
  (await page.evaluate<boolean>(
    "new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(() => r(true)))))",
  ))

uses

used by