Support React 18

.github/workflows/validate.yml

@@ -14,9 +14,12 @@ jobs:
   main:
     # ignore all-contributors PRs
     if: ${{ !contains(github.head_ref, 'all-contributors') }}
+    continue-on-error: ${{ contains(matrix.react, 'next') }}
     strategy:
       matrix:
         node: [12.13, 12, 14, 16]
+        react: [16.9.0, ^16, ^17, next]
+
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
@@ -37,6 +40,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

@@ -1,32 +1,32 @@
-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'
+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)
-
+  const root = createRoot(container)
   return {
     render(props?: TProps) {
       act(() => {
-        ReactDOM.render(testHarness(props), container)
+        root.render(testHarness(props))
       })
     },
     rerender(props?: TProps) {
       act(() => {
-        ReactDOM.render(testHarness(props), container)
+        root.render(testHarness(props))
       })
     },
     unmount() {
       act(() => {
-        ReactDOM.unmountComponentAtNode(container)
+        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,16 +6,16 @@ import { RendererOptions, RendererProps } from '../types/react'
 
 import { createRenderHook } from '../core'
 import { createTestHarness } from '../helpers/createTestHarness'
+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)
-
+  let root: ReactDOM.Root | undefined
   return {
     render(props?: TProps) {
       renderProps = props
@@ -28,30 +28,30 @@ function createServerRenderer<TProps, TResult>(
       })
     },
     hydrate() {
-      if (container) {
+      if (root) {
         throw new Error('The component can only be hydrated once')
       } else {
-        container = document.createElement('div')
+        const container = document.createElement('div')
         container.innerHTML = serverOutput
         act(() => {
-          ReactDOM.hydrate(testHarness(renderProps), container!)
+          root = hydrateRoot(container, testHarness(renderProps))
         })
       }
     },
     rerender(props?: TProps) {
-      if (!container) {
-        throw new Error('You must hydrate the component before you can rerender')
-      }
       act(() => {
-        ReactDOM.render(testHarness(props), container!)
+        if (!root) {
+          throw new Error('You must hydrate the component before you can rerender')
+        }
+        root.render(testHarness(props))
       })
     },
     unmount() {
-      if (container) {
-        act(() => {
-          ReactDOM.unmountComponentAtNode(container!)
-        })
-      }
+      act(() => {
+        if (root) {
+          root.unmount()
+        }
+      })
     },
     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"]
   }
 }