feat: Add renderHook

src/__tests__/renderHook.js

@@ -0,0 +1,62 @@
+import React 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(
+    ({branch}) => {
+      const [left, setLeft] = React.useState('left')
+      const [right, setRight] = React.useState('right')
+
+      // eslint-disable-next-line jest/no-if
+      switch (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}) {
+    return <Context.Provider value="provided">{children}</Context.Provider>
+  }
+  const {result} = renderHook(
+    () => {
+      return React.useContext(Context)
+    },
+    {
+      wrapper: Wrapper,
+    },
+  )
+
+  expect(result.current).toEqual('provided')
+})

src/pure.js

@@ -115,9 +115,37 @@ function cleanupAtContainer(container) {
   mountedContainers.delete(container)
 }
 
+function renderHook(renderCallback, options = {}) {
+  const {initialProps, wrapper} = options
+  const result = React.createRef()
+
+  function TestComponent({renderCallbackProps}) {
+    const pendingResult = renderCallback(renderCallbackProps)
+
+    React.useEffect(() => {
+      result.current = pendingResult
+    })
+
+    return null
+  }
+
+  const {rerender: baseRerender, unmount} = render(
+    <TestComponent renderCallbackProps={initialProps} />,
+    {wrapper},
+  )
+
+  function rerender(rerenderCallbackProps) {
+    return baseRerender(
+      <TestComponent renderCallbackProps={rerenderCallbackProps} />,
+    )
+  }
+
+  return {result, rerender, unmount}
+}
+
 // just re-export everything from dom-testing-library
 export * from '@testing-library/dom'
-export {render, cleanup, act, fireEvent}
+export {render, renderHook, cleanup, act, fireEvent}
 
 // NOTE: we're not going to export asyncAct because that's our own compatibility
 // thing for people using react-dom@16.8.0. Anyone else doesn't need it and

types/index.d.ts

@@ -90,6 +90,25 @@ export function render(
   options?: Omit<RenderOptions, 'queries'>,
 ): RenderResult
 
+// TODO JSDOC
+interface RenderHookResult<Result, Props> {
+  rerender: (props?: Props) => void
+  result: {current: Result}
+  unmount: () => void
+}
+
+// TODO JSDOC
+interface RenderHookOptions<Props> {
+  initialProps?: Props
+  wrapper?: React.ComponentType
+}
+
+// TODO JSDOC
+export function renderHook<Result, Props>(
+  render: (initialProps: Props) => Result,
+  options?: RenderHookOptions<Props>,
+): RenderHookResult<Result, Props>
+
 /**
  * Unmounts React trees that were mounted with render.
  */

types/test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import {render, fireEvent, screen, waitFor} from '.'
+import {render, fireEvent, screen, waitFor, renderHook} from '.'
 import * as pure from './pure'
 
 export async function testRender() {
@@ -141,6 +141,29 @@ export function wrappedRenderC(
   return pure.render(ui, {wrapper: AppWrapperProps, ...options})
 }
 
+export function testRenderHook() {
+  const {result, rerender, unmount} = renderHook(() => React.useState(2)[0])
+
+  expectType<number, typeof result.current>(result.current)
+
+  rerender()
+
+  unmount()
+}
+
+export function testRenderHookProps() {
+  const {result, rerender, unmount} = renderHook(
+    ({defaultValue}) => React.useState(defaultValue)[0],
+    {initialProps: {defaultValue: 2}},
+  )
+
+  expectType<number, typeof result.current>(result.current)
+
+  rerender()
+
+  unmount()
+}
+
 /*
 eslint
   testing-library/prefer-explicit-assert: "off",