feat(renderHook): allow passing of all render options to renderHook (#1118)

Author: TkDodo

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 <Context.Provider value="provided">{children}</Context.Provider>
+  }
+  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",
+  )
+})

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(
     <TestComponent renderCallbackProps={initialProps} />,
-    {wrapper},
+    renderOptions,
   )
 
   function rerender(rerenderCallbackProps) {

types/index.d.ts

@@ -120,28 +120,32 @@ export interface RenderHookResult<Result, Props> {
   unmount: () => void
 }
 
-export interface RenderHookOptions<Props> {
+export interface RenderHookOptions<
+  Props,
+  Q extends Queries = typeof queries,
+  Container extends Element | DocumentFragment = HTMLElement,
+  BaseElement extends Element | DocumentFragment = Container,
+> extends RenderOptions<Q, Container, BaseElement> {
   /**
    * 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<Result, Props>(
+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<Props>,
+  options?: RenderHookOptions<Props, Q, Container, BaseElement>,
 ): RenderHookResult<Result, Props>
 
 /**