From 889fecfde5d89ba5f153f5da1699b571d12b8327 Mon Sep 17 00:00:00 2001 From: Naor Peled 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 | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 3 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 37c8392a..6b1d35c9 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 = false, + 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 = Pick> @@ -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, + options: RenderOptions, ): RenderResult export function render( ui: React.ReactNode, diff --git a/types/test.tsx b/types/test.tsx index f8cf4aad..75cf9f17 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,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",