feat(pure): add renderOptions support to render

Author: naorpeled

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,

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,43 @@ 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",