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.
  */