@gluonjs/test-utils / packages/test-utils/src/ssr / HydrationFixtureContext

Interface: HydrationFixtureContext

Extended by

HydratedSsrFixture

Properties

container

readonly container: HTMLElement

document

readonly document: Document

stateRoot

readonly stateRoot: HTMLElement

Example

Receive the installed server container, serialized-state root, and exact document in an application hydration callback:

import type { SsrRequestResult } from '@gluonjs/ssr';
import {
  activeSsrFixtureNames,
  assertNoSsrFixtureLeaks,
  cleanupSsrFixtures,
  hydrateSsrFixture,
  renderSsrFixture,
  type HydratedSsrFixture,
  type HydrateSsrFixtureOptions,
  type HydrationFixtureContext,
  type RenderSsrFixtureOptions,
  type SsrFixture,
} from '@gluonjs/test-utils/ssr';

async function verifyShopRequest(render: () => Promise<SsrRequestResult>) {
  const renderOptions = { name: 'shop-product' } satisfies RenderSsrFixtureOptions;
  const server: SsrFixture = await renderSsrFixture(render, renderOptions);
  const options = {
    hydrate: async (context: HydrationFixtureContext) => ({
      retained: context.container.querySelector('#product-title') !== null,
    }),
    dispose: () => undefined,
  } satisfies HydrateSsrFixtureOptions<{ retained: boolean }>;
  const fixture: HydratedSsrFixture<{ retained: boolean }> = await hydrateSsrFixture(server, options);
  console.log(server.contains('Orbit Lamp'), fixture.hydrated.retained, activeSsrFixtureNames());
  await fixture.cleanup();
  await cleanupSsrFixtures();
  assertNoSsrFixtureLeaks();
}
void verifyShopRequest;