GLUON / DOCS Playground

@gluonjs/test-utils

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

Interface: HydratedSsrFixture<Hydrated>

Extends

Type Parameters

Hydrated

Hydrated

Properties

active

readonly active: boolean

container

readonly container: HTMLElement

Inherited from

HydrationFixtureContext.container

document

readonly document: Document

Inherited from

HydrationFixtureContext.document

hydrated

readonly hydrated: Hydrated

name

readonly name: string

server

readonly server: SsrFixture

stateRoot

readonly stateRoot: HTMLElement

Inherited from

HydrationFixtureContext.stateRoot

Methods

cleanup()

cleanup(): Promise<void>

Returns

Promise<void>

get()

get<ElementType>(selector): ElementType

Type Parameters

ElementType

ElementType extends Element = Element

Parameters

selector

string

Returns

ElementType

query()

query<ElementType>(selector): ElementType | null

Type Parameters

ElementType

ElementType extends Element = Element

Parameters

selector

string

Returns

ElementType | null

text()

text(): string

Returns

string

Example

Use black-box DOM queries, hydration output, ownership state, and cleanup from one paired SSR fixture:

ts
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;