fix(ssr): Add ability to run SSR tests in pure-node environment (#607)

* fix(ssr): div container created only during hydration

It allows to run tests in real node environment, where no DOM global
objects exists.

Fix: #605

* chore: add xobotyi to hall of fame %)

Author: xobotyi

.all-contributorsrc

@@ -519,6 +519,16 @@
       "contributions": [
         "maintenance"
       ]
+    },
+    {
+      "login": "xobotyi",
+      "name": "Anton Zinovyev",
+      "avatar_url": "https://avatars.githubusercontent.com/u/6178739?v=4",
+      "profile": "https://github.com/xobotyi",
+      "contributions": [
+        "bug",
+        "code"
+      ]
     }
   ],
   "skipCi": true,

README.md

@@ -239,6 +239,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://aleksandar.xyz"><img src="https://avatars.githubusercontent.com/u/7226555?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aleksandar Grbic</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=agjs" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/yoniholmes"><img src="https://avatars.githubusercontent.com/u/184589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jonathan Holmes</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=yoniholmes" title="Code">💻</a></td>
     <td align="center"><a href="https://michaeldeboey.be"><img src="https://avatars.githubusercontent.com/u/6643991?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michaël De Boey</b></sub></a><br /><a href="#maintenance-MichaelDeBoey" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="https://github.com/xobotyi"><img src="https://avatars.githubusercontent.com/u/6178739?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anton Zinovyev</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/issues?q=author%3Axobotyi" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=xobotyi" title="Code">💻</a></td>
   </tr>
 </table>
 

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,44 @@ 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: string = ''
   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!)
         })
-        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!)
       })
     },
     unmount() {
-      if (hydrated) {
+      if (container) {
         act(() => {
-          ReactDOM.unmountComponentAtNode(container)
+          ReactDOM.unmountComponentAtNode(container!)
         })
       }
     },