simplify typing test & fix type definitions

Author: otofu-square

index.d.ts

@@ -1,13 +1,13 @@
 import { cleanup, act, RenderOptions, RenderResult } from 'react-testing-library'
 
-export function renderHook<P extends any, T extends (...args: [P]) => any>(
-  callback: (_: P) => ReturnType<T>,
+export function renderHook<P extends any, R extends any>(
+  callback: (...args: [P]) => R,
   options?: {
     initialProps?: P
   } & RenderOptions
 ): {
   readonly result: {
-    current: ReturnType<T>
+    current: R
   }
   readonly unmount: RenderResult['unmount']
   readonly rerender: (hookProps?: P) => void

test/typescript/renderHook.ts

@@ -1,55 +1,55 @@
-import { useState, createContext, useContext, useMemo } from 'react'
+import { useState, useCallback } from 'react'
 import { renderHook } from 'react-hooks-testing-library'
 
-const DARK: 'dark' = 'dark'
-const LIGHT: 'light' = 'light'
-
-type InitialTheme = typeof DARK | typeof LIGHT | undefined
-
-const themes = {
-  light: { primaryLight: '#FFFFFF', primaryDark: '#000000' },
-  dark: { primaryLight: '#000000', primaryDark: '#FFFFFF' }
-}
-
-const ThemesContext = createContext(themes)
-
-const useTheme = (initialTheme: InitialTheme = DARK) => {
-  const themes = useContext(ThemesContext)
-  const [theme, setTheme] = useState(initialTheme)
-  const toggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light')
+const useCounter = (initialCount: number = 0) => {
+  const [count, setCount] = useState(initialCount)
+  const incrementBy = useCallback(
+    (n: number) => {
+      setCount(count + n)
+    },
+    [count]
+  )
+  const decrementBy = useCallback(
+    (n: number) => {
+      setCount(count - n)
+    },
+    [count]
+  )
+  return {
+    count,
+    incrementBy,
+    decrementBy
   }
-  return useMemo(() => ({ ...themes[theme], toggleTheme }), [theme])
 }
 
 function checkTypesWithNoInitialProps() {
-  const { result, unmount, rerender } = renderHook(() => useTheme())
+  const { result, unmount, rerender } = renderHook(() => useCounter())
 
   // check types
   const _result: {
     current: {
-      primaryDark: string
-      primaryLight: string
-      toggleTheme: () => void
+      count: number
+      incrementBy: (_: number) => void
+      decrementBy: (_: number) => void
     }
   } = result
   const _unmount: () => boolean = unmount
   const _rerender: () => void = rerender
 }
 
 function checkTypesWithInitialProps() {
-  const { result, unmount, rerender } = renderHook(({ theme }) => useTheme(theme), {
-    initialProps: { theme: DARK }
+  const { result, unmount, rerender } = renderHook(({ count }) => useCounter(count), {
+    initialProps: { count: 10 }
   })
 
   // check types
   const _result: {
     current: {
-      primaryDark: string
-      primaryLight: string
-      toggleTheme: () => void
+      count: number
+      incrementBy: (_: number) => void
+      decrementBy: (_: number) => void
     }
   } = result
   const _unmount: () => boolean = unmount
-  const _rerender: (_?: { theme: typeof DARK }) => void = rerender
+  const _rerender: (_?: { count: number }) => void = rerender
 }