@gluonjs/test-utils / packages/test-utils/src / ComponentMountOptions

Interface: ComponentMountOptions<Props>

Extends

BaseMountOptions

Type Parameters

Props

Props extends object

Properties

attachTo?

readonly optional attachTo?: Element

Inherited from

BaseMountOptions.attachTo

container?

readonly optional container?: Element

Inherited from

BaseMountOptions.container

name?

readonly optional name?: string

Inherited from

BaseMountOptions.name

plugins?

readonly optional plugins?: readonly (GluonAppPlugin<void> | TestPluginUse)[]

Inherited from

BaseMountOptions.plugins

props

readonly props: Props

providers?

readonly optional providers?: readonly TestProvider<unknown>[]

Inherited from

BaseMountOptions.providers

setup?

readonly optional setup?: (app) => void

Parameters

app

GluonApp

Returns

void

Inherited from

BaseMountOptions.setup

Example

Configure the initial typed props and fixture identity used when mounting a functional component under test:

import { html } from '@gluonjs/core';
import {
  mountComponent,
  renderFixture,
  type ComponentMountOptions,
  type FixtureEventRecord,
} from '@gluonjs/test-utils';

type CounterProps = { count: number; save(value: number): void };
const options = {
  name: 'counter',
  props: { count: 1, save: (value: number) => console.log(value) },
} satisfies ComponentMountOptions<CounterProps>;
const counter = mountComponent(
  ({ count, save }: CounterProps) => html`<button @click=${() => save(count)}>${count}</button>`,
  options,
);
await counter.setProps({ count: 2 });
counter.get<HTMLButtonElement>('button').click();

const event = { name: 'save', event: new CustomEvent('save', { detail: 2 }) } satisfies FixtureEventRecord;
const staticFixture = renderFixture(() => html`<p>${event.name}</p>`);
console.log(counter.text(), staticFixture.text());
staticFixture.cleanup();
counter.cleanup();