Merge pull request #7 from jsjoeio/jsjoeio-fix-ssr-after

feat: add test to reproduce testing-library#605

src/server/__tests__/ssr.test.ts

@@ -0,0 +1,20 @@
+/**
+ * @jest-environment node
+ */
+import { useState } from 'react'
+import { renderHook, act } from '..'
+
+// This verifies that renderHook can be called in
+// a SSR-like environment.
+describe('renderHook', () => {
+  function useLoading() {
+    if (typeof window !== 'undefined') {
+      const [loading, setLoading] = useState(false)
+      return { loading, setLoading }
+    }
+  }
+
+  test('should not throw in SSR environment', () => {
+    expect(() => renderHook(() => useLoading())).not.toThrowError('document is not defined')
+  })
+})

src/server/pure.ts

@@ -2,7 +2,7 @@ import ReactDOMServer from 'react-dom/server'
 import ReactDOM from 'react-dom'
 import { act } from 'react-dom/test-utils'
 
-import { RendererProps, RendererOptions } from '../types/react'
+import { RendererOptions, RendererProps } from '../types/react'
 
 import { createRenderHook } from '../core'
 import { createTestHarness } from '../helpers/createTestHarness'
@@ -12,44 +12,46 @@ function createServerRenderer<TProps, TResult>(
   { wrapper }: RendererOptions<TProps>
 ) {
   let renderProps: TProps | undefined
-  let hydrated = false
-  const container = document.createElement('div')
+  let container: HTMLDivElement | undefined
+  let serverOutput = ''
   const testHarness = createTestHarness(rendererProps, wrapper, false)
 
   return {
     render(props?: TProps) {
       renderProps = props
       act(() => {
         try {
-          const serverOutput = ReactDOMServer.renderToString(testHarness(props))
-          container.innerHTML = serverOutput
+          serverOutput = ReactDOMServer.renderToString(testHarness(props))
         } catch (e: unknown) {
           rendererProps.setError(e as Error)
         }
       })
     },
     hydrate() {
-      if (hydrated) {
+      if (container) {
         throw new Error('The component can only be hydrated once')
       } else {
+        container = document.createElement('div')
+        container.innerHTML = serverOutput
         act(() => {
-          ReactDOM.hydrate(testHarness(renderProps), container)
+          ReactDOM.hydrate(testHarness(renderProps), container || null)
         })
-        hydrated = true
       }
     },
     rerender(props?: TProps) {
-      if (!hydrated) {
+      if (!container) {
         throw new Error('You must hydrate the component before you can rerender')
       }
       act(() => {
-        ReactDOM.render(testHarness(props), container)
+        ReactDOM.render(testHarness(props), container || null)
       })
     },
     unmount() {
-      if (hydrated) {
+      if (container) {
         act(() => {
-          ReactDOM.unmountComponentAtNode(container)
+          if (typeof container !== 'undefined') {
+            ReactDOM.unmountComponentAtNode(container)
+          }
         })
       }
     },