feature/RHTL-68 – server-side-rendering

.gitignore

@@ -2,4 +2,5 @@ node_modules
 coverage
 lib
 .docz
-site
+site
+.vscode

jest.config.js

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

native/index.js

@@ -0,0 +1 @@
+module.exports = require('../lib/native')

native/pure.js

@@ -0,0 +1,2 @@
+// makes it so people can import from '@testing-library/react-hooks/native/pure'
+module.exports = require('../lib/native/pure')

package.json

@@ -14,6 +14,8 @@
   "files": [
     "lib",
     "src",
+    "native",
+    "server",
     "pure.js",
     "dont-cleanup-after-each.js"
   ],
@@ -40,6 +42,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@types/react": ">=16.9.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-test-renderer": ">=16.9.0"
   },
   "devDependencies": {
@@ -54,11 +57,24 @@
     "kcd-scripts": "7.5.3",
     "prettier": "^2.2.1",
     "react": "17.0.1",
+    "react-dom": "^17.0.1",
     "react-test-renderer": "17.0.1",
     "typescript": "4.1.3"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
     "react-test-renderer": ">=16.9.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "react-test-renderer": {
+      "optional": true
+    }
   }
 }

server/index.js

@@ -0,0 +1,2 @@
+// makes it so people can import from '@testing-library/react-hooks/server'
+module.exports = require('../lib/server')

server/pure.js

@@ -0,0 +1,2 @@
+// makes it so people can import from '@testing-library/react-hooks/server/pure'
+module.exports = require('../lib/server/pure')

src/asyncUtils.ts → src/core/asyncUtils.ts

@@ -1,24 +1,9 @@
-import { act } from 'react-test-renderer'
+import { ActTypes, WaitOptions, AsyncUtilsReturn } from 'types'
 
-export interface WaitOptions {
-  interval?: number
-  timeout?: number
-  suppressErrors?: boolean
-}
-
-class TimeoutError extends Error {
-  constructor(util: Function, timeout: number) {
-    super(`Timed out in ${util.name} after ${timeout}ms.`)
-  }
-}
-
-function resolveAfter(ms: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms)
-  })
-}
+import { resolveAfter } from 'helpers/promises'
+import { TimeoutError } from 'helpers/error'
 
-function asyncUtils(addResolver: (callback: () => void) => void) {
+function asyncUtils(act: ActTypes, addResolver: (callback: () => void) => void): AsyncUtilsReturn {
   let nextUpdatePromise: Promise<void> | null = null
 
   const waitForNextUpdate = async ({ timeout }: Pick<WaitOptions, 'timeout'> = {}) => {

src/cleanup.ts → src/core/cleanup.ts

@@ -16,4 +16,13 @@ function removeCleanup(callback: () => Promise<void> | void) {
   cleanupCallbacks = cleanupCallbacks.filter((cb) => cb !== callback)
 }
 
+cleanup.autoRegister = () => {
+  // Automatically registers cleanup in supported testing frameworks
+  if (typeof afterEach === 'function' && !process.env.RHTL_SKIP_AUTO_CLEANUP) {
+    afterEach(async () => {
+      await cleanup()
+    })
+  }
+}
+
 export { cleanup, addCleanup, removeCleanup }

src/core/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+
+import {
+  TestHookProps,
+  NativeRendererOptions,
+  NativeRendererReturn,
+  ResultContainerReturn,
+  RenderHookOptions,
+  RenderResult,
+  ServerRendererReturn,
+  ServerRendererOptions
+} from 'types'
+
+import asyncUtils from './asyncUtils'
+import { cleanup, addCleanup, removeCleanup } from './cleanup'
+
+function resultContainer<TValue>(): ResultContainerReturn<TValue> {
+  const results: Array<{ value?: TValue; error?: Error }> = []
+  const resolvers: Array<() => void> = []
+
+  const result: RenderResult<TValue> = {
+    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)
+  }
+}
+
+// typed this way in relation to this https://github.com/DefinitelyTyped/DefinitelyTyped/issues/44572#issuecomment-625878049
+function defaultWrapper({ children }: { children?: React.ReactNode }) {
+  return (children as unknown) as JSX.Element
+}
+
+const createRenderHook = (
+  createRenderer: <TProps, TResult>(
+    testProps: Omit<TestHookProps<TProps, TResult>, 'hookProps'>,
+    opts: NativeRendererOptions<TProps> | ServerRendererOptions<TProps>
+  ) => NativeRendererReturn<TProps> | ServerRendererReturn<TProps>
+) => <TProps, TResult>(
+  callback: (props: TProps) => TResult,
+  { initialProps, wrapper = defaultWrapper }: RenderHookOptions<TProps> = {}
+) => {
+  const { result, setValue, setError, addResolver } = resultContainer<TResult>()
+  const hookProps = { current: initialProps }
+  const props = { callback, setValue, setError }
+  const options = { wrapper }
+
+  const { render, rerender, unmount, act, ...renderUtils } = createRenderer<TProps, TResult>(
+    props,
+    options
+  )
+
+  render(hookProps.current)
+
+  function rerenderHook(newProps = hookProps.current) {
+    hookProps.current = newProps
+    rerender(hookProps.current)
+  }
+
+  function unmountHook() {
+    removeCleanup(unmountHook)
+    unmount()
+  }
+
+  addCleanup(unmountHook)
+
+  return {
+    result,
+    rerender: rerenderHook,
+    unmount: unmountHook,
+    ...asyncUtils(act, addResolver),
+    ...renderUtils
+  }
+}
+
+export { createRenderHook, cleanup, addCleanup, removeCleanup }

src/core/testHook.ts

@@ -0,0 +1,22 @@
+import { isPromise } from 'helpers/promises'
+
+import { TestHookProps } from 'types'
+
+export default function TestHook<TProps, TResult>({
+  hookProps,
+  callback,
+  setError,
+  setValue
+}: TestHookProps<TProps, TResult>) {
+  try {
+    // coerce undefined into TProps, so it maintains the previous behaviour
+    setValue(callback(hookProps as TProps))
+  } catch (err: unknown) {
+    if (isPromise(err)) {
+      throw err
+    } else {
+      setError(err as Error)
+    }
+  }
+  return null
+}

src/helpers/error.ts

@@ -0,0 +1,7 @@
+class TimeoutError extends Error {
+  constructor(util: Function, timeout: number) {
+    super(`Timed out in ${util.name} after ${timeout}ms.`)
+  }
+}
+
+export { TimeoutError }

src/helpers/promises.ts

@@ -0,0 +1,9 @@
+const resolveAfter = (ms: number) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+
+const isPromise = <T>(value: unknown): boolean =>
+  typeof (value as PromiseLike<T>).then === 'function'
+
+export { isPromise, resolveAfter }

src/index.ts

@@ -1,10 +1,5 @@
-import { cleanup } from './pure'
+import { renderHook, act, cleanup } from './pure'
 
-// Automatically registers cleanup in supported testing frameworks
-if (typeof afterEach === 'function' && !process.env.RHTL_SKIP_AUTO_CLEANUP) {
-  afterEach(async () => {
-    await cleanup()
-  })
-}
+cleanup.autoRegister()
 
-export * from './pure'
+export { renderHook, act, cleanup }

src/native/index.ts

@@ -0,0 +1,5 @@
+import { renderHook, act, cleanup } from './pure'
+
+cleanup.autoRegister()
+
+export { renderHook, act, cleanup }

src/native/pure.tsx

@@ -0,0 +1,43 @@
+import React, { Suspense } from 'react'
+import { act, create, ReactTestRenderer } from 'react-test-renderer'
+
+import { TestHookProps, NativeRendererOptions, NativeRendererReturn } from 'types'
+
+import { createRenderHook, cleanup, addCleanup, removeCleanup } from 'core/index'
+import TestHook from 'core/testHook'
+
+function createNativeRenderer<TProps, TResult>(
+  testHookProps: Omit<TestHookProps<TProps, TResult>, 'hookProps'>,
+  { wrapper: Wrapper }: NativeRendererOptions<TProps>
+): NativeRendererReturn<TProps> {
+  let container: ReactTestRenderer
+
+  const toRender = (props?: TProps): JSX.Element => (
+    <Wrapper {...(props as TProps)}>
+      <TestHook hookProps={props} {...testHookProps} />
+    </Wrapper>
+  )
+
+  return {
+    render(props) {
+      act(() => {
+        container = create(<Suspense fallback={null}>{toRender(props)}</Suspense>)
+      })
+    },
+    rerender(props) {
+      act(() => {
+        container.update(<Suspense fallback={null}>{toRender(props)}</Suspense>)
+      })
+    },
+    unmount() {
+      act(() => {
+        container.unmount()
+      })
+    },
+    act
+  }
+}
+
+const renderHook = createRenderHook(createNativeRenderer)
+
+export { renderHook, act, cleanup, addCleanup, removeCleanup }

src/pure.ts

@@ -0,0 +1,30 @@
+import { RenderingEngineArray, ReactHooksRenderer } from 'types'
+
+const RENDERERS: RenderingEngineArray = [
+  { required: 'react-test-renderer', renderer: './native/pure' }
+]
+
+function getRenderer(renderers: RenderingEngineArray): string {
+  const hasDependency = (name: string) => {
+    try {
+      require(name)
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  const [validRenderer] = renderers.filter(({ required }) => hasDependency(required))
+
+  if (validRenderer) {
+    return validRenderer.renderer
+  } else {
+    const options = renderers.map(({ renderer }) => `  - ${renderer}`).join('\n')
+    throw new Error(`Could not auto-detect a React renderer.  Options are:\n${options}`)
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { renderHook, act, cleanup } = require(getRenderer(RENDERERS)) as ReactHooksRenderer
+
+export { renderHook, act, cleanup }