Replace core code with testHook from react-testing-library

Author: mpeyper

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hooks-testing-library",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Simple component wrapper for testing React hooks",
   "main": "lib/index.js",
   "author": "Michael Peyper",
@@ -17,31 +17,29 @@
     "contributors:add": "all-contributors add"
   },
   "dependencies": {
-    "invariant": "^2.2.4",
-    "react-testing-library": "^5.5.0",
-    "uuid-v4": "^0.1.0"
+    "react-testing-library": "^5.8.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
+    "@babel/core": "^7.3.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
     "@babel/plugin-transform-modules-commonjs": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
-    "all-contributors-cli": "^5.11.0",
+    "all-contributors-cli": "^6.1.1",
     "babel-eslint": "^10.0.1",
-    "babel-plugin-module-resolver": "^3.1.3",
-    "eslint": "^5.13.0",
+    "babel-plugin-module-resolver": "^3.2.0",
+    "eslint": "^5.14.0",
     "eslint-config-prettier": "^4.0.0",
     "eslint-plugin-prettier": "^3.0.1",
     "husky": "^1.3.1",
     "jest": "^24.1.0",
-    "lint-staged": "^8.1.3",
+    "lint-staged": "^8.1.4",
     "prettier": "^1.16.4",
     "prettier-eslint": "^8.8.2",
     "prettier-eslint-cli": "^4.7.1",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2"
   },
   "peerDependencies": {
     "react": "^16.8.0",

package.json

@@ -1,71 +1,37 @@
 import React from 'react'
-import { act } from 'react-dom/test-utils'
-import { render, cleanup } from 'react-testing-library'
-import invariant from 'invariant'
-import uuid from 'uuid-v4'
+import { render, cleanup, act } from 'react-testing-library'
 
-export const useHook = (hook, ...props) => {
-  const context = {
-    id: uuid(),
-    resolveComponent: (Component) => Component,
-    rendered: false,
-    props
-  }
-
-  const HookHarness = () => {
-    context.currentValue = hook(...context.props)
-    return <div data-testid={context.id} />
-  }
-
-  const renderHook = () => {
-    const { queryByTestId, rerender } = render(context.resolveComponent(<HookHarness />))
-    const container = queryByTestId(context.id)
-
-    invariant(container !== null, 'Failed to render wrapper component')
-
-    context.rendered = true
-    context.rerender = () => rerender(context.resolveComponent(<HookHarness />))
-  }
-
-  const getCurrentValue = () => {
-    act(() => {
-      if (!context.rendered) {
-        renderHook()
-      } else {
-        context.rerender()
-      }
-    })
-    return context.currentValue
-  }
-
-  const setProps = (...newProps) => {
-    context.props = newProps
-  }
+function TestHook({ callback, hookProps, children }) {
+  children(callback(hookProps))
+  return null
+}
 
-  const addContextProvider = (ContextProvider, contextProps) => {
-    const Provider = ContextProvider.Provider || ContextProvider
-    const { resolveComponent } = context
-    const updateContext = (newContextProps) => {
-      contextProps = newContextProps
-    }
-    context.resolveComponent = (Component) => (
-      <Provider {...contextProps}>{resolveComponent(Component)}</Provider>
+function testHook(callback, options = {}) {
+  const result = { current: null }
+  const hookProps = { current: options.initialProps }
+
+  const toRender = () => {
+    const hookRender = (
+      <TestHook callback={callback} hookProps={hookProps.current}>
+        {(res) => {
+          result.current = res
+        }}
+      </TestHook>
     )
-    return { updateContext }
-  }
 
-  const flushEffects = () => {
-    getCurrentValue()
+    return options.wrapper ? React.createElement(options.wrapper, null, hookRender) : hookRender
   }
 
+  const { unmount, rerender: rerenderComponent } = render(toRender())
+
   return {
-    getCurrentValue,
-    getCurrentValues: getCurrentValue,
-    flushEffects,
-    setProps,
-    addContextProvider,
-    act
+    result,
+    unmount,
+    rerender: (newProps = hookProps.current) => {
+      hookProps.current = newProps
+      rerenderComponent(toRender())
+    }
   }
 }
 
-export { cleanup }
+export { testHook, cleanup, act }

src/index.js

@@ -1,5 +1,6 @@
+import React from 'react'
 import { useState, createContext, useContext, useMemo } from 'react'
-import { useHook, cleanup } from 'src'
+import { testHook, cleanup, act } from 'src'
 
 describe('custom hook tests', () => {
   const themes = {
@@ -21,23 +22,23 @@ describe('custom hook tests', () => {
   afterEach(cleanup)
 
   test('should get initial theme from custom hook', () => {
-    const { getCurrentValue } = useHook(() => useTheme('light'))
+    const { result } = testHook(() => useTheme('light'))
 
-    const theme = getCurrentValue()
+    const theme = result.current
 
     expect(theme.primaryLight).toBe('#FFFFFF')
     expect(theme.primaryDark).toBe('#000000')
     expect(typeof theme.changeTheme).toBe('function')
   })
 
   test('should update theme using custom hook', () => {
-    const { getCurrentValue, act } = useHook(() => useTheme('light'))
+    const { result } = testHook(() => useTheme('light'))
 
-    const { changeTheme } = getCurrentValue()
+    const { changeTheme } = result.current
 
     act(() => changeTheme())
 
-    const theme = getCurrentValue()
+    const theme = result.current
 
     expect(theme.primaryLight).toBe('#000000')
     expect(theme.primaryDark).toBe('#FFFFFF')
@@ -50,11 +51,13 @@ describe('custom hook tests', () => {
       dark: { primaryLight: '#CCBBAA', primaryDark: '#AABBCC' }
     }
 
-    const { getCurrentValue, addContextProvider } = useHook(() => useTheme('light'))
+    const wrapper = ({ children }) => (
+      <ThemesContext.Provider value={customThemes}>{children}</ThemesContext.Provider>
+    )
 
-    addContextProvider(ThemesContext, { value: customThemes })
+    const { result } = testHook(() => useTheme('light'), { wrapper })
 
-    const theme = getCurrentValue()
+    const theme = result.current
 
     expect(theme.primaryLight).toBe('#AABBCC')
     expect(theme.primaryDark).toBe('#CCBBAA')

test/customHook.test.js

@@ -1,78 +1,71 @@
+import React from 'react'
 import { createContext, useContext } from 'react'
-import { useHook, cleanup } from 'src'
+import { testHook, cleanup } from 'src'
 
 describe('useContext tests', () => {
   afterEach(cleanup)
 
   test('should get default value from context', () => {
     const TestContext = createContext('foo')
 
-    const { getCurrentValue } = useHook(() => useContext(TestContext))
+    const { result } = testHook(() => useContext(TestContext))
 
-    const value = getCurrentValue()
+    const value = result.current
 
     expect(value).toBe('foo')
   })
 
   test('should get default value from context provider', () => {
     const TestContext = createContext('foo')
 
-    const { getCurrentValue } = useHook(() => useContext(TestContext))
+    const { result } = testHook(() => useContext(TestContext))
 
-    const value = getCurrentValue()
+    const value = result.current
 
     expect(value).toBe('foo')
   })
 
   test('should get value from context', () => {
     const TestContext = createContext('foo')
 
-    const { getCurrentValue, addContextProvider } = useHook(() => useContext(TestContext))
+    const wrapper = ({ children }) => (
+      <TestContext.Provider value="bar">{children}</TestContext.Provider>
+    )
 
-    addContextProvider(TestContext, { value: 'bar' })
+    const { result } = testHook(() => useContext(TestContext), { wrapper })
 
-    const value = getCurrentValue()
+    const value = result.current
 
     expect(value).toBe('bar')
   })
 
   test('should get value from context provider', () => {
     const TestContext = createContext('foo')
 
-    const { getCurrentValue, addContextProvider } = useHook(() => useContext(TestContext))
+    const wrapper = ({ children }) => (
+      <TestContext.Provider value="bar">{children}</TestContext.Provider>
+    )
 
-    addContextProvider(TestContext.Provider, { value: 'bar' })
+    const { result } = testHook(() => useContext(TestContext), { wrapper })
 
-    const value = getCurrentValue()
-
-    expect(value).toBe('bar')
+    expect(result.current).toBe('bar')
   })
 
   test('should update value in context', () => {
     const TestContext = createContext('foo')
 
-    const { getCurrentValue, addContextProvider } = useHook(() => useContext(TestContext))
-
-    const { updateContext } = addContextProvider(TestContext, { value: 'bar' })
-
-    updateContext({ value: 'baz' })
-
-    const value = getCurrentValue()
-
-    expect(value).toBe('baz')
-  })
-
-  test('should update value in context provider', () => {
-    const TestContext = createContext('foo')
+    const value = { current: 'bar' }
 
-    const { getCurrentValue, addContextProvider } = useHook(() => useContext(TestContext))
+    const wrapper = ({ children }) => (
+      <TestContext.Provider value={value.current}>{children}</TestContext.Provider>
+    )
 
-    const { updateContext } = addContextProvider(TestContext.Provider, { value: 'bar' })
+    const { result, rerender } = testHook(() => useContext(TestContext), { wrapper })
 
-    updateContext({ value: 'baz' })
+    value.current = 'baz'
 
-    const value = getCurrentValue()
+    rerender()
 
-    expect(value).toBe('baz')
+    expect(result.current).toBe('baz')
   })
 })

test/useContext.test.js

@@ -1,13 +1,13 @@
 import { useEffect, useLayoutEffect } from 'react'
-import { useHook, cleanup } from 'src'
+import { testHook, cleanup } from 'src'
 
 describe('useEffect tests', () => {
   afterEach(cleanup)
 
   test('should handle useEffect hook', () => {
     const sideEffect = { [1]: false, [2]: false }
 
-    const { flushEffects, setProps } = useHook(
+    const { rerender, unmount } = testHook(
       ({ id }) => {
         useEffect(() => {
           sideEffect[id] = true
@@ -16,45 +16,49 @@ describe('useEffect tests', () => {
           }
         }, [id])
       },
-      { id: 1 }
+      { initialProps: { id: 1 } }
     )
 
-    flushEffects()
-
     expect(sideEffect[1]).toBe(true)
     expect(sideEffect[2]).toBe(false)
 
-    setProps({ id: 2 })
-    flushEffects()
+    rerender({ id: 2 })
 
     expect(sideEffect[1]).toBe(false)
     expect(sideEffect[2]).toBe(true)
+
+    unmount()
+
+    expect(sideEffect[1]).toBe(false)
+    expect(sideEffect[2]).toBe(false)
   })
 
   test('should handle useLayoutEffect hook', () => {
     const sideEffect = { [1]: false, [2]: false }
 
-    const { flushEffects, setProps } = useHook(
+    const { rerender, unmount } = testHook(
       ({ id }) => {
-        useLayoutEffect(() => {
+        useEffect(() => {
           sideEffect[id] = true
           return () => {
             sideEffect[id] = false
           }
         }, [id])
       },
-      { id: 1 }
+      { initialProps: { id: 1 } }
     )
 
-    flushEffects()
-
     expect(sideEffect[1]).toBe(true)
     expect(sideEffect[2]).toBe(false)
 
-    setProps({ id: 2 })
-    flushEffects()
+    rerender({ id: 2 })
 
     expect(sideEffect[1]).toBe(false)
     expect(sideEffect[2]).toBe(true)
+
+    unmount()
+
+    expect(sideEffect[1]).toBe(false)
+    expect(sideEffect[2]).toBe(false)
   })
 })