From ec18bf2adb8d8564be7e112c3ae008c56640f7b1 Mon Sep 17 00:00:00 2001
From: Naor Peled <thehecticbyte@gmail.com>
Date: Sat, 1 Jun 2024 22:54:59 +0300
Subject: [PATCH] feat(pure): add renderOptions support to render

---
 types/index.d.ts | 15 ++++++++++++---
 types/test.tsx   | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/types/index.d.ts b/types/index.d.ts
index 37c8392a..3ace7f9a 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -87,6 +87,8 @@ export interface RenderOptions<
   Q extends Queries = typeof queries,
   Container extends RendererableContainer | HydrateableContainer = HTMLElement,
   BaseElement extends RendererableContainer | HydrateableContainer = Container,
+  LegacyRoot extends boolean = boolean,
+  Hydrate extends boolean = boolean,
 > {
   /**
    * By default, React Testing Library will create a div and append that div to the document.body. Your React component will be rendered in the created div. If you provide your own HTMLElement container via this option,
@@ -111,13 +113,13 @@ export interface RenderOptions<
    *
    *  @see https://testing-library.com/docs/react-testing-library/api/#hydrate)
    */
-  hydrate?: boolean
+  hydrate?: Hydrate
   /**
    * Only works if used with React 18.
    * Set to `true` if you want to force synchronous `ReactDOM.render`.
    * Otherwise `render` will default to concurrent React if available.
    */
-  legacyRoot?: boolean
+  legacyRoot?: LegacyRoot
   /**
    * Queries to bind. Overrides the default set from DOM Testing Library unless merged.
    *
@@ -131,6 +133,11 @@ export interface RenderOptions<
    *  @see https://testing-library.com/docs/react-testing-library/api/#wrapper
    */
   wrapper?: React.JSXElementConstructor<{children: React.ReactNode}>
+  renderOptions?: LegacyRoot extends true
+    ? never
+    : Hydrate extends true
+    ? ReactDOMClient.HydrationOptions
+    : ReactDOMClient.RootOptions
 }
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
@@ -142,9 +149,11 @@ export function render<
   Q extends Queries = typeof queries,
   Container extends RendererableContainer | HydrateableContainer = HTMLElement,
   BaseElement extends RendererableContainer | HydrateableContainer = Container,
+  LegacyRoot extends boolean = boolean,
+  Hydrate extends boolean = boolean,
 >(
   ui: React.ReactNode,
-  options: RenderOptions<Q, Container, BaseElement>,
+  options: RenderOptions<Q, Container, BaseElement, LegacyRoot, Hydrate>,
 ): RenderResult<Q, Container, BaseElement>
 export function render(
   ui: React.ReactNode,
diff --git a/types/test.tsx b/types/test.tsx
index f8cf4aad..5f7917c9 100644
--- a/types/test.tsx
+++ b/types/test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import * as ReactDOMClient from 'react-dom/client'
 import {render, fireEvent, screen, waitFor, renderHook} from '.'
 import * as pure from './pure'
 
@@ -254,6 +255,51 @@ export function testContainer() {
   renderHook(() => null, {container: document, hydrate: true})
 }
 
+export function testRootContainerWithOptions() {
+  // @ts-expect-error - legacyRoot does not allow additional options
+  render('a', {
+    container: document.createElement('div'),
+    legacyRoot: true,
+    renderOptions: {},
+  })
+
+  render('a', {
+    container: document.createElement('div'),
+    legacyRoot: false,
+    renderOptions: {
+      identifierPrefix: 'test',
+      onRecoverableError: (_error, _errorInfo) => {
+        /* noop */
+      },
+    },
+  })
+  render('a', {
+    container: document.createElement('div'),
+    renderOptions: {
+      identifierPrefix: 'test',
+    },
+  })
+
+  render('a', {
+    container: document.createElement('div'),
+    hydrate: true,
+    renderOptions: {
+      identifierPrefix: 'test',
+      onRecoverableError: (_error, _errorInfo) => {
+        /* noop */
+      },
+    },
+  })
+  // @ts-expect-error - hydrateRoot only allows HydrationOptions, not RootOptions
+  render('a', {
+    container: document.createElement('div'),
+    hydrate: true,
+    renderOptions: {
+      identifierPrefix: 'test',
+    } as ReactDOMClient.RootOptions,
+  })
+}
+
 /*
 eslint
   testing-library/prefer-explicit-assert: "off",