diff --git a/src/react/hooks/__tests__/useLoadableQuery.test.tsx b/src/react/hooks/__tests__/useLoadableQuery.test.tsx index c6eace842a9..ad44e5a4dc6 100644 --- a/src/react/hooks/__tests__/useLoadableQuery.test.tsx +++ b/src/react/hooks/__tests__/useLoadableQuery.test.tsx @@ -1,11 +1,5 @@ import React, { Suspense, useState } from "react"; -import { - act, - screen, - renderHook, - waitFor, - renderAsync, -} from "@testing-library/react"; +import { act, screen, renderHook, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary"; import { expectTypeOf } from "expect-type"; @@ -56,6 +50,7 @@ import { setupPaginatedCase, setupSimpleCase, spyOnConsole, + renderAsync, } from "../../../testing/internal"; import { diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 217afd8b637..4a01dbc4303 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -7,7 +7,6 @@ import { RenderHookOptions, renderHookAsync, renderHook, - renderAsync, } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { ErrorBoundary, FallbackProps } from "react-error-boundary"; @@ -59,6 +58,7 @@ import { setupPaginatedCase, spyOnConsole, actAsync, + renderAsync, } from "../../../testing/internal"; import { diff --git a/src/testing/internal/index.ts b/src/testing/internal/index.ts index b208aac347c..a081fad2854 100644 --- a/src/testing/internal/index.ts +++ b/src/testing/internal/index.ts @@ -26,3 +26,4 @@ export { createClientWrapper, } from "./renderHelpers.js"; export { actAsync } from "./rtl/actAsync.js"; +export { renderAsync } from "./rtl/renderAsync.js"; diff --git a/src/testing/internal/rtl/renderAsync.ts b/src/testing/internal/rtl/renderAsync.ts new file mode 100644 index 00000000000..15990a694d5 --- /dev/null +++ b/src/testing/internal/rtl/renderAsync.ts @@ -0,0 +1,35 @@ +import type { queries, Queries } from "@testing-library/dom"; +import type { RenderOptions, RenderResult } from "@testing-library/react"; +import { act, render } from "@testing-library/react"; +import type * as ReactDOMClient from "react-dom/client"; + +// This is a helper required for React 19 testing. +// There are currently multiple directions this could play out in RTL and none of +// them has been released yet, so we are inling this helper for now. +// See https://github.com/testing-library/react-testing-library/pull/1214 +// and https://github.com/testing-library/react-testing-library/pull/1365 +// + +type RendererableContainer = ReactDOMClient.Container; +type HydrateableContainer = Parameters< + (typeof ReactDOMClient)["hydrateRoot"] +>[0]; + +export function renderAsync< + Q extends Queries = typeof queries, + Container extends RendererableContainer | HydrateableContainer = HTMLElement, + BaseElement extends RendererableContainer | HydrateableContainer = Container, +>( + ui: React.ReactNode, + options: RenderOptions +): Promise>; +export function renderAsync( + ui: React.ReactNode, + options?: Omit | undefined +): Promise; + +export function renderAsync(...args: [any, any]): any { + return act(async () => { + return await render(...args); + }); +}