Adds test for unmount function; Adds example of useEffect

Author: Andrewmat

examples/__tests__/react-hooks.js

@@ -6,53 +6,76 @@
  */
 import {testHook, act, cleanup} from 'react-testing-library'
 
-import useCounter from '../react-hooks'
+import { useCounter, useDocumentTitle } from '../react-hooks'
 
 afterEach(cleanup)
 
-test('accepts default initial values', () => {
-  let count
-  testHook(() => ({count} = useCounter()))
+describe('useCounter', () => {
+  test('accepts default initial values', () => {
+    let count
+    testHook(() => ({count} = useCounter()))
 
-  expect(count).toBe(0)
-})
+    expect(count).toBe(0)
+  })
 
-test('accepts a default initial value for `count`', () => {
-  let count
-  testHook(() => ({count} = useCounter({})))
+  test('accepts a default initial value for `count`', () => {
+    let count
+    testHook(() => ({count} = useCounter({})))
 
-  expect(count).toBe(0)
-})
+    expect(count).toBe(0)
+  })
 
-test('provides an `increment` function', () => {
-  let count, increment
-  testHook(() => ({count, increment} = useCounter({step: 2})))
+  test('provides an `increment` function', () => {
+    let count, increment
+    testHook(() => ({count, increment} = useCounter({step: 2})))
 
-  expect(count).toBe(0)
-  act(() => {
-    increment()
+    expect(count).toBe(0)
+    act(() => {
+      increment()
+    })
+    expect(count).toBe(2)
   })
-  expect(count).toBe(2)
-})
 
-test('provides an `decrement` function', () => {
-  let count, decrement
-  testHook(() => ({count, decrement} = useCounter({step: 2})))
+  test('provides an `decrement` function', () => {
+    let count, decrement
+    testHook(() => ({count, decrement} = useCounter({step: 2})))
 
-  expect(count).toBe(0)
-  act(() => {
-    decrement()
+    expect(count).toBe(0)
+    act(() => {
+      decrement()
+    })
+    expect(count).toBe(-2)
   })
-  expect(count).toBe(-2)
-})
 
-test('accepts a default initial value for `step`', () => {
-  let count, increment
-  testHook(() => ({count, increment} = useCounter({})))
+  test('accepts a default initial value for `step`', () => {
+    let count, increment
+    testHook(() => ({count, increment} = useCounter({})))
 
-  expect(count).toBe(0)
-  act(() => {
-    increment()
+    expect(count).toBe(0)
+    act(() => {
+      increment()
+    })
+    expect(count).toBe(1)
   })
-  expect(count).toBe(1)
 })
+
+describe('useDocumentTitle', () => {
+  test('sets a title', () => {
+    document.title = 'original title'
+    testHook(() => {
+      useDocumentTitle('modified title')
+    })
+
+    expect(document.title).toBe('modified title')
+  })
+
+  test('returns to original title when component is unmounted', () => {
+    document.title = 'original title'
+    const { unmount } = testHook(() => {
+      useDocumentTitle('modified title')
+    })
+
+    unmount()
+    expect(document.title).toBe('original title')
+  })
+})

examples/react-hooks.js

@@ -1,10 +1,19 @@
-import {useState} from 'react'
+import {useState, useEffect} from 'react'
 
-function useCounter({initialCount = 0, step = 1} = {}) {
+export function useCounter({initialCount = 0, step = 1} = {}) {
   const [count, setCount] = useState(initialCount)
   const increment = () => setCount(c => c + step)
   const decrement = () => setCount(c => c - step)
   return {count, increment, decrement}
 }
 
-export default useCounter
+export function useDocumentTitle(title) {
+  const [originalTitle, setOriginalTitle] = useState(document.title)
+  useEffect(() => {
+    setOriginalTitle(document.title)
+    document.title = title
+    return () => {
+      document.title = originalTitle
+    }
+  }, [title])
+}

src/__tests__/test-hook.js

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useState, useEffect} from 'react'
 import 'jest-dom/extend-expect'
 import {testHook, cleanup} from '../'
 
@@ -12,3 +12,17 @@ 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', () => {
+  let isMounted
+  const { unmount } = testHook(() => {
+    useEffect(() => {
+      isMounted = true
+      return () => {
+        isMounted = false
+      }
+    })
+  })
+  expect(isMounted).toBe(true)
+  unmount()
+  expect(isMounted).toBe(false)
+})

src/index.js

@@ -68,7 +68,7 @@ function TestHook({callback}) {
 
 function testHook(callback) {
   const { unmount } = render(<TestHook callback={callback} />)
-  return unmount
+  return { unmount }
 }
 
 function cleanup() {