import * as ReactDOMClient from 'react-dom/client'; import { RenderOptions, RenderHookOptions } from '@testing-library/react/pure.js'; import { queries, Queries, prettyFormat, BoundFunction as BoundFunction$1, Screen } from '@testing-library/dom'; import React$1 from 'react'; declare const assertableSymbol: unique symbol; /** * A function or object that can be used in assertions, like e.g. ```ts expect(assertable).toRerender() expect(assertable).not.toRerender() expect(assertable).toRenderExactlyTimes(3) ``` */ type Assertable = { [assertableSymbol]: RenderStream; }; type OriginalQueries = typeof queries; type SyncQueries = { [K in keyof OriginalQueries as K extends `${'find'}${string}` ? never : K]: OriginalQueries[K]; }; declare const syncQueries: SyncQueries; type BoundFunction = T extends (container: HTMLElement, ...args: infer P) => infer R ? (...args: P) => R : never; type BoundSyncFunctions = Q extends typeof syncQueries ? { getByLabelText(...args: Parameters>>): ReturnType>; getAllByLabelText(...args: Parameters>>): ReturnType>; queryByLabelText(...args: Parameters>>): ReturnType>; queryAllByLabelText(...args: Parameters>>): ReturnType>; getByPlaceholderText(...args: Parameters>>): ReturnType>; getAllByPlaceholderText(...args: Parameters>>): ReturnType>; queryByPlaceholderText(...args: Parameters>>): ReturnType>; queryAllByPlaceholderText(...args: Parameters>>): ReturnType>; getByText(...args: Parameters>>): ReturnType>; getAllByText(...args: Parameters>>): ReturnType>; queryByText(...args: Parameters>>): ReturnType>; queryAllByText(...args: Parameters>>): ReturnType>; getByAltText(...args: Parameters>>): ReturnType>; getAllByAltText(...args: Parameters>>): ReturnType>; queryByAltText(...args: Parameters>>): ReturnType>; queryAllByAltText(...args: Parameters>>): ReturnType>; getByTitle(...args: Parameters>>): ReturnType>; getAllByTitle(...args: Parameters>>): ReturnType>; queryByTitle(...args: Parameters>>): ReturnType>; queryAllByTitle(...args: Parameters>>): ReturnType>; getByDisplayValue(...args: Parameters>>): ReturnType>; getAllByDisplayValue(...args: Parameters>>): ReturnType>; queryByDisplayValue(...args: Parameters>>): ReturnType>; queryAllByDisplayValue(...args: Parameters>>): ReturnType>; getByRole(...args: Parameters>>): ReturnType>; getAllByRole(...args: Parameters>>): ReturnType>; queryByRole(...args: Parameters>>): ReturnType>; queryAllByRole(...args: Parameters>>): ReturnType>; getByTestId(...args: Parameters>>): ReturnType>; getAllByTestId(...args: Parameters>>): ReturnType>; queryByTestId(...args: Parameters>>): ReturnType>; queryAllByTestId(...args: Parameters>>): ReturnType>; } & { [P in keyof Q]: BoundFunction; } : { [P in keyof Q]: BoundFunction; }; type AsyncRenderResult = { container: Container; baseElement: BaseElement; debug: (baseElement?: ReactDOMClient.Container | Array | undefined, maxLength?: number | undefined, options?: prettyFormat.OptionsReceived | undefined) => void; rerender: (rerenderUi: React$1.ReactNode) => Promise; unmount: () => void; asFragment: () => DocumentFragment; } & { [P in keyof Q]: BoundFunction$1; }; type RenderWithoutActAsync = { (this: any, ui: React$1.ReactNode, options: Pick, 'container' | 'baseElement' | 'queries' | 'wrapper'>): Promise>; (this: any, ui: React$1.ReactNode, options?: Pick | undefined): Promise>; }; declare function cleanup(): void; interface BaseRender { id: string; phase: 'mount' | 'update' | 'nested-update'; actualDuration: number; baseDuration: number; startTime: number; commitTime: number; /** * The number of renders that have happened so far (including this render). */ count: number; } type SyncScreen = BoundSyncFunctions & Pick; interface Render extends BaseRender { /** * The snapshot, as returned by the `takeSnapshot` option of `createRenderStream`. */ snapshot: Snapshot; /** * A DOM snapshot of the rendered component, if the `snapshotDOM` * option of `createRenderStream` was enabled. */ readonly domSnapshot: HTMLElement; /** * Returns a callback to receive a `screen` instance that is scoped to the * DOM snapshot of this `Render` instance. * Note: this is used as a callback to prevent linter errors. * @example * ```diff * const { withinDOM } = RenderedComponent.takeRender(); * -expect(screen.getByText("foo")).toBeInTheDocument(); * +expect(withinDOM().getByText("foo")).toBeInTheDocument(); * ``` */ withinDOM: () => SyncScreen; renderedComponents: Array; } type ValidSnapshot = void | (object & { call?: never; }); interface NextRenderOptions { timeout?: number; } interface ReplaceSnapshot { (newSnapshot: Snapshot): void; (updateSnapshot: (lastSnapshot: Readonly) => Snapshot): void; } interface MergeSnapshot { (partialSnapshot: Partial): void; (updatePartialSnapshot: (lastSnapshot: Readonly) => Partial): void; } interface RenderStream { mergeSnapshot: MergeSnapshot; replaceSnapshot: ReplaceSnapshot; /** * An array of all renders that have happened so far. * Errors thrown during component render will be captured here, too. */ renders: Array | { phase: 'snapshotError'; count: number; error: unknown; }>; /** * Peeks the next render from the current iterator position, without advancing the iterator. * If no render has happened yet, it will wait for the next render to happen. * @throws {WaitForRenderTimeoutError} if no render happens within the timeout */ peekRender: (options?: NextRenderOptions) => Promise>; /** * Iterates to the next render and returns it. * If no render has happened yet, it will wait for the next render to happen. * @throws {WaitForRenderTimeoutError} if no render happens within the timeout */ takeRender: Assertable & ((options?: NextRenderOptions) => Promise>); /** * Returns the total number of renders. */ totalRenderCount: () => number; /** * Returns the current render. * @throws {Error} if no render has happened yet */ getCurrentRender: () => Render; /** * Waits for the next render to happen. * Does not advance the render iterator. */ waitForNextRender: (options?: NextRenderOptions) => Promise>; } interface RenderStreamWithRenderFn extends RenderStream { render: RenderWithoutActAsync; } type RenderStreamOptions = { onRender?: (info: BaseRender & { snapshot: Snapshot; replaceSnapshot: ReplaceSnapshot; mergeSnapshot: MergeSnapshot; }) => void; snapshotDOM?: boolean; initialSnapshot?: Snapshot; /** * This will skip renders during which no renders tracked by * `useTrackRenders` occured. */ skipNonTrackingRenders?: boolean; queries?: Q; }; declare class WaitForRenderTimeoutError extends Error { constructor(); } declare function createRenderStream({ onRender, snapshotDOM, initialSnapshot, skipNonTrackingRenders, queries, }?: RenderStreamOptions): RenderStreamWithRenderFn; declare function useTrackRenders({ name }?: { name?: string; }): void; interface SnapshotStream extends Assertable { /** * An array of all renders that have happened so far. * Errors thrown during component render will be captured here, too. */ renders: Array | { phase: 'snapshotError'; count: number; error: unknown; }>; /** * Peeks the next render from the current iterator position, without advancing the iterator. * If no render has happened yet, it will wait for the next render to happen. * @throws {WaitForRenderTimeoutError} if no render happens within the timeout */ peekSnapshot(options?: NextRenderOptions): Promise; /** * Iterates to the next render and returns it. * If no render has happened yet, it will wait for the next render to happen. * @throws {WaitForRenderTimeoutError} if no render happens within the timeout */ takeSnapshot: Assertable & ((options?: NextRenderOptions) => Promise); /** * Returns the total number of renders. */ totalSnapshotCount(): number; /** * Returns the current render. * @throws {Error} if no render has happened yet */ getCurrentSnapshot(): Snapshot; /** * Waits for the next render to happen. * Does not advance the render iterator. */ waitForNextSnapshot(options?: NextRenderOptions): Promise; rerender: (rerenderCallbackProps: VoidOptionalArg) => Promise; unmount: () => void; } /** * if `Arg` can be `undefined`, replace it with `void` to make type represent an optional argument in a function argument position */ type VoidOptionalArg = Arg extends any ? undefined extends Arg ? void : Arg : Arg; declare function renderHookToSnapshotStream(renderCallback: (props: Props) => ReturnValue, { initialProps, ...renderOptions }?: RenderHookOptions): Promise>; interface DisableActEnvironmentOptions { /** * If `true`, all modifications of values set by `disableActEnvironment` * will be prevented until `cleanup` is called. * * @default true */ preventModification?: boolean; /** * If `true`, will change the configuration of the testing library to * prevent auto-wrapping e.g. `userEvent` calls in `act`. * * @default true */ adjustTestingLibConfig?: boolean; } /** * Helper to temporarily disable a React 18+ act environment. * * By default, this also adjusts the configuration of @testing-library/dom * to prevent auto-wrapping of user events in `act`, as well as preventing * all modifications of values set by this method until `cleanup` is called * or the returned `Disposable` is disposed of. * * Both of these behaviors can be disabled with the option, of the defaults * can be changed for all calls to this method by modifying * `disableActEnvironment.defaultOptions`. * * This returns a disposable and can be used in combination with `using` to * automatically restore the state from before this method call after your test. * * @example * ```ts * test("my test", () => { * using _disabledAct = disableActEnvironment(); * * // your test code here * * // as soon as this scope is left, the environment will be cleaned up * }) * ``` * * If you can not use the explicit resouce management keyword `using`, * you can also manually call `cleanup`: * * @example * ```ts * test("my test", () => { * const { cleanup } = disableActEnvironment(); * * try { * // your test code here * } finally { * cleanup(); * } * }) * ``` * * For more context on what `act` is and why you shouldn't use it in renderStream tests, * https://github.com/reactwg/react-18/discussions/102 is probably the best resource we have. */ declare function disableActEnvironment({ preventModification, adjustTestingLibConfig, }?: DisableActEnvironmentOptions): { cleanup: () => void; } & Disposable; declare namespace disableActEnvironment { var defaultOptions: Required; } export { type Assertable, type RenderWithoutActAsync as AsyncRenderFn, type DisableActEnvironmentOptions, type NextRenderOptions, type Render, type RenderStream, type RenderStreamOptions, type RenderStreamWithRenderFn, type SnapshotStream, type SyncScreen, WaitForRenderTimeoutError, cleanup, createRenderStream, disableActEnvironment, renderHookToSnapshotStream, useTrackRenders };