diff --git a/src/__tests__/renderHook.js b/src/__tests__/renderHook.js
index b65d67a2..92bc47ed 100644
--- a/src/__tests__/renderHook.js
+++ b/src/__tests__/renderHook.js
@@ -60,3 +60,29 @@ test('allows wrapper components', async () => {
expect(result.current).toEqual('provided')
})
+
+test('legacyRoot uses legacy ReactDOM.render', () => {
+ jest.spyOn(console, 'error').mockImplementation(() => {})
+
+ const Context = React.createContext('default')
+ function Wrapper({children}) {
+ return {children}
+ }
+ const {result} = renderHook(
+ () => {
+ return React.useContext(Context)
+ },
+ {
+ wrapper: Wrapper,
+ legacyRoot: true,
+ },
+ )
+
+ expect(result.current).toEqual('provided')
+
+ expect(console.error).toHaveBeenCalledTimes(1)
+ expect(console.error).toHaveBeenNthCalledWith(
+ 1,
+ "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
+ )
+})
diff --git a/src/pure.js b/src/pure.js
index 4c416d44..94b3b2bd 100644
--- a/src/pure.js
+++ b/src/pure.js
@@ -219,7 +219,7 @@ function cleanup() {
}
function renderHook(renderCallback, options = {}) {
- const {initialProps, wrapper} = options
+ const {initialProps, ...renderOptions} = options
const result = React.createRef()
function TestComponent({renderCallbackProps}) {
@@ -234,7 +234,7 @@ function renderHook(renderCallback, options = {}) {
const {rerender: baseRerender, unmount} = render(
,
- {wrapper},
+ renderOptions,
)
function rerender(rerenderCallbackProps) {
diff --git a/types/index.d.ts b/types/index.d.ts
index e3f5bc60..558edfad 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -120,28 +120,32 @@ export interface RenderHookResult {
unmount: () => void
}
-export interface RenderHookOptions {
+export interface RenderHookOptions<
+ Props,
+ Q extends Queries = typeof queries,
+ Container extends Element | DocumentFragment = HTMLElement,
+ BaseElement extends Element | DocumentFragment = Container,
+> extends RenderOptions {
/**
* 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.
*/
initialProps?: Props
- /**
- * Pass a React Component as the wrapper option to have it rendered around the inner element. This is most useful for creating
- * reusable custom render functions for common data providers. See setup for examples.
- *
- * @see https://testing-library.com/docs/react-testing-library/api/#wrapper
- */
- wrapper?: React.JSXElementConstructor<{children: React.ReactElement}>
}
/**
* Allows you to render a hook within a test React component without having to
* create that component yourself.
*/
-export function renderHook(
+export function renderHook<
+ Result,
+ Props,
+ Q extends Queries = typeof queries,
+ Container extends Element | DocumentFragment = HTMLElement,
+ BaseElement extends Element | DocumentFragment = Container,
+>(
render: (initialProps: Props) => Result,
- options?: RenderHookOptions,
+ options?: RenderHookOptions,
): RenderHookResult
/**