Hooks Testing 🎣

.all-contributorsrc

@@ -615,6 +615,18 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "donavon",
+      "name": "Donavon West",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/887639?v=4",
+      "profile": "http://donavon.com",
+      "contributions": [
+        "code",
+        "doc",
+        "ideas",
+        "test"
+      ]
     }
   ]
 }

examples/__tests__/react-hooks.js

@@ -0,0 +1,46 @@
+import {testHook, cleanup} from 'react-testing-library'
+
+import useCounter from '../react-hooks'
+
+afterEach(cleanup)
+
+test('accepts default initial values', () => {
+  let count
+  testHook(() => ({count} = useCounter()))
+
+  expect(count).toBe(0)
+})
+
+test('accepts a default initial value for `count`', () => {
+  let count
+  testHook(() => ({count} = useCounter({})))
+
+  expect(count).toBe(0)
+})
+
+test('provides an `increment` function', () => {
+  let count, increment
+  testHook(() => ({count, increment} = useCounter({step: 2})))
+
+  expect(count).toBe(0)
+  increment()
+  expect(count).toBe(2)
+})
+
+test('provides an `decrement` function', () => {
+  let count, decrement
+  testHook(() => ({count, decrement} = useCounter({step: 2})))
+
+  expect(count).toBe(0)
+  decrement()
+  expect(count).toBe(-2)
+})
+
+test('accepts a default initial value for `step`', () => {
+  let count, increment
+  testHook(() => ({count, increment} = useCounter({})))
+
+  expect(count).toBe(0)
+  increment()
+  expect(count).toBe(1)
+})

examples/react-hooks.js

@@ -0,0 +1,10 @@
+import {useState} from 'react'
+
+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

package.json

@@ -48,15 +48,16 @@
     "jest-dom": "^2.0.4",
     "jest-in-case": "^1.0.2",
     "kcd-scripts": "^0.44.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "16.8.0",
+    "react-dom": "16.8.0",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-transition-group": "^2.5.0",
     "redux": "^4.0.0"
   },
   "peerDependencies": {
+    "react": "*",
     "react-dom": "*"
   },
   "eslintConfig": {

src/__tests__/testHook.js

@@ -0,0 +1,14 @@
+import {useState} from 'react'
+import 'jest-dom/extend-expect'
+import {testHook, cleanup} from '../'
+
+afterEach(cleanup)
+
+test('testHook calls the callback', () => {
+  const spy = jest.fn()
+  testHook(spy)
+  expect(spy).toHaveBeenCalledTimes(1)
+})
+test('confirm we can safely call a React Hook from within the callback', () => {
+  testHook(() => useState())
+})

src/index.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import ReactDOM from 'react-dom'
 import {getQueriesForElement, prettyDOM, fireEvent} from 'dom-testing-library'
 
@@ -51,6 +52,15 @@ function render(
   }
 }
 
+function TestHook({callback}) {
+  callback()
+  return null
+}
+
+function testHook(callback) {
+  render(<TestHook callback={callback} />)
+}
+
 function cleanup() {
   mountedContainers.forEach(cleanupAtContainer)
 }
@@ -92,6 +102,6 @@ fireEvent.select = (node, init) => {
 
 // just re-export everything from dom-testing-library
 export * from 'dom-testing-library'
-export {render, cleanup, flushEffects}
+export {render, testHook, cleanup, flushEffects}
 
 /* eslint func-name-matching:0 */

typings/index.d.ts

@@ -40,6 +40,11 @@ export function render<Q extends Queries>(
   options: RenderOptions<Q>,
 ): RenderResult<Q>
 
+/**
+ * Renders a test component that calls back to the test.
+ */
+export function testHook(callback: () => void): void
+
 /**
  * Unmounts React trees that were mounted with render.
  */