React 18 compat

Author: eps1lon

src/__mocks__/pure.js

@@ -0,0 +1,15 @@
+import * as ReactDOM from 'react-dom'
+
+const pure = jest.requireActual('../pure')
+
+const originalRender = pure.render
+// Test concurrent react in the experimental release channel
+function possiblyConcurrentRender(ui, options) {
+  return originalRender(ui, {
+    concurrent: ReactDOM.version.includes('-experimental-'),
+    ...options,
+  })
+}
+pure.render = possiblyConcurrentRender
+
+module.exports = pure

src/__tests__/end-to-end.js

@@ -30,6 +30,9 @@ class ComponentWithLoader extends React.Component {
 }
 
 test('it waits for the data to be loaded', async () => {
+  // TODO: discussions/23#discussioncomment-812450
+  jest.useFakeTimers()
+
   render(<ComponentWithLoader />)
   const loading = () => screen.getByText('Loading...')
   await waitForElementToBeRemoved(loading)

src/__tests__/render.js

@@ -101,3 +101,36 @@ test('flushes useEffect cleanup functions sync on unmount()', () => {
 
   expect(spy).toHaveBeenCalledTimes(1)
 })
+
+test('throws if `concurrent` is used with an incomaptible version', () => {
+  const isConcurrentReact = typeof ReactDOM.createRoot === 'function'
+
+  const performConcurrentRender = () => render(<div />, {concurrent: true})
+
+  // eslint-disable-next-line jest/no-if -- jest doesn't support conditional tests
+  if (isConcurrentReact) {
+    // eslint-disable-next-line jest/no-conditional-expect -- yes, jest still doesn't support conditional tests
+    expect(performConcurrentRender).not.toThrow()
+  } else {
+    // eslint-disable-next-line jest/no-conditional-expect -- yes, jest still doesn't support conditional tests
+    expect(performConcurrentRender).toThrowError(
+      `"Attempted to use concurrent React with \`react-dom@${ReactDOM.version}\`. Be sure to use the \`next\` or \`experimental\` release channel (https://reactjs.org/docs/release-channels.html)."`,
+    )
+  }
+})
+
+test('can be called multiple times on the same container', () => {
+  const container = document.createElement('div')
+
+  const {unmount} = render(<strong />, {container})
+
+  expect(container).toContainHTML('<strong></strong>')
+
+  render(<em />, {container})
+
+  expect(container).toContainHTML('<em></em>')
+
+  unmount()
+
+  expect(container).toBeEmptyDOMElement()
+})

src/pure.js

@@ -19,48 +19,79 @@ configureDTL({
   eventWrapper: cb => {
     let result
     act(() => {
-      result = cb()
+      // TODO: Remove ReactDOM.flushSync once `act` flushes the microtask queue.
+      // Otherwise `act` wrapping updates that schedule microtask would need to be followed with `await null` to flush the microtask queue manually
+      result = ReactDOM.flushSync(cb)
     })
     return result
   },
 })
 
+// Ideally we'd just use a WeakMap where containers are keys and roots are values.
+// We use two variables so that we can bail out in constant time when we render with a new container (most common use case)
+/**
+ * @type {Set<import('react-dom').Container>}
+ */
 const mountedContainers = new Set()
+/**
+ * @type Array<{container: import('react-dom').Container, root: ReturnType<typeof createConcurrentRoot>}>
+ */
+const mountedRootEntries = []
 
-function render(
-  ui,
-  {
-    container,
-    baseElement = container,
-    queries,
-    hydrate = false,
-    wrapper: WrapperComponent,
-  } = {},
-) {
-  if (!baseElement) {
-    // default to document.body instead of documentElement to avoid output of potentially-large
-    // head elements (such as JSS style blocks) in debug output
-    baseElement = document.body
+function createConcurrentRoot(container, options) {
+  if (typeof ReactDOM.createRoot !== 'function') {
+    throw new TypeError(
+      `Attempted to use concurrent React with \`react-dom@${ReactDOM.version}\`. Be sure to use the \`next\` or \`experimental\` release channel (https://reactjs.org/docs/release-channels.html).'`,
+    )
   }
-  if (!container) {
-    container = baseElement.appendChild(document.createElement('div'))
+  const root = ReactDOM.createRoot(container, options)
+
+  return {
+    hydrate(element) {
+      if (!options.hydrate) {
+        throw new Error(
+          'Attempted to hydrate a non-hydrateable root. This is a bug in `@testing-library/react`.',
+        )
+      }
+      root.render(element)
+    },
+    render(element) {
+      root.render(element)
+    },
+    unmount() {
+      root.unmount()
+    },
   }
+}
 
-  // we'll add it to the mounted containers regardless of whether it's actually
-  // added to document.body so the cleanup method works regardless of whether
-  // they're passing us a custom container or not.
-  mountedContainers.add(container)
+function createLegacyRoot(container) {
+  return {
+    hydrate(element) {
+      ReactDOM.hydrate(element, container)
+    },
+    render(element) {
+      ReactDOM.render(element, container)
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container)
+    },
+  }
+}
 
+function renderRoot(
+  ui,
+  {baseElement, container, hydrate, queries, root, wrapper: WrapperComponent},
+) {
   const wrapUiIfNeeded = innerElement =>
     WrapperComponent
       ? React.createElement(WrapperComponent, null, innerElement)
       : innerElement
 
   act(() => {
     if (hydrate) {
-      ReactDOM.hydrate(wrapUiIfNeeded(ui), container)
+      root.hydrate(wrapUiIfNeeded(ui), container)
     } else {
-      ReactDOM.render(wrapUiIfNeeded(ui), container)
+      root.render(wrapUiIfNeeded(ui), container)
     }
   })
 
@@ -75,11 +106,15 @@ function render(
           console.log(prettyDOM(el, maxLength, options)),
     unmount: () => {
       act(() => {
-        ReactDOM.unmountComponentAtNode(container)
+        root.unmount()
       })
     },
     rerender: rerenderUi => {
-      render(wrapUiIfNeeded(rerenderUi), {container, baseElement})
+      renderRoot(wrapUiIfNeeded(rerenderUi), {
+        container,
+        baseElement,
+        root,
+      })
       // Intentionally do not return anything to avoid unnecessarily complicating the API.
       // folks can use all the same utilities we return in the first place that are bound to the container
     },
@@ -99,20 +134,66 @@ function render(
   }
 }
 
-function cleanup() {
-  mountedContainers.forEach(cleanupAtContainer)
+function render(
+  ui,
+  {
+    container,
+    baseElement = container,
+    concurrent = false,
+    queries,
+    hydrate = false,
+    wrapper,
+  } = {},
+) {
+  if (!baseElement) {
+    // default to document.body instead of documentElement to avoid output of potentially-large
+    // head elements (such as JSS style blocks) in debug output
+    baseElement = document.body
+  }
+  if (!container) {
+    container = baseElement.appendChild(document.createElement('div'))
+  }
+
+  let root
+  // eslint-disable-next-line no-negated-condition -- we want to map the evolution of this over time. The root is created first. Only later is it re-used so we don't want to read the case that happens later first.
+  if (!mountedContainers.has(container)) {
+    const createRoot = concurrent ? createConcurrentRoot : createLegacyRoot
+    root = createRoot(container, {hydrate})
+
+    mountedRootEntries.push({container, root})
+    // we'll add it to the mounted containers regardless of whether it's actually
+    // added to document.body so the cleanup method works regardless of whether
+    // they're passing us a custom container or not.
+    mountedContainers.add(container)
+  } else {
+    mountedRootEntries.forEach(rootEntry => {
+      if (rootEntry.container === container) {
+        root = rootEntry.root
+      }
+    })
+  }
+
+  return renderRoot(ui, {
+    container,
+    baseElement,
+    queries,
+    hydrate,
+    wrapper,
+    root,
+  })
 }
 
-// maybe one day we'll expose this (perhaps even as a utility returned by render).
-// but let's wait until someone asks for it.
-function cleanupAtContainer(container) {
-  act(() => {
-    ReactDOM.unmountComponentAtNode(container)
+function cleanup() {
+  mountedRootEntries.forEach(({root, container}) => {
+    act(() => {
+      root.unmount()
+    })
+    if (container.parentNode === document.body) {
+      document.body.removeChild(container)
+    }
   })
-  if (container.parentNode === document.body) {
-    document.body.removeChild(container)
-  }
-  mountedContainers.delete(container)
+  mountedRootEntries.length = 0
+  mountedContainers.clear()
 }
 
 // just re-export everything from dom-testing-library

tests/setup-env.js

@@ -1 +1,3 @@
+jest.mock('scheduler', () => require('scheduler/unstable_mock'))
+jest.mock('../src/pure')
 import '@testing-library/jest-dom/extend-expect'