Merge pull request #1 from stephenkilbourn/stephenkilbourn-fix-ssr-after

feat: add test to reproduce testing-library#605

Author: stephenkilbourn

package.json

@@ -59,6 +59,7 @@
     "docz-theme-default": "1.2.0",
     "docz-utils": "2.3.0",
     "eslint": "7.24.0",
+    "eslint-plugin-import": "^2.26.0",
     "kcd-scripts": "9.1.0",
     "prettier": "^2.2.1",
     "react": "17.0.2",

src/server/__tests__/ssr.test.ts

@@ -0,0 +1,22 @@
+/**
+ * @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,45 @@ 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')
         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)
+          }
         })
       }
     },