From 48282c2f35fb7338834b40983c12b889af35f5d1 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 23 Apr 2024 17:32:08 +0200
Subject: [PATCH] fix: Ensure `renderHook` options extend options for `render`
 (#1308)

---
 types/index.d.ts | 63 ++++++++++++++++++++++++++++++++++++++++++------
 types/test.tsx   | 19 +++++++++++++++
 2 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/types/index.d.ts b/types/index.d.ts
index 566e3d05..78302693 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -179,12 +179,12 @@ export interface RenderHookResult<Result, Props> {
   unmount: () => void
 }
 
-export interface RenderHookOptions<
+export interface BaseRenderHookOptions<
   Props,
-  Q extends Queries = typeof queries,
-  Container extends Element | DocumentFragment = HTMLElement,
-  BaseElement extends Element | DocumentFragment = Container,
-> extends RenderOptions<Q, Container, BaseElement> {
+  Q extends Queries,
+  Container extends RendererableContainer | HydrateableContainer,
+  BaseElement extends Element | DocumentFragment,
+> extends BaseRenderOptions<Q, Container, BaseElement> {
   /**
    * The argument passed to the renderHook callback. Can be useful if you plan
    * to use the rerender utility to change the values passed to your hook.
@@ -192,6 +192,45 @@ export interface RenderHookOptions<
   initialProps?: Props
 }
 
+export interface ClientRenderHookOptions<
+  Props,
+  Q extends Queries,
+  Container extends Element | DocumentFragment,
+  BaseElement extends Element | DocumentFragment = Container,
+> extends BaseRenderHookOptions<Props, Q, Container, BaseElement> {
+  /**
+   * If `hydrate` is set to `true`, then it will render with `ReactDOM.hydrate`. This may be useful if you are using server-side
+   *  rendering and use ReactDOM.hydrate to mount your components.
+   *
+   *  @see https://testing-library.com/docs/react-testing-library/api/#hydrate)
+   */
+  hydrate?: false | undefined
+}
+
+export interface HydrateHookOptions<
+  Props,
+  Q extends Queries,
+  Container extends Element | DocumentFragment,
+  BaseElement extends Element | DocumentFragment = Container,
+> extends BaseRenderHookOptions<Props, Q, Container, BaseElement> {
+  /**
+   * If `hydrate` is set to `true`, then it will render with `ReactDOM.hydrate`. This may be useful if you are using server-side
+   *  rendering and use ReactDOM.hydrate to mount your components.
+   *
+   *  @see https://testing-library.com/docs/react-testing-library/api/#hydrate)
+   */
+  hydrate: true
+}
+
+export type RenderHookOptions<
+  Props,
+  Q extends Queries = typeof queries,
+  Container extends Element | DocumentFragment = HTMLElement,
+  BaseElement extends Element | DocumentFragment = Container,
+> =
+  | ClientRenderHookOptions<Props, Q, Container, BaseElement>
+  | HydrateHookOptions<Props, Q, Container, BaseElement>
+
 /**
  * Allows you to render a hook within a test React component without having to
  * create that component yourself.
@@ -200,11 +239,21 @@ export function renderHook<
   Result,
   Props,
   Q extends Queries = typeof queries,
-  Container extends Element | DocumentFragment = HTMLElement,
+  Container extends RendererableContainer = HTMLElement,
+  BaseElement extends Element | DocumentFragment = Container,
+>(
+  render: (initialProps: Props) => Result,
+  options?: ClientRenderHookOptions<Props, Q, Container, BaseElement>,
+): RenderHookResult<Result, Props>
+export function renderHook<
+  Result,
+  Props,
+  Q extends Queries = typeof queries,
+  Container extends HydrateableContainer = HTMLElement,
   BaseElement extends Element | DocumentFragment = Container,
 >(
   render: (initialProps: Props) => Result,
-  options?: RenderHookOptions<Props, Q, Container, BaseElement>,
+  options?: HydrateHookOptions<Props, Q, Container, BaseElement>,
 ): RenderHookResult<Result, Props>
 
 /**
diff --git a/types/test.tsx b/types/test.tsx
index da0bda06..734d70e7 100644
--- a/types/test.tsx
+++ b/types/test.tsx
@@ -45,6 +45,8 @@ export function testRenderOptions() {
   const options = {container}
   const {container: returnedContainer} = render(<button />, options)
   expectType<HTMLDivElement, typeof returnedContainer>(returnedContainer)
+
+  render(<div />, {wrapper: () => null})
 }
 
 export function testSVGRenderOptions() {
@@ -191,6 +193,8 @@ export function testRenderHook() {
   rerender()
 
   unmount()
+
+  renderHook(() => null, {wrapper: () => null})
 }
 
 export function testRenderHookProps() {
@@ -215,6 +219,21 @@ export function testContainer() {
   // @ts-expect-error Only allowed for createRoot
   render('a', {container: document.createDocumentFragment(), hydrate: true})
   render('a', {container: document, hydrate: true})
+
+  renderHook(() => null, {container: document.createElement('div')})
+  renderHook(() => null, {container: document.createDocumentFragment()})
+  // @ts-expect-error Only allowed in React 19
+  renderHook(() => null, {container: document})
+  renderHook(() => null, {
+    container: document.createElement('div'),
+    hydrate: true,
+  })
+  // @ts-expect-error Only allowed for createRoot
+  renderHook(() => null, {
+    container: document.createDocumentFragment(),
+    hydrate: true,
+  })
+  renderHook(() => null, {container: document, hydrate: true})
 }
 
 /*