feat: flag for enabling concurrent rendering

Author: mdjastrzebski

jest-setup.ts

@@ -1,6 +1,7 @@
-import { resetToDefaults } from './src/pure';
+import { resetToDefaults, configure } from './src/pure';
 import './src/matchers/extend-expect';
 
 beforeEach(() => {
   resetToDefaults();
+  configure({ legacyRoot: false });
 });

src/__tests__/config.test.ts

@@ -1,5 +1,9 @@
 import { getConfig, configure, resetToDefaults, configureInternal } from '../config';
 
+beforeEach(() => {
+  resetToDefaults();
+});
+
 test('getConfig() returns existing configuration', () => {
   expect(getConfig().asyncUtilTimeout).toEqual(1000);
   expect(getConfig().defaultIncludeHiddenElements).toEqual(false);
@@ -12,6 +16,7 @@ test('configure() overrides existing config values', () => {
     asyncUtilTimeout: 5000,
     defaultDebugOptions: { message: 'debug message' },
     defaultIncludeHiddenElements: false,
+    legacyRoot: true,
   });
 });
 

src/config.ts

@@ -13,6 +13,13 @@ export type Config = {
 
   /** Default options for `debug` helper. */
   defaultDebugOptions?: Partial<DebugOptions>;
+
+  /**
+   * Only works if used with React 18.
+   * Set to `true` if you want to force synchronous rendering.
+   * Otherwise `render` will default to concurrent React if available.
+   */
+  legacyRoot: boolean;
 };
 
 export type ConfigAliasOptions = {
@@ -37,6 +44,7 @@ export type InternalConfig = Config & {
 const defaultConfig: InternalConfig = {
   asyncUtilTimeout: 1000,
   defaultIncludeHiddenElements: false,
+  legacyRoot: true,
 };
 
 let config = { ...defaultConfig };

src/render.tsx

@@ -1,4 +1,8 @@
-import type { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
+import type {
+  ReactTestInstance,
+  ReactTestRenderer,
+  TestRendererOptions,
+} from 'react-test-renderer';
 import * as React from 'react';
 import { Profiler } from 'react';
 import act from './act';
@@ -14,7 +18,19 @@ import { setRenderResult } from './screen';
 import { getQueriesForElement } from './within';
 
 export interface RenderOptions {
+  /**
+   * Pass a React Component as the wrapper option to have it rendered around the inner element. This is most useful for creating
+   *  reusable custom render functions for common data providers.
+   */
   wrapper?: React.ComponentType<any>;
+
+  /**
+   * Only works if used with React 18.
+   * Set to `true` if you want to force synchronous rendering.
+   * Otherwise `render` will default to concurrent React if available.
+   */
+  legacyRoot?: boolean | undefined;
+
   createNodeMock?: (element: React.ReactElement) => unknown;
   unstable_validateStringsRenderedWithinText?: boolean;
 }
@@ -39,11 +55,18 @@ export function renderInternal<T>(
 ) {
   const {
     wrapper: Wrapper,
+    legacyRoot,
     detectHostComponentNames = true,
     unstable_validateStringsRenderedWithinText,
-    ...testRendererOptions
+    ...rest
   } = options || {};
 
+  const testRendererOptions: TestRendererOptions = {
+    // @ts-expect-error incomplete typing on RTR package
+    unstable_isConcurrent: !(legacyRoot ?? getConfig().legacyRoot),
+    ...rest,
+  };
+
   if (detectHostComponentNames) {
     configureHostComponentNamesIfNeeded();
   }