Support React 18

.github/workflows/validate.yml

@@ -17,6 +17,7 @@ jobs:
     strategy:
       matrix:
         node: [12.13, 12, 14, 16]
+        react: [^16.9.0, ^17.0.2, next]
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
@@ -37,6 +38,9 @@ jobs:
         env:
           HUSKY_SKIP_INSTALL: true
 
+      - name: Use React version
+        run: npm install --save-dev react@"${{ matrix.react }}" react-dom@"${{ matrix.react }}" react-test-renderer@"${{ matrix.react }}"
+
       - name: ▶️ Run validate script
         run: npm run validate
 

package.json

@@ -33,7 +33,6 @@
   "scripts": {
     "setup": "npm install && npm run validate -s",
     "validate": "kcd-scripts validate",
-    "prepare": "npm run build",
     "build": "kcd-scripts build --out-dir lib && npm run generate:submodules",
     "generate:submodules": "ts-node scripts/generate-submodules.ts",
     "test": "kcd-scripts test",
@@ -43,7 +42,9 @@
     "coverage": "codecov",
     "docs:dev": "docz dev",
     "docs:build": "docz build",
-    "contributors:add": "all-contributors add"
+    "contributors:add": "all-contributors add",
+    "install-16": "npm install --save-dev react@\"^16.9.0\" react-dom@\"^16.9.0\" react-test-renderer@\"^16.9.0\"",
+    "install-next": "npm install --save-dev react@next react-dom@next react-test-renderer@next",
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
@@ -64,7 +65,7 @@
     "kcd-scripts": "11.2.0",
     "prettier": "^2.2.1",
     "react": "17.0.2",
-    "react-dom": "^17.0.1",
+    "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "ts-node": "^10.0.0",
     "typescript": "4.3.5"

src/__tests__/resultHistory.test.ts

@@ -23,6 +23,7 @@ describe('result history tests', () => {
       rerender(2)
 
       expect(result.error).toEqual(Error('expected'))
+      // double error thrown for dom, but not default or native...
       expect(result.all).toEqual([0, 1, Error('expected')])
 
       rerender(3)

src/dom/pure.ts

@@ -6,30 +6,55 @@ import { RendererProps, RendererOptions } from '../types/react'
 import { createRenderHook } from '../core'
 import { createTestHarness } from '../helpers/createTestHarness'
 
+// @ts-ignore
+const isReactConcurrent = !!ReactDOM.createRoot;
+
 function createDomRenderer<TProps, TResult>(
   rendererProps: RendererProps<TProps, TResult>,
   { wrapper }: RendererOptions<TProps>
 ) {
   const container = document.createElement('div')
   const testHarness = createTestHarness(rendererProps, wrapper)
-
-  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
+  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
+    }
   }
 }
 

src/server/pure.ts

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