Renamed render to be use

Author: mpeyper

README.md

@@ -0,0 +1 @@
+# react-hooks-testing-library

package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-hooks-testing-library",
   "version": "0.1.0",
-  "description": "Utilities for testing React hooks",
+  "description": "Simple component wrapper for testing React hooks",
   "main": "lib/index.js",
   "scripts": {
     "build": "babel --out-dir lib src",
-    "test": "jest --coverage --colors"
+    "test": "jest --coverage"
   },
   "author": "Michael Peyper",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "react-dom": "^16.7.0-alpha.0"
   },
   "peerDependencies": {
-    "react-dom": "^16.7.0-alpha.0"
+    "react": "^16.7.0-alpha.0"
   },
   "jest": {
     "collectCoverageFrom": [

src/index.js

@@ -1,60 +1 @@
-import React from 'react'
-import { render, cleanup } from 'react-testing-library'
-import invariant from 'invariant'
-import uuid from 'uuid-v4'
-
-const renderHook = (hook, context) => (props) => {
-
-  const containerId = uuid()
-
-  const HookHarness = (props) => {
-    context.result = hook(props)
-    return <div data-testid={containerId} />
-  }
-
-  const { queryByTestId, rerender } = render(context.resolveComponent({ children: <HookHarness {...props} /> }))
-
-  const container = queryByTestId(containerId)
-
-  invariant(container !== null, 'You must render children when wrapping the hook')
-
-  context.rerender = (newProps) => rerender(context.resolveComponent({ children: <HookHarness {...newProps} /> }))
-  context.flushEffects = () => rerender(context.resolveComponent({ children: <HookHarness {...props} /> }))
-
-  return context.result 
-}
-
-const updateHook = (context) => (props) => {
-  invariant(context.rerender, 'You must render the hook before it can be updated')
-
-  context.rerender(props)
-
-  return context.result
-}
-
-const flushHookEffects = (context) => () => {
-  invariant(context.rerender, 'You must render the hook before effects can be flushed')
-
-  context.flushEffects()
-
-  return context.result
-}
-
-const wrapHook = (hook, context) => (wrap) => {
-  invariant(typeof wrap === 'function', 'wrap must be provided a function')
-  const { resolveComponent } = context
-  return useHookAdvanced(hook, { ...context, resolveComponent: (props) => wrap({ children: resolveComponent(props) }) })
-}
-
-const useHookAdvanced = (hook, context) => {
-  return {
-    render: renderHook(hook, context),
-    update: updateHook(context),
-    flushEffects: flushHookEffects(context),
-    wrap: wrapHook(hook, context)
-  }
-}
-
-export const useHook = (hook) => useHookAdvanced(hook, { resolveComponent: ({ children }) => children })
-
-export { cleanup }
+export * from './useHook'

src/useHook.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { render, cleanup } from 'react-testing-library'
+import invariant from 'invariant'
+import uuid from 'uuid-v4'
+
+const use = (hook, context) => (props) => {
+
+  const HookHarness = (props) => {
+    context.result = hook(props)
+    return <div data-testid={context.id} />
+  }
+
+  const { queryByTestId, rerender } = render(context.resolveComponent({ children: <HookHarness {...props} /> }))
+
+  const container = queryByTestId(context.id)
+
+  invariant(container !== null, 'You must render children when wrapping the hook')
+
+  context.rerender = (newProps) => rerender(context.resolveComponent({ children: <HookHarness {...newProps} /> }))
+  context.flushEffects = () => context.rerender(props)
+
+  return context.result 
+}
+
+const update = (context) => (props) => {
+  invariant(context.rerender, 'You must render the hook before it can be updated')
+
+  context.rerender(props)
+
+  return context.result
+}
+
+const flushEffects = (context) => () => {
+  invariant(context.rerender, 'You must render the hook before effects can be flushed')
+
+  context.flushEffects()
+
+  return context.result
+}
+
+const wrap = (hook, context) => (wrap) => {
+  invariant(typeof wrap === 'function', 'wrap must be provided a function')
+  const { resolveComponent } = context
+  return useHookAdvanced(hook, { ...context, resolveComponent: (props) => wrap({ children: resolveComponent(props) }) })
+}
+
+const useHookAdvanced = (hook, context) => {
+  return {
+    use: use(hook, context),
+    update: update(context),
+    flushEffects: flushEffects(context),
+    wrap: wrap(hook, context)
+  }
+}
+
+export const useHook = (hook) => {
+  const context = {
+    id: uuid(),
+    resolveComponent: ({ children }) => children
+  }
+  return useHookAdvanced(hook, context)
+}
+
+export { cleanup }

test/integration.test.js test/useHook.test.jstest/integration.test.js renamed to test/useHook.test.js

@@ -5,9 +5,9 @@ describe('useHook tests', () => {
   afterEach(cleanup)
 
   test('should handle useState hooks', () => {
-    const { render, update } = useHook(() => useState('foo'))
+    const { use, update } = useHook(() => useState('foo'))
 
-    const [value1, setValue] = render()
+    const [value1, setValue] = use()
 
     expect(value1).toBe('foo')
 
@@ -21,13 +21,13 @@ describe('useHook tests', () => {
   test('should handle useContext hooks', () => {
     const TestContext = createContext('foo')
 
-    const { render } = useHook(() => useContext(TestContext)).wrap(({ children }) => (
+    const { use } = useHook(() => useContext(TestContext)).wrap(({ children }) => (
       <TestContext.Provider value='bar'>
         {children}
       </TestContext.Provider>
     ))
 
-    const value = render()
+    const value = use()
 
     expect(value).toBe('bar')
   })
@@ -36,14 +36,14 @@ describe('useHook tests', () => {
 
     const sideEffect = { [1]: false, [2]: false }
 
-    const { render, flushEffects, update } = useHook(({ id }) => useEffect(() => {
+    const { use, flushEffects, update } = useHook(({ id }) => useEffect(() => {
       sideEffect[id] = true
       return () => {
         sideEffect[id] = false
       }
     }, [id]))
 
-    render({ id: 1 })
+    use({ id: 1 })
 
     expect(sideEffect[1]).toBe(false)
     expect(sideEffect[2]).toBe(false)