fix: improve React mountHook type (#17241)

* feat(react) : improve mountHook types

* chore: Remove wrapping which causes test failing

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>

npm/react/src/mountHook.ts

@@ -1,9 +1,22 @@
 import * as React from 'react'
+
 import { mount } from './mount'
 
+type MountHookResult<T> = {
+  readonly current: T | null | undefined
+  readonly error: Error | null
+}
+
+type ResultContainer<T> = {
+  result: MountHookResult<T>
+  addResolver: (resolver: () => void) => void
+  setValue: (val: T) => void
+  setError: (err: Error) => void
+}
+
 // mounting hooks inside a test component mostly copied from
 // https://github.com/testing-library/react-hooks-testing-library/blob/master/src/pure.js
-function resultContainer<T> () {
+function resultContainer<T> (): ResultContainer<T> {
   let value: T | undefined | null = null
   let error: Error | null = null
   const resolvers: any[] = []
@@ -29,7 +42,7 @@ function resultContainer<T> () {
 
   return {
     result,
-    addResolver: (resolver: any) => {
+    addResolver: (resolver: (() => void)) => {
       resolvers.push(resolver)
     },
     setValue: (val: T) => updateResult(val),
@@ -46,36 +59,29 @@ type TestHookProps = {
 function TestHook ({ callback, onError, children }: TestHookProps) {
   try {
     children(callback())
-  } catch (err) {
-    if (err.then) {
+  } catch (err: any) {
+    if ('then' in err) {
       throw err
     } else {
       onError(err)
     }
   }
 
-  // TODO decide what the test hook component should show
-  // maybe nothing, or maybe useful information about the hook?
-  // maybe its current properties?
-  // return <div>TestHook</div>
   return null
 }
 
 /**
  * Mounts a React hook function in a test component for testing.
  *
- * @see https://github.com/bahmutov/@cypress/react#advanced-examples
  */
-export const mountHook = (hookFn: (...args: any[]) => any) => {
-  const { result, setValue, setError } = resultContainer()
+export const mountHook = <T>(hookFn: (...args: any[]) => T) => {
+  const { result, setValue, setError } = resultContainer<T>()
 
-  return mount(
-    React.createElement(TestHook, {
-      callback: hookFn,
-      onError: setError,
-      children: setValue,
-    }),
-  ).then(() => {
-    cy.wrap(result)
+  const componentTest: React.ReactElement = React.createElement(TestHook, {
+    callback: hookFn,
+    onError: setError,
+    children: setValue,
   })
+
+  return mount(componentTest).then(() => result)
 }