Adds rerender on testHook return

Author: Andrewmat

.github/ISSUE_TEMPLATE.md

@@ -59,7 +59,8 @@ What happened:
 
 <!-- Please provide the full error message/screenshots/anything -->
 
-Reproduction repository: https://github.com/alexkrolick/dom-testing-library-template
+Reproduction repository:
+https://github.com/alexkrolick/dom-testing-library-template
 
 <!--
 If possible, please create a repository that reproduces the issue with the

examples/__tests__/mock.react-transition-group.js

@@ -31,9 +31,8 @@ afterEach(cleanup)
 
 jest.mock('react-transition-group', () => {
   const FakeTransition = jest.fn(({children}) => children)
-  const FakeCSSTransition = jest.fn(
-    props =>
-      props.in ? <FakeTransition>{props.children}</FakeTransition> : null,
+  const FakeCSSTransition = jest.fn(props =>
+    props.in ? <FakeTransition>{props.children}</FakeTransition> : null,
   )
   return {CSSTransition: FakeCSSTransition, Transition: FakeTransition}
 })

examples/__tests__/react-hooks.js

@@ -6,7 +6,7 @@
  */
 import {testHook, act, cleanup} from 'react-testing-library'
 
-import { useCounter, useDocumentTitle } from '../react-hooks'
+import {useCounter, useDocumentTitle, useCall} from '../react-hooks'
 
 afterEach(cleanup)
 
@@ -59,6 +59,7 @@ describe('useCounter', () => {
   })
 })
 
+// using unmount function to check useEffect behavior when unmounting
 describe('useDocumentTitle', () => {
   test('sets a title', () => {
     document.title = 'original title'
@@ -71,11 +72,48 @@ describe('useDocumentTitle', () => {
 
   test('returns to original title when component is unmounted', () => {
     document.title = 'original title'
-    const { unmount } = testHook(() => {
+    const {unmount} = testHook(() => {
       useDocumentTitle('modified title')
     })
 
     unmount()
     expect(document.title).toBe('original title')
   })
-})
+})
+
+// using rerender function to test calling useEffect multiple times
+describe('useCall', () => {
+  test('calls once on render', () => {
+    const spy = jest.fn()
+    testHook(() => {
+      useCall(spy, [])
+    })
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
+  test('calls again if deps change', () => {
+    let deps = [false]
+    const spy = jest.fn()
+    const {rerender} = testHook(() => {
+      useCall(spy, deps)
+    })
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    deps = [true]
+    rerender()
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+
+  test('does not call again if deps are the same', () => {
+    let deps = [false]
+    const spy = jest.fn()
+    const {rerender} = testHook(() => {
+      useCall(spy, deps)
+    })
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    deps = [false]
+    rerender()
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+})

examples/react-hooks.js

@@ -17,3 +17,9 @@ export function useDocumentTitle(title) {
     }
   }, [title])
 }
+
+export function useCall(callback, deps) {
+  useEffect(() => {
+    callback()
+  }, deps)
+}

src/__tests__/test-hook.js

@@ -12,9 +12,9 @@ test('testHook calls the callback', () => {
 test('confirm we can safely call a React Hook from within the callback', () => {
   testHook(() => useState())
 })
-test('returns a function to unmount the component', () => {
+test('returns a function to unmount component', () => {
   let isMounted
-  const { unmount } = testHook(() => {
+  const {unmount} = testHook(() => {
     useEffect(() => {
       isMounted = true
       return () => {
@@ -26,3 +26,15 @@ test('returns a function to unmount the component', () => {
   unmount()
   expect(isMounted).toBe(false)
 })
+test('returns a function to rerender component', () => {
+  let renderCount = 0
+  const {rerender} = testHook(() => {
+    useEffect(() => {
+      renderCount++
+    })
+  })
+
+  expect(renderCount).toBe(1)
+  rerender()
+  expect(renderCount).toBe(2)
+})

src/index.js

@@ -67,8 +67,15 @@ function TestHook({callback}) {
 }
 
 function testHook(callback) {
-  const { unmount } = render(<TestHook callback={callback} />)
-  return { unmount }
+  const {unmount, rerender: rerenderComponent} = render(
+    <TestHook callback={callback} />,
+  )
+  return {
+    unmount,
+    rerender: () => {
+      rerenderComponent(<TestHook callback={callback} />)
+    },
+  }
 }
 
 function cleanup() {