Skip to content

Commit

Permalink
feat(pure): add renderOptions support to render
Browse files Browse the repository at this point in the history
  • Loading branch information
naorpeled committed Jun 1, 2024
1 parent c1f2957 commit ec18bf2
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 3 deletions.
15 changes: 12 additions & 3 deletions types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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.
*
Expand All @@ -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>>
Expand All @@ -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,
Expand Down
46 changes: 46 additions & 0 deletions types/test.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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",
Expand Down

0 comments on commit ec18bf2

Please sign in to comment.