feat: add renderHook function

Author: pierrezimmermann

src/__tests__/renderHook.test.tsx

@@ -0,0 +1,62 @@
+import React, { ReactNode } from 'react';
+import { renderHook } from '../pure';
+
+test('gives comitted result', () => {
+  const { result } = renderHook(() => {
+    const [state, setState] = React.useState(1);
+
+    React.useEffect(() => {
+      setState(2);
+    }, []);
+
+    return [state, setState];
+  });
+
+  expect(result.current).toEqual([2, expect.any(Function)]);
+});
+
+test('allows rerendering', () => {
+  const { result, rerender } = renderHook(
+    (props: { branch: 'left' | 'right' }) => {
+      const [left, setLeft] = React.useState('left');
+      const [right, setRight] = React.useState('right');
+
+      // eslint-disable-next-line jest/no-if
+      switch (props.branch) {
+        case 'left':
+          return [left, setLeft];
+        case 'right':
+          return [right, setRight];
+
+        default:
+          throw new Error(
+            'No Props passed. This is a bug in the implementation'
+          );
+      }
+    },
+    { initialProps: { branch: 'left' } }
+  );
+
+  expect(result.current).toEqual(['left', expect.any(Function)]);
+
+  rerender({ branch: 'right' });
+
+  expect(result.current).toEqual(['right', expect.any(Function)]);
+});
+
+test('allows wrapper components', async () => {
+  const Context = React.createContext('default');
+  function Wrapper({ children }: { children: ReactNode }) {
+    return <Context.Provider value="provided">{children}</Context.Provider>;
+  }
+  const { result } = renderHook(
+    () => {
+      return React.useContext(Context);
+    },
+    {
+      wrapper: Wrapper,
+    }
+  );
+
+  expect(result.current).toEqual('provided');
+});

src/pure.ts

@@ -6,6 +6,7 @@ import waitFor from './waitFor';
 import waitForElementToBeRemoved from './waitForElementToBeRemoved';
 import { within, getQueriesForElement } from './within';
 import { getDefaultNormalizer } from './matches';
+import { renderHook } from './renderHook';
 
 export { act };
 export { cleanup };
@@ -15,3 +16,4 @@ export { waitFor };
 export { waitForElementToBeRemoved };
 export { within, getQueriesForElement };
 export { getDefaultNormalizer };
+export { renderHook };

src/renderHook.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { ComponentType } from 'react';
+import render from './render';
+
+interface RenderHookResult<Result, Props> {
+  rerender: (props: Props) => void;
+  result: { current: Result };
+  unmount: () => void;
+}
+
+type RenderHookOptions<Props> = Props extends object | string | number | boolean
+  ? {
+      initialProps: Props;
+      wrapper?: ComponentType<any>;
+    }
+  : { wrapper?: ComponentType<any>; initialProps?: never } | undefined;
+
+export function renderHook<Result, Props>(
+  renderCallback: (props: Props) => Result,
+  options?: RenderHookOptions<Props>
+): RenderHookResult<Result, Props> {
+  const initialProps = options?.initialProps;
+  const wrapper = options?.wrapper;
+
+  const result: React.MutableRefObject<Result | null> = React.createRef();
+
+  function TestComponent({
+    renderCallbackProps,
+  }: {
+    renderCallbackProps: Props;
+  }) {
+    const renderResult = renderCallback(renderCallbackProps);
+
+    React.useEffect(() => {
+      result.current = renderResult;
+    });
+
+    return null;
+  }
+
+  const { rerender: baseRerender, unmount } = render(
+    // @ts-expect-error since option can be undefined, initialProps can be undefined when it should'nt
+    <TestComponent renderCallbackProps={initialProps} />,
+    { wrapper }
+  );
+
+  function rerender(rerenderCallbackProps: Props) {
+    return baseRerender(
+      <TestComponent renderCallbackProps={rerenderCallbackProps} />
+    );
+  }
+
+  // @ts-expect-error result is ill typed because ref is initialized to null
+  return { result, rerender, unmount };
+}