allow setting a displayName for wrapper component created in renderHook

Author: vikr01

src/__tests__/renderHook.js

@@ -50,6 +50,27 @@ test('allows rerendering', () => {
   expect(result.current).toEqual(['right', expect.any(Function)])
 })
 
+test('allows setting a displayName', () => {
+  let capturedElement = null
+
+  const spyWrapper = ({ children }) => {
+    // Capture the hook element React creates
+    capturedElement = React.Children.only(children);
+    return <>{children}</>;
+  }
+
+  const useMyLocalHook = jest.fn()
+
+  renderHook(useMyLocalHook, {
+    wrapper: spyWrapper,
+    displayName: 'CustomHookDisplayName',
+  })
+
+  expect(useMyLocalHook).toHaveBeenCalledTimes(1)
+  
+  expect(capturedElement?.type?.displayName).toBe('CustomHookDisplayName')
+});
+
 test('allows wrapper components', async () => {
   const Context = React.createContext('default')
   function Wrapper({children}) {

src/pure.js

@@ -318,7 +318,7 @@ function cleanup() {
 }
 
 function renderHook(renderCallback, options = {}) {
-  const {initialProps, ...renderOptions} = options
+  const {initialProps, displayName, ...renderOptions} = options
 
   if (renderOptions.legacyRoot && typeof ReactDOM.render !== 'function') {
     const error = new Error(
@@ -342,6 +342,10 @@ function renderHook(renderCallback, options = {}) {
     return null
   }
 
+  if (displayName !== undefined) {
+    TestComponent.displayName = displayName;
+  }
+
   const {rerender: baseRerender, unmount} = render(
     <TestComponent renderCallbackProps={initialProps} />,
     renderOptions,

types/index.d.ts

@@ -253,7 +253,8 @@ export interface RenderHookOptions<
    * 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 | undefined
+  initialProps?: Props | undefined,
+  displayName?: React.FunctionComponent['displayName'],
 }
 
 /**