Simplified internals. More tests

Author: mpeyper

src/createContext.js

@@ -1,6 +1,86 @@
-import createContext from './createContext'
-import useHookAdvanced from './useHookAdvanced'
+import React from 'react'
+import { render, cleanup } from 'react-testing-library'
+import invariant from 'invariant'
+import uuid from 'uuid-v4'
 
-export { cleanup } from 'react-testing-library'
+export const useHook = (hook, ...props) => {
+  const context = {
+    id: uuid(),
+    resolveComponent: (Component) => Component,
+    rendered: false,
+    props
+  }
 
-export const useHook = (hook) => useHookAdvanced(hook, createContext())
+  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 = () => {
+    if (!context.rendered) {
+      renderHook()
+    } else {
+      context.rerender()
+    }
+    return context.currentValue
+  }
+
+  const setProps = (...newProps) => {
+    context.props = newProps
+  }
+
+  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>
+    )
+    return { updateContext }
+  }
+
+  const flushEffects = (minTimes = 1, maxTimes = Math.max(minTimes + 1, 100)) => {
+    invariant(
+      minTimes > 0 && minTimes <= maxTimes,
+      `minTimes (${minTimes}) must me a positive number that is less than maxTimes (${maxTimes})`
+    )
+    invariant(maxTimes > 0, `maxTimes (${maxTimes}) must me a positive number`)
+
+    let lastValue
+    let currentValue
+    let flushCount = 0
+
+    while ((currentValue !== lastValue || flushCount < minTimes) && flushCount < maxTimes) {
+      lastValue = currentValue
+      currentValue = getCurrentValue()
+      flushCount++
+    }
+
+    invariant(
+      flushCount < Math.max(minTimes, maxTimes),
+      `Hook values have not resolved after recalculating ${maxTimes} times`
+    )
+  }
+
+  return {
+    getCurrentValue,
+    getCurrentValues: getCurrentValue,
+    flushEffects,
+    setProps,
+    addContextProvider
+  }
+}
+
+export { cleanup }

src/flush.js

@@ -0,0 +1,46 @@
+import { useState, createContext, useContext, useMemo } from 'react'
+import { useHook, cleanup } from 'src'
+
+describe('custom hook tests', () => {
+  const themes = {
+    light: { primaryLight: '#FFFFFF', primaryDark: '#000000' },
+    dark: { primaryLight: '#000000', primaryDark: '#FFFFFF' }
+  }
+
+  const ThemesContext = createContext(themes)
+
+  const useTheme = (initialTheme) => {
+    const themes = useContext(ThemesContext)
+    const [theme, setTheme] = useState(initialTheme)
+    const changeTheme = () => {
+      setTheme(theme === 'light' ? 'dark' : 'light')
+    }
+    return useMemo(() => ({ ...themes[theme], changeTheme }), [theme])
+  }
+
+  afterEach(cleanup)
+
+  test('should get initial theme from custom hook', () => {
+    const { getCurrentValue } = useHook(() => useTheme('light'))
+
+    const theme = getCurrentValue()
+
+    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 } = useHook(() => useTheme('light'))
+
+    const { changeTheme } = getCurrentValue()
+
+    changeTheme()
+
+    const theme = getCurrentValue()
+
+    expect(theme.primaryLight).toBe('#000000')
+    expect(theme.primaryDark).toBe('#FFFFFF')
+    expect(typeof theme.changeTheme).toBe('function')
+  })
+})

src/index.js

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import { useHook, cleanup } from 'src'
+
+describe('useState tests', () => {
+  afterEach(cleanup)
+
+  test('should use setState value', () => {
+    const { getCurrentValue } = useHook(() => useState('foo'))
+
+    const [value] = getCurrentValue()
+
+    expect(value).toBe('foo')
+  })
+
+  test('should update setState value using setter', () => {
+    const { getCurrentValues } = useHook(() => useState('foo'))
+
+    const [_, setValue] = getCurrentValues()
+
+    setValue('bar')
+
+    const [value] = getCurrentValues()
+
+    expect(value).toBe('bar')
+  })
+})