refactor: add createLegacyRoot to reduce uncovered code percentage

Ignore root creation code from code covereage
Introduced next react types for React.Root

Author: mpeyper

src/dom/pure.ts

@@ -1,60 +1,35 @@
-import * as ReactDOM from 'react-dom'
 import { act } from 'react-dom/test-utils'
 
 import { RendererProps, RendererOptions } from '../types/react'
 
 import { createRenderHook } from '../core'
 import { createTestHarness } from '../helpers/createTestHarness'
-
-// @ts-ignore
-const isReactConcurrent = !!ReactDOM.createRoot;
+import { createRoot } from '../helpers/createRoot'
 
 function createDomRenderer<TProps, TResult>(
   rendererProps: RendererProps<TProps, TResult>,
   { wrapper }: RendererOptions<TProps>
 ) {
   const container = document.createElement('div')
   const testHarness = createTestHarness(rendererProps, wrapper)
-  if (isReactConcurrent) {
-    // @ts-ignore
-    const root = ReactDOM.createRoot(container)
-    return {
-      render(props?: TProps) {
-        act(() => {
-          root.render(testHarness(props))
-        })
-      },
-      rerender(props?: TProps) {
-        act(() => {
-          root.render(testHarness(props))
-        })
-      },
-      unmount() {
-        act(() => {
-          root.unmount()
-        })
-      },
-      act
-    }
-  } else {
-    return {
-      render(props?: TProps) {
-        act(() => {
-          ReactDOM.render(testHarness(props), container)
-        })
-      },
-      rerender(props?: TProps) {
-        act(() => {
-          ReactDOM.render(testHarness(props), container)
-        })
-      },
-      unmount() {
-        act(() => {
-          ReactDOM.unmountComponentAtNode(container)
-        })
-      },
-      act
-    }
+  const root = createRoot(container)
+  return {
+    render(props?: TProps) {
+      act(() => {
+        root.render(testHarness(props))
+      })
+    },
+    rerender(props?: TProps) {
+      act(() => {
+        root.render(testHarness(props))
+      })
+    },
+    unmount() {
+      act(() => {
+        root.unmount()
+      })
+    },
+    act
   }
 }
 

src/helpers/createRoot.ts

@@ -0,0 +1,30 @@
+import * as ReactDOM from 'react-dom'
+import * as React from 'react'
+
+/* istanbul ignore next */
+function createLegacyRoot(container: Element): ReactDOM.Root {
+  return {
+    render(element: React.ReactElement) {
+      ReactDOM.render(element, container)
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container)
+    }
+  }
+}
+
+/* istanbul ignore next */
+export function createRoot(container: Element) {
+  return (ReactDOM.createRoot ? ReactDOM.createRoot : createLegacyRoot)(container)
+}
+
+/* istanbul ignore next */
+export function hydrateLegacyRoot(container: Element, element: React.ReactElement): ReactDOM.Root {
+  ReactDOM.hydrate(element, container)
+  return createLegacyRoot(container)
+}
+
+/* istanbul ignore next */
+export function hydrateRoot(container: Element, element: React.ReactElement) {
+  return (ReactDOM.hydrateRoot ? ReactDOM.hydrateRoot : hydrateLegacyRoot)(container, element)
+}

src/server/pure.ts

@@ -6,100 +6,54 @@ import { RendererOptions, RendererProps } from '../types/react'
 
 import { createRenderHook } from '../core'
 import { createTestHarness } from '../helpers/createTestHarness'
-
-// @ts-ignore
-const isReactConcurrent = !!ReactDOM.createRoot;
+import { hydrateRoot } from '../helpers/createRoot'
 
 function createServerRenderer<TProps, TResult>(
   rendererProps: RendererProps<TProps, TResult>,
   { wrapper }: RendererOptions<TProps>
 ) {
   let renderProps: TProps | undefined
-  let container: HTMLDivElement | undefined
   let serverOutput: string = ''
   const testHarness = createTestHarness(rendererProps, wrapper, false)
-  if (isReactConcurrent) {
-    let root: any
-    return {
-      render(props?: TProps) {
-        renderProps = props
-        act(() => {
-          try {
-            serverOutput = ReactDOMServer.renderToString(testHarness(props))
-          } catch (e: unknown) {
-            rendererProps.setError(e as Error)
-          }
-        })
-      },
-      hydrate() {
-        if (container) {
-          throw new Error('The component can only be hydrated once')
-        } else {
-          container = document.createElement('div')
-          container.innerHTML = serverOutput
-          act(() => {
-            // @ts-ignore
-            root = ReactDOM.hydrateRoot(container, testHarness(renderProps))
-          })
-        }
-      },
-      rerender(props?: TProps) {
-        if (!container) {
-          throw new Error('You must hydrate the component before you can rerender')
+  let root: ReactDOM.Root | undefined
+  return {
+    render(props?: TProps) {
+      renderProps = props
+      act(() => {
+        try {
+          serverOutput = ReactDOMServer.renderToString(testHarness(props))
+        } catch (e: unknown) {
+          rendererProps.setError(e as Error)
         }
+      })
+    },
+    hydrate() {
+      if (root) {
+        throw new Error('The component can only be hydrated once')
+      } else {
+        const container = document.createElement('div')
+        container.innerHTML = serverOutput
         act(() => {
-          root.render(testHarness(props))
+          root = hydrateRoot(container, testHarness(renderProps))
         })
-      },
-      unmount() {
-        if (container) {
-          act(() => {
-            root.unmount()
-          })
-        }
-      },
-      act
-    };
-  } else {
-    return {
-      render(props?: TProps) {
-        renderProps = props
-        act(() => {
-          try {
-            serverOutput = ReactDOMServer.renderToString(testHarness(props))
-          } catch (e: unknown) {
-            rendererProps.setError(e as Error)
-          }
-        })
-      },
-      hydrate() {
-        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!)
-          })
-        }
-      },
-      rerender(props?: TProps) {
-        if (!container) {
+      }
+    },
+    rerender(props?: TProps) {
+      act(() => {
+        if (!root) {
           throw new Error('You must hydrate the component before you can rerender')
         }
-        act(() => {
-          ReactDOM.render(testHarness(props), container!)
-        })
-      },
-      unmount() {
-        if (container) {
-          act(() => {
-            ReactDOM.unmountComponentAtNode(container!)
-          })
+        root.render(testHarness(props))
+      })
+    },
+    unmount() {
+      act(() => {
+        if (root) {
+          root.unmount()
         }
-      },
-      act
-    };
+      })
+    },
+    act
   }
 }
 

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "./node_modules/kcd-scripts/shared-tsconfig.json",
   "compilerOptions": {
-    "target": "ES6"
+    "target": "ES6",
+    "types": ["node", "jest", "react/next", "react-dom/next"]
   }
 }