From 5a6c5db35bf33079852a9a5bebb5df59f7d4293f Mon Sep 17 00:00:00 2001
From: Michael Peyper <mpeyper7@gmail.com>
Date: Fri, 26 Apr 2019 01:38:59 +1000
Subject: [PATCH] Use react-hooks-testing-library to test hooks (#1259)

* Use react-hooks-testing-library to test hooks

* Disable react/display-name rule with nested .eslintrc file
---
 package-lock.json                  |  21 +++++
 package.json                       |   2 +
 test/hooks/.eslintrc               |   5 ++
 test/hooks/useActions.spec.js      | 131 ++++++++---------------------
 test/hooks/useDispatch.spec.js     |  21 ++---
 test/hooks/useRedux.spec.js        |  39 +++------
 test/hooks/useReduxContext.spec.js |  12 +--
 test/hooks/useSelector.spec.js     |  37 +++-----
 8 files changed, 99 insertions(+), 169 deletions(-)
 create mode 100644 test/hooks/.eslintrc

diff --git a/package-lock.json b/package-lock.json
index d72df7a8f..806c6b00e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7178,11 +7178,32 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-hooks-testing-library": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/react-hooks-testing-library/-/react-hooks-testing-library-0.5.0.tgz",
+      "integrity": "sha512-qX4SA28pcCCf1Q23Gtl1VKqQk26pSPTEsdLtfJanDqm4oacT5wadL+e2Xypk/H+AOXN5kdZrWmXkt+hAaiNHgg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.4.2"
+      }
+    },
     "react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-test-renderer": {
+      "version": "16.8.6",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz",
+      "integrity": "sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.8.6",
+        "scheduler": "^0.13.6"
+      }
+    },
     "react-testing-library": {
       "version": "5.9.0",
       "resolved": "https://registry.npmjs.org/react-testing-library/-/react-testing-library-5.9.0.tgz",
diff --git a/package.json b/package.json
index cde6a6d1c..befbc307a 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,8 @@
     "prettier": "^1.16.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-hooks-testing-library": "^0.5.0",
+    "react-test-renderer": "^16.8.6",
     "react-testing-library": "^5.9.0",
     "redux": "^4.0.1",
     "rimraf": "^2.6.3",
diff --git a/test/hooks/.eslintrc b/test/hooks/.eslintrc
new file mode 100644
index 000000000..1de5b1a79
--- /dev/null
+++ b/test/hooks/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react/display-name": 0
+  }
+}
diff --git a/test/hooks/useActions.spec.js b/test/hooks/useActions.spec.js
index e87b80931..d0807ed44 100644
--- a/test/hooks/useActions.spec.js
+++ b/test/hooks/useActions.spec.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { createStore } from 'redux'
-import * as rtl from 'react-testing-library'
+import { renderHook } from 'react-hooks-testing-library'
 import { Provider as ProviderMock, useActions } from '../../src/index.js'
 
 describe('React', () => {
@@ -28,58 +28,29 @@ describe('React', () => {
         dispatchedActions = []
       })
 
-      afterEach(() => rtl.cleanup())
-
       it('supports a single action creator', () => {
-        const Comp = () => {
-          const inc1 = useActions(() => ({ type: 'inc1' }))
-
-          return (
-            <>
-              <button id="bInc1" onClick={inc1} />
-            </>
-          )
-        }
-
-        const { container } = rtl.render(
-          <ProviderMock store={store}>
-            <Comp />
-          </ProviderMock>
+        const { result } = renderHook(
+          () => useActions(() => ({ type: 'inc1' })),
+          { wrapper: props => <ProviderMock {...props} store={store} /> }
         )
 
-        const bInc1 = container.querySelector('#bInc1')
-
-        rtl.fireEvent.click(bInc1)
+        result.current()
 
         expect(dispatchedActions).toEqual([{ type: 'inc1' }])
       })
 
       it('supports an object of action creators', () => {
-        const Comp = () => {
-          const { inc1, inc2 } = useActions({
-            inc1: () => ({ type: 'inc1' }),
-            inc2: () => ({ type: 'inc', amount: 2 })
-          })
-
-          return (
-            <>
-              <button id="bInc1" onClick={inc1} />
-              <button id="bInc2" onClick={inc2} />
-            </>
-          )
-        }
-
-        const { container } = rtl.render(
-          <ProviderMock store={store}>
-            <Comp />
-          </ProviderMock>
+        const { result } = renderHook(
+          () =>
+            useActions({
+              inc1: () => ({ type: 'inc1' }),
+              inc2: () => ({ type: 'inc', amount: 2 })
+            }),
+          { wrapper: props => <ProviderMock {...props} store={store} /> }
         )
 
-        const bInc1 = container.querySelector('#bInc1')
-        const bInc2 = container.querySelector('#bInc2')
-
-        rtl.fireEvent.click(bInc1)
-        rtl.fireEvent.click(bInc2)
+        result.current.inc1()
+        result.current.inc2()
 
         expect(dispatchedActions).toEqual([
           { type: 'inc1' },
@@ -88,31 +59,17 @@ describe('React', () => {
       })
 
       it('supports an array of action creators', () => {
-        const Comp = () => {
-          const [inc1, inc2] = useActions([
-            () => ({ type: 'inc1' }),
-            () => ({ type: 'inc', amount: 2 })
-          ])
-
-          return (
-            <>
-              <button id="bInc1" onClick={inc1} />
-              <button id="bInc2" onClick={inc2} />
-            </>
-          )
-        }
-
-        const { container } = rtl.render(
-          <ProviderMock store={store}>
-            <Comp />
-          </ProviderMock>
+        const { result } = renderHook(
+          () =>
+            useActions([
+              () => ({ type: 'inc1' }),
+              () => ({ type: 'inc', amount: 2 })
+            ]),
+          { wrapper: props => <ProviderMock {...props} store={store} /> }
         )
 
-        const bInc1 = container.querySelector('#bInc1')
-        const bInc2 = container.querySelector('#bInc2')
-
-        rtl.fireEvent.click(bInc1)
-        rtl.fireEvent.click(bInc2)
+        result.current[0]()
+        result.current[1]()
 
         expect(dispatchedActions).toEqual([
           { type: 'inc1' },
@@ -133,37 +90,21 @@ describe('React', () => {
         const store = createStore(reducer)
         dispatchedActions = []
 
-        const Comp = () => {
-          const { adjust } = useActions({
-            adjust: (amount, isAdd = true) => ({
-              type: 'adjust',
-              amount,
-              isAdd
-            })
-          })
-
-          return (
-            <>
-              <button id="bInc1" onClick={() => adjust(1)} />
-              <button id="bInc2" onClick={() => adjust(2)} />
-              <button id="bDec1" onClick={() => adjust(1, false)} />
-            </>
-          )
-        }
-
-        const { container } = rtl.render(
-          <ProviderMock store={store}>
-            <Comp />
-          </ProviderMock>
+        const { result } = renderHook(
+          () =>
+            useActions({
+              adjust: (amount, isAdd = true) => ({
+                type: 'adjust',
+                amount,
+                isAdd
+              })
+            }),
+          { wrapper: props => <ProviderMock {...props} store={store} /> }
         )
 
-        const bInc1 = container.querySelector('#bInc1')
-        const bInc2 = container.querySelector('#bInc2')
-        const bDec1 = container.querySelector('#bDec1')
-
-        rtl.fireEvent.click(bInc1)
-        rtl.fireEvent.click(bInc2)
-        rtl.fireEvent.click(bDec1)
+        result.current.adjust(1)
+        result.current.adjust(2)
+        result.current.adjust(1, false)
 
         expect(dispatchedActions).toEqual([
           { type: 'adjust', amount: 1, isAdd: true },
diff --git a/test/hooks/useDispatch.spec.js b/test/hooks/useDispatch.spec.js
index c22291128..6f43937c5 100644
--- a/test/hooks/useDispatch.spec.js
+++ b/test/hooks/useDispatch.spec.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { createStore } from 'redux'
-import * as rtl from 'react-testing-library'
+import { renderHook } from 'react-hooks-testing-library'
 import { Provider as ProviderMock, useDispatch } from '../../src/index.js'
 
 const store = createStore(c => c + 1)
@@ -8,23 +8,12 @@ const store = createStore(c => c + 1)
 describe('React', () => {
   describe('hooks', () => {
     describe('useDispatch', () => {
-      afterEach(() => rtl.cleanup())
-
       it("returns the store's dispatch function", () => {
-        let dispatch
-
-        const Comp = () => {
-          dispatch = useDispatch()
-          return <div />
-        }
-
-        rtl.render(
-          <ProviderMock store={store}>
-            <Comp />
-          </ProviderMock>
-        )
+        const { result } = renderHook(() => useDispatch(), {
+          wrapper: props => <ProviderMock {...props} store={store} />
+        })
 
-        expect(dispatch).toBe(store.dispatch)
+        expect(result.current).toBe(store.dispatch)
       })
     })
   })
diff --git a/test/hooks/useRedux.spec.js b/test/hooks/useRedux.spec.js
index 4ec5a8b05..53b272ee3 100644
--- a/test/hooks/useRedux.spec.js
+++ b/test/hooks/useRedux.spec.js
@@ -2,49 +2,38 @@
 
 import React from 'react'
 import { createStore } from 'redux'
-import * as rtl from 'react-testing-library'
+import { renderHook, act } from 'react-hooks-testing-library'
 import { Provider as ProviderMock, useRedux } from '../../src/index.js'
 
 describe('React', () => {
   describe('hooks', () => {
     describe('useRedux', () => {
       let store
-      let renderedItems = []
 
       beforeEach(() => {
         store = createStore(({ count } = { count: -1 }) => ({
           count: count + 1
         }))
-        renderedItems = []
       })
 
-      afterEach(() => rtl.cleanup())
-
       it('selects the state and binds action creators', () => {
-        const Comp = () => {
-          const [count, { inc }] = useRedux(s => s.count, {
-            inc: () => ({ type: '' })
-          })
-          renderedItems.push(count)
-          return (
-            <>
-              <div>{count}</div>
-              <button id="bInc" onClick={inc} />
-            </>
-          )
-        }
-
-        const { container } = rtl.render(
-          <ProviderMock store={store}>
-            <Comp />
-          </ProviderMock>
+        const { result } = renderHook(
+          () =>
+            useRedux(s => s.count, {
+              inc: () => ({ type: '' })
+            }),
+          {
+            wrapper: props => <ProviderMock {...props} store={store} />
+          }
         )
 
-        const bInc = container.querySelector('#bInc')
+        expect(result.current[0]).toEqual(0)
 
-        rtl.fireEvent.click(bInc)
+        act(() => {
+          result.current[1].inc()
+        })
 
-        expect(renderedItems).toEqual([0, 1])
+        expect(result.current[0]).toEqual(1)
       })
     })
   })
diff --git a/test/hooks/useReduxContext.spec.js b/test/hooks/useReduxContext.spec.js
index 5d0604669..6945c80dd 100644
--- a/test/hooks/useReduxContext.spec.js
+++ b/test/hooks/useReduxContext.spec.js
@@ -1,21 +1,15 @@
-import React from 'react'
-import * as rtl from 'react-testing-library'
+import { renderHook } from 'react-hooks-testing-library'
 import { useReduxContext } from '../../src/hooks/useReduxContext'
 
 describe('React', () => {
   describe('hooks', () => {
     describe('useReduxContext', () => {
-      afterEach(() => rtl.cleanup())
-
       it('throws if component is not wrapped in provider', () => {
         const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
 
-        const Comp = () => {
-          useReduxContext()
-          return <div />
-        }
+        const { result } = renderHook(() => useReduxContext())
 
-        expect(() => rtl.render(<Comp />)).toThrow(
+        expect(result.error.message).toMatch(
           /could not find react-redux context value/
         )
 
diff --git a/test/hooks/useSelector.spec.js b/test/hooks/useSelector.spec.js
index 411829c1d..e0fb95c8b 100644
--- a/test/hooks/useSelector.spec.js
+++ b/test/hooks/useSelector.spec.js
@@ -2,6 +2,7 @@
 
 import React, { useReducer } from 'react'
 import { createStore } from 'redux'
+import { renderHook, act } from 'react-hooks-testing-library'
 import * as rtl from 'react-testing-library'
 import { Provider as ProviderMock, useSelector } from '../../src/index.js'
 import { useReduxContext } from '../../src/hooks/useReduxContext'
@@ -23,37 +24,25 @@ describe('React', () => {
 
       describe('core subscription behavior', () => {
         it('selects the state on initial render', () => {
-          const Comp = () => {
-            const count = useSelector(s => s.count)
-            renderedItems.push(count)
-            return <div>{count}</div>
-          }
-
-          rtl.render(
-            <ProviderMock store={store}>
-              <Comp />
-            </ProviderMock>
-          )
+          const { result } = renderHook(() => useSelector(s => s.count), {
+            wrapper: props => <ProviderMock {...props} store={store} />
+          })
 
-          expect(renderedItems).toEqual([0])
+          expect(result.current).toEqual(0)
         })
 
         it('selects the state and renders the component when the store updates', () => {
-          const Comp = () => {
-            const count = useSelector(s => s.count)
-            renderedItems.push(count)
-            return <div>{count}</div>
-          }
+          const { result } = renderHook(() => useSelector(s => s.count), {
+            wrapper: props => <ProviderMock {...props} store={store} />
+          })
 
-          rtl.render(
-            <ProviderMock store={store}>
-              <Comp />
-            </ProviderMock>
-          )
+          expect(result.current).toEqual(0)
 
-          store.dispatch({ type: '' })
+          act(() => {
+            store.dispatch({ type: '' })
+          })
 
-          expect(renderedItems).toEqual([0, 1])
+          expect(result.current).toEqual(1)
         })
       })