feat: Convert to TypeScript (#520)

* Added tsconfig.json. Modified eslint config

* Convert src/cleanup.js to TypeScript

* Change src/cleanup.ts to use inline types

* revert eslintrc

* disable eslint for cleanup import

this can be reverted when `pure.js` is converted to typescript

* convert index to typescript

just a rename 😅

* BREAKING CHANGE: Worked on typing asyncUtils. Removed deprecated wait. Disabled import/no-unresolved for now

* Fix incorrect cleanup callback type

* asyncUtils has been updated. Two lines are disabled for eslint.

* remove unnecessary eslint disable

* Prettier was stripping try catch types
- see: https://prettier.io/blog/2020/08/24/2.1.0.html\#type-annotations-on-catch-clauses-8805httpsgithubcomprettierprettierpull8805-by-fiskerhttpsgithubcomfisker
- Updated prettier in local devDeps to resolve directly to newest supported version

* Type for callback handle generic input & undefined handled by nullish operator
TS expecting explicit return of undefined from arrow function with type
Expected to return a value at the end of arrow function.eslintconsistent-return
resolved by passing return in catch with undefined, same behavior more explicit

* comments for review

* VoidFunction in place for void until decided behavior for waitFor()

* Utilizing OR operator with generic Types allows for desired behavior and previous tests pass

* mistakenly left out linter ignores in last commit

* Minimum types started for Pure file
- File needs better, improved typing and Refactoring for Linter Disables to be removed IF POSSIBLE

* removed comments -- answered in PR
- Types and OR check should handle expected behavior

* Generic HTML types for initialProps

* Generic HTML types for initialProps

* Generic type for callback and initialProps

* Generics added and CB toplevel same generic pattern added

* force rebuild with unbound method eslint ignore

* parser issue -- attempt to fix by removing specific TS eslint rule

* Newer versions of ESLint might resolve the parser issue

* Added configs to get started on test conversion

* Generic type for resultContainer

this should allow typescript to infer the type of result.current
further improvments needed to add type guards

* convert tests that require no changes

renamed tests that didn't require code changes to the tests

* add types to cleanup test

* Test TS Overhaul
- Amr, Tiger and myself worked on these commits
- Other Raid members in chat assisted
- All tests are strongly typed with minimal types
to allow for working and made sure tests types were easily usable
with types in Pure and Utils file, allow for good UX & DX

* Amr updated types useEffect

* Jens suggestion for more generic number key type

* Remove wait reference from docs

* Add nobrayner to contributors

* Add JacobMGEvans to contributors

* Update src/pure.tsx

* Add tigerabrodi to contributors

* Add Amr, Juhana, and Jens to contributors

* update suspenseHook, cache type and the type of the error in catch.

* cleanup.ts, update the way addCleanup adds another callback to cleanupCallbacks.

* Made generics more descriptive, made TestHook generic

* Remove some eslint disables that didn't do anything

* Remove DefinitelyTyped reference in CONTRIBUTING.md

* chore: disable declaration for tests

* Removes createTimeoutError. Adds constructor to TimeoutError. Adds typeing to waitForValueToChange options

* Remove conditional in TestHook for hookProps

* Replace old types defs with referenced types in dependencies

* Remove destructuring of `testRenderer`

* Disabled floating promise lint rule globally

* Refactor TestHook catch to not disable lint rules

* Disabled eslint error for while(true)

* Cleaned up some line warnings from tests

* Added "typecheck" kcd-script to improve "validate" script

* Clean up ThrowError type in errorHook tests

* Replace VoidFunction with () => void

* Replace CallableFunction with a more explicit function type

Co-authored-by: Braydon Hall <[email protected]>
Co-authored-by: Amr Gad <[email protected]>
Co-authored-by: tigerabrodi <[email protected]>
Co-authored-by: Jacob Evans <[email protected]>
Co-authored-by: Jacob M-G Evans <[email protected]>
Co-authored-by: marcosvega91 <[email protected]>
Co-authored-by: Michael Peyper <[email protected]>

Author: 7 people

.all-contributorsrc

@@ -212,6 +212,64 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "nobrayner",
+      "name": "Braydon Hall",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/40751395?v=4",
+      "profile": "https://github.com/nobrayner",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "JacobMGEvans",
+      "name": "Jacob M-G Evans",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/27247160?v=4",
+      "profile": "https://dev.to/jacobmgevans",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "tigerabrodi",
+      "name": "Tiger Abrodi",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/49603590?v=4",
+      "profile": "https://tigerabrodi.dev/",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "merodiro",
+      "name": "Amr A.Mohammed",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/17033502?v=4",
+      "profile": "https://github.com/merodiro",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "juhanakristian",
+      "name": "Juhana Jauhiainen",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/544386?v=4",
+      "profile": "https://github.com/juhanakristian",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "jensmeindertsma",
+      "name": "Jens Meindertsma",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/64677517?v=4",
+      "profile": "https://github.com/jensmeindertsma",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ],
   "commitConvention": "none"

.eslintrc

@@ -1,10 +1,16 @@
 {
-  "extends": "./node_modules/kcd-scripts/eslint.js",
+  "extends": ["./node_modules/kcd-scripts/eslint.js"],
   "rules": {
     "max-lines-per-function": "off",
     "no-constant-condition": "off",
     "no-await-in-loop": "off",
+    "no-console": "off",
+    "import/no-unresolved": "off",
     "react-hooks/rules-of-hooks": "off",
-    "no-console": "off"
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/no-unnecessary-condition": "off"
+  },
+  "parserOptions": {
+    "project": ["./tsconfig.json", "./test/tsconfig.json"]
   }
 }

CONTRIBUTING.md

@@ -27,11 +27,6 @@ select the added contribution type.
 Please make sure to run the tests before you commit your changes. You can do so by running
 `npm test`.
 
-### Update Typings
-
-The TypeScript type definitions can be found in the
-[DefinitelyTyped repo](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__react-hooks).
-
 ## Help needed
 
 Please check out the

README.md

@@ -192,6 +192,14 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/joshuaellis"><img src="https://avatars0.githubusercontent.com/u/37798644?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Josh</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=joshuaellis" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/Goldziher"><img src="https://avatars1.githubusercontent.com/u/30733348?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Na'aman Hirschfeld</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=Goldziher" title="Code">💻</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/nobrayner"><img src="https://avatars2.githubusercontent.com/u/40751395?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Braydon Hall</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=nobrayner" title="Code">💻</a></td>
+    <td align="center"><a href="https://dev.to/jacobmgevans"><img src="https://avatars1.githubusercontent.com/u/27247160?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jacob M-G Evans</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=JacobMGEvans" title="Code">💻</a> <a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=JacobMGEvans" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://tigerabrodi.dev/"><img src="https://avatars1.githubusercontent.com/u/49603590?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tiger Abrodi</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=tigerabrodi" title="Code">💻</a> <a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=tigerabrodi" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/merodiro"><img src="https://avatars1.githubusercontent.com/u/17033502?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Amr A.Mohammed</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=merodiro" title="Code">💻</a> <a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=merodiro" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/juhanakristian"><img src="https://avatars1.githubusercontent.com/u/544386?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Juhana Jauhiainen</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=juhanakristian" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/jensmeindertsma"><img src="https://avatars3.githubusercontent.com/u/64677517?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jens Meindertsma</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=jensmeindertsma" title="Code">💻</a> <a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=jensmeindertsma" title="Tests">⚠️</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

docs/api-reference.md

@@ -259,28 +259,3 @@ The maximum amount of time in milliseconds (ms) to wait. By default, no timeout
 If this option is set to `true`, any errors that occur while waiting are treated as a failed check.
 If this option is set to `false`, any errors that occur while waiting cause the promise to be
 rejected. By default, errors are not suppressed for this utility.
-
-### `wait`
-
-_(DEPRECATED, use [`waitFor`](/reference/api#waitfor) instead)_
-
-```js
-function wait(callback: function(): boolean|void, options?: {
-  timeout?: number,
-  suppressErrors?: boolean
-}): Promise<void>
-```
-
-Returns a `Promise` that resolves if the provided callback executes without exception and returns a
-truthy or `undefined` value. It is safe to use the [`result` of `renderHook`](/reference/api#result)
-in the callback to perform assertion or to test values.
-
-#### `timeout`
-
-The maximum amount of time in milliseconds (ms) to wait. By default, no timeout is applied.
-
-#### `suppressErrors`
-
-If this option is set to `true`, any errors that occur while waiting are treated as a failed check.
-If this option is set to `false`, any errors that occur while waiting cause the promise to be
-rejected. By default, errors are suppressed for this utility.

jest.config.js

@@ -1,6 +1,7 @@
+// eslint-disable-next-line
 const { jest: jestConfig } = require('kcd-scripts/config')
 
 module.exports = Object.assign(jestConfig, {
   roots: ['<rootDir>/src', '<rootDir>/test'],
-  testMatch: ['<rootDir>/test/*.js']
+  testMatch: ['<rootDir>/test/*.(ts|tsx|js)']
 })

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0-semantically-released",
   "description": "Simple and complete React hooks testing utilities that encourage good testing practices.",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "keywords": [
     "testing",
     "react",
@@ -27,29 +28,34 @@
     "validate": "kcd-scripts validate",
     "prepare": "npm run build",
     "build": "kcd-scripts build --out-dir lib",
+    "test": "kcd-scripts test",
+    "typecheck": "kcd-scripts typecheck",
     "lint": "kcd-scripts lint",
     "format": "kcd-scripts format",
     "coverage": "codecov",
-    "test": "kcd-scripts test",
     "docs:dev": "docz dev",
     "docs:build": "docz build",
     "contributors:add": "all-contributors add"
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@types/testing-library__react-hooks": "^3.4.0"
+    "@types/react": ">=16.9.0",
+    "@types/react-test-renderer": ">=16.9.0"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.9.1",
     "all-contributors-cli": "6.19.0",
     "codecov": "3.8.1",
     "docz": "2.3.1",
     "docz-theme-default": "1.2.0",
     "docz-utils": "2.3.0",
+    "eslint": "7.15.0",
     "kcd-scripts": "7.5.2",
+    "prettier": "^2.2.1",
     "react": "17.0.1",
     "react-test-renderer": "17.0.1",
-    "typescript": "4.1.2",
-    "eslint": "7.15.0"
+    "typescript": "4.1.2"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

src/asyncUtils.js

@@ -0,0 +1,112 @@
+import { act } from 'react-test-renderer'
+
+export interface WaitOptions {
+  interval?: number
+  timeout?: number
+  suppressErrors?: boolean
+}
+
+class TimeoutError extends Error {
+  constructor(utilName: string, { timeout }: Pick<WaitOptions, 'timeout'>) {
+    super(`Timed out in ${utilName} after ${timeout as number}ms.`)
+  }
+}
+
+function resolveAfter(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}
+
+function asyncUtils(addResolver: (callback: () => void) => void) {
+  let nextUpdatePromise: Promise<void> | null = null
+
+  const waitForNextUpdate = async (options: Pick<WaitOptions, 'timeout'> = {}) => {
+    if (!nextUpdatePromise) {
+      nextUpdatePromise = new Promise((resolve, reject) => {
+        let timeoutId: ReturnType<typeof setTimeout>
+        if (options.timeout && options.timeout > 0) {
+          timeoutId = setTimeout(
+            () => reject(new TimeoutError('waitForNextUpdate', options)),
+            options.timeout
+          )
+        }
+        addResolver(() => {
+          clearTimeout(timeoutId)
+          nextUpdatePromise = null
+          resolve()
+        })
+      })
+      await act(() => nextUpdatePromise as Promise<void>)
+    }
+    await nextUpdatePromise
+  }
+
+  const waitFor = async <T>(
+    callback: () => T | Promise<T>,
+    { interval, timeout, suppressErrors = true }: WaitOptions = {}
+  ) => {
+    const checkResult = () => {
+      try {
+        const callbackResult = callback()
+        return callbackResult || callbackResult === undefined
+      } catch (error: unknown) {
+        if (!suppressErrors) {
+          throw error as Error
+        }
+        return undefined
+      }
+    }
+
+    const waitForResult = async () => {
+      const initialTimeout = timeout
+      while (true) {
+        const startTime = Date.now()
+        try {
+          const nextCheck = interval
+            ? Promise.race([waitForNextUpdate({ timeout }), resolveAfter(interval)])
+            : waitForNextUpdate({ timeout })
+
+          await nextCheck
+
+          if (checkResult()) {
+            return
+          }
+        } catch (error: unknown) {
+          if (error instanceof TimeoutError) {
+            throw new TimeoutError('waitFor', { timeout: initialTimeout })
+          }
+          throw error as Error
+        }
+        if (timeout) timeout -= Date.now() - startTime
+      }
+    }
+
+    if (!checkResult()) {
+      await waitForResult()
+    }
+  }
+
+  const waitForValueToChange = async (selector: () => unknown, options: WaitOptions = {}) => {
+    const initialValue = selector()
+    try {
+      await waitFor(() => selector() !== initialValue, {
+        suppressErrors: false,
+        ...options
+      })
+    } catch (error: unknown) {
+      if (error instanceof TimeoutError) {
+        throw new TimeoutError('waitForValueToChange', options)
+      }
+      throw error as Error
+    }
+  }
+
+  return {
+    waitFor,
+    waitForNextUpdate,
+    waitForValueToChange
+  }
+}
+
+export default asyncUtils

src/asyncUtils.ts

@@ -1,4 +1,4 @@
-let cleanupCallbacks = []
+let cleanupCallbacks: (() => Promise<void> | void)[] = []
 
 async function cleanup() {
   for (const callback of cleanupCallbacks) {
@@ -7,12 +7,12 @@ async function cleanup() {
   cleanupCallbacks = []
 }
 
-function addCleanup(callback) {
-  cleanupCallbacks.unshift(callback)
+function addCleanup(callback: () => Promise<void> | void) {
+  cleanupCallbacks = [callback, ...cleanupCallbacks]
   return () => removeCleanup(callback)
 }
 
-function removeCleanup(callback) {
+function removeCleanup(callback: () => Promise<void> | void) {
   cleanupCallbacks = cleanupCallbacks.filter((cb) => cb !== callback)
 }
 

src/cleanup.js renamed to src/cleanup.ts

@@ -0,0 +1,124 @@
+import React, { ReactElement, ReactNode, Suspense } from 'react'
+import { act, create, ReactTestRenderer } from 'react-test-renderer'
+import asyncUtils from './asyncUtils'
+import { cleanup, addCleanup, removeCleanup } from './cleanup'
+
+function isPromise<T>(value: unknown): boolean {
+  return typeof (value as PromiseLike<T>).then === 'function'
+}
+
+type TestHookProps<TProps, TResult> = {
+  callback: (props: TProps) => TResult
+  hookProps: TProps | undefined
+  onError: (error: Error) => void
+  children: (value: TResult) => void
+}
+
+function TestHook<TProps, TResult>({
+  callback,
+  hookProps,
+  onError,
+  children
+}: TestHookProps<TProps, TResult>) {
+  try {
+    // coerce undefined into TProps, so it maintains the previous behaviour
+    children(callback(hookProps as TProps))
+  } catch (err: unknown) {
+    if (isPromise(err)) {
+      throw err
+    } else {
+      onError(err as Error)
+    }
+  }
+  return null
+}
+
+function Fallback() {
+  return null
+}
+
+function resultContainer<TValue>() {
+  const results: Array<{ value?: TValue; error?: Error }> = []
+  const resolvers: Array<() => void> = []
+
+  const result = {
+    get all() {
+      return results.map(({ value, error }) => error ?? value)
+    },
+    get current() {
+      const { value, error } = results[results.length - 1]
+      if (error) {
+        throw error
+      }
+      return value as TValue
+    },
+    get error() {
+      const { error } = results[results.length - 1]
+      return error
+    }
+  }
+
+  const updateResult = (value?: TValue, error?: Error) => {
+    results.push({ value, error })
+    resolvers.splice(0, resolvers.length).forEach((resolve) => resolve())
+  }
+
+  return {
+    result,
+    addResolver: (resolver: () => void) => {
+      resolvers.push(resolver)
+    },
+    setValue: (value: TValue) => updateResult(value),
+    setError: (error: Error) => updateResult(undefined, error)
+  }
+}
+
+function renderHook<TProps, TResult>(
+  callback: (props: TProps) => TResult,
+  { initialProps, wrapper }: { initialProps?: TProps; wrapper?: React.ComponentType<TProps> } = {}
+) {
+  const { result, setValue, setError, addResolver } = resultContainer<TResult>()
+  const hookProps = { current: initialProps }
+
+  const wrapUiIfNeeded = (innerElement: ReactNode) =>
+    wrapper ? React.createElement(wrapper, hookProps.current, innerElement) : innerElement
+
+  const toRender = () =>
+    wrapUiIfNeeded(
+      <Suspense fallback={<Fallback />}>
+        <TestHook callback={callback} hookProps={hookProps.current} onError={setError}>
+          {setValue}
+        </TestHook>
+      </Suspense>
+    ) as ReactElement
+
+  let testRenderer: ReactTestRenderer
+  act(() => {
+    testRenderer = create(toRender())
+  })
+
+  function rerenderHook(newProps: typeof initialProps = hookProps.current) {
+    hookProps.current = newProps
+    act(() => {
+      testRenderer.update(toRender())
+    })
+  }
+
+  function unmountHook() {
+    act(() => {
+      removeCleanup(unmountHook)
+      testRenderer.unmount()
+    })
+  }
+
+  addCleanup(unmountHook)
+
+  return {
+    result,
+    rerender: rerenderHook,
+    unmount: unmountHook,
+    ...asyncUtils(addResolver)
+  }
+}
+
+export { renderHook, cleanup, addCleanup, removeCleanup, act }

src/index.js renamed to src/index.ts

@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react'
 import { renderHook } from '../src'
 
 describe('async hook tests', () => {
-  const useSequence = (...values) => {
+  const useSequence = (...values: string[]) => {
     const [first, ...otherValues] = values
     const [value, setValue] = useState(first)
     const index = useRef(0)
@@ -266,92 +266,4 @@ describe('async hook tests', () => {
 
     expect(result.current).toBe('third')
   })
-
-  test('should wait for expectation to pass (deprecated)', async () => {
-    const { result, wait } = renderHook(() => useSequence('first', 'second', 'third'))
-
-    expect(result.current).toBe('first')
-
-    let complete = false
-    await wait(() => {
-      expect(result.current).toBe('third')
-      complete = true
-    })
-    expect(complete).toBe(true)
-  })
-
-  test('should not hang if expectation is already passing (deprecated)', async () => {
-    const { result, wait } = renderHook(() => useSequence('first', 'second'))
-
-    expect(result.current).toBe('first')
-
-    let complete = false
-    await wait(() => {
-      expect(result.current).toBe('first')
-      complete = true
-    })
-    expect(complete).toBe(true)
-  })
-
-  test('should reject if callback throws error (deprecated)', async () => {
-    const { result, wait } = renderHook(() => useSequence('first', 'second', 'third'))
-
-    expect(result.current).toBe('first')
-
-    await expect(
-      wait(
-        () => {
-          if (result.current === 'second') {
-            throw new Error('Something Unexpected')
-          }
-          return result.current === 'third'
-        },
-        {
-          suppressErrors: false
-        }
-      )
-    ).rejects.toThrow(Error('Something Unexpected'))
-  })
-
-  test('should reject if callback immediately throws error (deprecated)', async () => {
-    const { result, wait } = renderHook(() => useSequence('first', 'second', 'third'))
-
-    expect(result.current).toBe('first')
-
-    await expect(
-      wait(
-        () => {
-          throw new Error('Something Unexpected')
-        },
-        {
-          suppressErrors: false
-        }
-      )
-    ).rejects.toThrow(Error('Something Unexpected'))
-  })
-
-  test('should wait for truthy value (deprecated)', async () => {
-    const { result, wait } = renderHook(() => useSequence('first', 'second', 'third'))
-
-    expect(result.current).toBe('first')
-
-    await wait(() => result.current === 'third')
-
-    expect(result.current).toBe('third')
-  })
-
-  test('should reject if timeout exceeded when waiting for expectation to pass (deprecated)', async () => {
-    const { result, wait } = renderHook(() => useSequence('first', 'second', 'third'))
-
-    expect(result.current).toBe('first')
-
-    await expect(
-      wait(
-        () => {
-          expect(result.current).toBe('third')
-        },
-        { timeout: 75 }
-      )
-    ).rejects.toThrow(Error('Timed out in wait after 75ms.'))
-  })
 })

src/pure.js

@@ -4,10 +4,11 @@ import { useEffect } from 'react'
 // then we DON'T auto-wire up the afterEach for folks
 describe('skip auto cleanup (disabled) tests', () => {
   let cleanupCalled = false
-  let renderHook
+  let renderHook: (arg0: () => void) => void
 
   beforeAll(() => {
     process.env.RHTL_SKIP_AUTO_CLEANUP = 'true'
+    // eslint-disable-next-line
     renderHook = require('../src').renderHook
   })
 

src/pure.tsx

@@ -4,11 +4,13 @@ import { useEffect } from 'react'
 // then we DON'T auto-wire up the afterEach for folks
 describe('skip auto cleanup (no afterEach) tests', () => {
   let cleanupCalled = false
-  let renderHook
+  let renderHook: (arg0: () => void) => void
 
   beforeAll(() => {
+    // @ts-expect-error Turning off AfterEach -- ignore Jest LifeCycle Type
     // eslint-disable-next-line no-global-assign
     afterEach = false
+    // eslint-disable-next-line
     renderHook = require('../').renderHook
   })
 

test/asyncHook.js renamed to test/asyncHook.ts

@@ -21,8 +21,8 @@ describe('cleanup tests', () => {
   })
 
   test('should cleanup all rendered hooks', async () => {
-    const cleanupCalled = []
-    const hookWithCleanup = (id) => {
+    const cleanupCalled: boolean[] = []
+    const hookWithCleanup = (id: number) => {
       useEffect(() => {
         return () => {
           cleanupCalled[id] = true
@@ -40,7 +40,7 @@ describe('cleanup tests', () => {
   })
 
   test('should call cleanups in reverse order', async () => {
-    const callSequence = []
+    const callSequence: string[] = []
     addCleanup(() => {
       callSequence.push('cleanup')
     })
@@ -62,7 +62,7 @@ describe('cleanup tests', () => {
   })
 
   test('should wait for async cleanup', async () => {
-    const callSequence = []
+    const callSequence: string[] = []
     addCleanup(() => {
       callSequence.push('cleanup')
     })
@@ -85,7 +85,7 @@ describe('cleanup tests', () => {
   })
 
   test('should remove cleanup using removeCleanup', async () => {
-    const callSequence = []
+    const callSequence: string[] = []
     addCleanup(() => {
       callSequence.push('cleanup')
     })
@@ -110,7 +110,7 @@ describe('cleanup tests', () => {
   })
 
   test('should remove cleanup using returned handler', async () => {
-    const callSequence = []
+    const callSequence: string[] = []
     addCleanup(() => {
       callSequence.push('cleanup')
     })

test/autoCleanup.disabled.js renamed to test/autoCleanup.disabled.ts

@@ -2,23 +2,23 @@ import { useState, useEffect } from 'react'
 import { renderHook } from '../src'
 
 describe('error hook tests', () => {
-  function useError(throwError) {
+  function useError(throwError: boolean) {
     if (throwError) {
       throw new Error('expected')
     }
     return true
   }
 
-  function useAsyncError(throwError) {
-    const [value, setValue] = useState()
+  function useAsyncError(throwError: boolean) {
+    const [value, setValue] = useState<boolean>()
     useEffect(() => {
       const timeout = setTimeout(() => setValue(throwError), 100)
       return () => clearTimeout(timeout)
     }, [throwError])
     return useError(value)
   }
 
-  function useEffectError(throwError) {
+  function useEffectError(throwError: boolean) {
     useEffect(() => {
       useError(throwError)
     }, [throwError])

test/autoCleanup.noAfterEach.js renamed to test/autoCleanup.noAfterEach.ts

@@ -1,10 +1,10 @@
 import { renderHook } from '../src'
 
 describe('suspense hook tests', () => {
-  const cache = {}
-  const fetchName = (isSuccessful) => {
+  const cache: { value?: Promise<string | Error> | string | Error } = {}
+  const fetchName = (isSuccessful: boolean) => {
     if (!cache.value) {
-      cache.value = new Promise((resolve, reject) => {
+      cache.value = new Promise<string>((resolve, reject) => {
         setTimeout(() => {
           if (isSuccessful) {
             resolve('Bob')
@@ -14,15 +14,15 @@ describe('suspense hook tests', () => {
         }, 50)
       })
         .then((value) => (cache.value = value))
-        .catch((e) => (cache.value = e))
+        .catch((e: Error) => (cache.value = e))
     }
     return cache.value
   }
 
   const useFetchName = (isSuccessful = true) => {
     const name = fetchName(isSuccessful)
-    if (typeof name.then === 'function' || name instanceof Error) {
-      throw name
+    if (name instanceof Promise || name instanceof Error) {
+      throw name as unknown
     }
     return name
   }

test/autoCleanup.js renamed to test/autoCleanup.ts

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "declaration": false
+  },
+  "exclude": [],
+  "include": ["."]
+}

test/cleanup.js renamed to test/cleanup.ts

@@ -15,7 +15,7 @@ describe('useContext tests', () => {
   test('should get value from context provider', () => {
     const TestContext = createContext('foo')
 
-    const wrapper = ({ children }) => (
+    const wrapper: React.FC = ({ children  } ) => (
       <TestContext.Provider value="bar">{children}</TestContext.Provider>
     )
 
@@ -29,7 +29,7 @@ describe('useContext tests', () => {
 
     const value = { current: 'bar' }
 
-    const wrapper = ({ children }) => (
+    const wrapper: React.FC = ({ children }) => (
       <TestContext.Provider value={value.current}>{children}</TestContext.Provider>
     )
 
@@ -45,7 +45,8 @@ describe('useContext tests', () => {
   test('should update value in context when props are updated', () => {
     const TestContext = createContext('foo')
 
-    const wrapper = ({ current, children }) => (
+
+    const wrapper: React.FC<{current: string}> = ({ current, children }) => (
       <TestContext.Provider value={current}>{children}</TestContext.Provider>
     )
 

test/customHook.js renamed to test/customHook.ts

@@ -3,7 +3,7 @@ import { renderHook } from '../src'
 
 describe('useEffect tests', () => {
   test('should handle useEffect hook', () => {
-    const sideEffect = { 1: false, 2: false }
+    const sideEffect: { [key: number]: boolean } = { 1: false, 2: false }
 
     const { rerender, unmount } = renderHook(
       ({ id }) => {
@@ -32,7 +32,7 @@ describe('useEffect tests', () => {
   })
 
   test('should handle useLayoutEffect hook', () => {
-    const sideEffect = { 1: false, 2: false }
+    const sideEffect: { [key: number]: boolean } = { 1: false, 2: false }
 
     const { rerender, unmount } = renderHook(
       ({ id }) => {

test/errorHook.js renamed to test/errorHook.ts

@@ -3,7 +3,8 @@ import { renderHook, act } from '../src'
 
 describe('useReducer tests', () => {
   test('should handle useReducer hook', () => {
-    const reducer = (state, action) => (action.type === 'inc' ? state + 1 : state)
+    const reducer = (state: number, action: { type: string }) =>
+      action.type === 'inc' ? state + 1 : state
     const { result } = renderHook(() => useReducer(reducer, 0))
 
     const [initialState, dispatch] = result.current

test/resultHistory.js renamed to test/resultHistory.ts

@@ -13,7 +13,7 @@ describe('useHook tests', () => {
 
   test('should handle useImperativeHandle hook', () => {
     const { result } = renderHook(() => {
-      const ref = useRef()
+      const ref = useRef<Record<string, () => boolean>>({})
       useImperativeHandle(ref, () => ({
         fakeImperativeMethod: () => true
       }))

test/suspenseHook.js renamed to test/suspenseHook.ts

@@ -0,0 +1,8 @@
+{
+  "extends": "./node_modules/kcd-scripts/shared-tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "ES6"
+  },
+  "exclude": ["./test"]
+}