Add reactStrictMode as an option to render

Author: bernardobelchior

src/__tests__/render.js

@@ -262,4 +262,38 @@ describe('render API', () => {
       `\`legacyRoot: true\` is not supported in this version of React. If your app runs React 19 or later, you should remove this flag. If your app runs React 18 or earlier, visit https://react.dev/blog/2022/03/08/react-18-upgrade-guide for upgrade instructions.`,
     )
   })
+
+  test('reactStrictMode in renderOptions has precedence over config when rendering', () => {
+    const wrapperComponentMountEffect = jest.fn()
+    function WrapperComponent({children}) {
+      React.useEffect(() => {
+        wrapperComponentMountEffect()
+      })
+
+      return children
+    }
+    const ui = <div />
+    configure({reactStrictMode: false})
+
+    render(ui, {wrapper: WrapperComponent, reactStrictMode: true})
+
+    expect(wrapperComponentMountEffect).toHaveBeenCalledTimes(2);
+  })
+
+  test('reactStrictMode in config is used when renderOptions does not specify reactStrictMode', () => {
+    const wrapperComponentMountEffect = jest.fn()
+    function WrapperComponent({children}) {
+      React.useEffect(() => {
+        wrapperComponentMountEffect()
+      })
+
+      return children
+    }
+    const ui = <div />
+    configure({reactStrictMode: true})
+
+    render(ui, {wrapper: WrapperComponent})
+
+    expect(wrapperComponentMountEffect).toHaveBeenCalledTimes(2);
+  })
 })

src/pure.js

@@ -77,8 +77,8 @@ const mountedContainers = new Set()
  */
 const mountedRootEntries = []
 
-function strictModeIfNeeded(innerElement) {
-  return getConfig().reactStrictMode
+function strictModeIfNeeded(innerElement, reactStrictMode) {
+  return reactStrictMode ?? getConfig().reactStrictMode
     ? React.createElement(React.StrictMode, null, innerElement)
     : innerElement
 }
@@ -91,14 +91,14 @@ function wrapUiIfNeeded(innerElement, wrapperComponent) {
 
 function createConcurrentRoot(
   container,
-  {hydrate, onCaughtError, onRecoverableError, ui, wrapper: WrapperComponent},
+  {hydrate, onCaughtError, onRecoverableError, ui, wrapper: WrapperComponent, reactStrictMode},
 ) {
   let root
   if (hydrate) {
     act(() => {
       root = ReactDOMClient.hydrateRoot(
         container,
-        strictModeIfNeeded(wrapUiIfNeeded(ui, WrapperComponent)),
+        strictModeIfNeeded(wrapUiIfNeeded(ui, WrapperComponent), reactStrictMode),
         {onCaughtError, onRecoverableError},
       )
     })
@@ -144,17 +144,17 @@ function createLegacyRoot(container) {
 
 function renderRoot(
   ui,
-  {baseElement, container, hydrate, queries, root, wrapper: WrapperComponent},
+  {baseElement, container, hydrate, queries, root, wrapper: WrapperComponent, reactStrictMode},
 ) {
   act(() => {
     if (hydrate) {
       root.hydrate(
-        strictModeIfNeeded(wrapUiIfNeeded(ui, WrapperComponent)),
+        strictModeIfNeeded(wrapUiIfNeeded(ui, WrapperComponent), reactStrictMode),
         container,
       )
     } else {
       root.render(
-        strictModeIfNeeded(wrapUiIfNeeded(ui, WrapperComponent)),
+        strictModeIfNeeded(wrapUiIfNeeded(ui, WrapperComponent), reactStrictMode),
         container,
       )
     }
@@ -180,6 +180,7 @@ function renderRoot(
         baseElement,
         root,
         wrapper: WrapperComponent,
+        reactStrictMode,
       })
       // 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
@@ -212,6 +213,7 @@ function render(
     queries,
     hydrate = false,
     wrapper,
+    reactStrictMode,
   } = {},
 ) {
   if (onUncaughtError !== undefined) {
@@ -248,6 +250,7 @@ function render(
       onRecoverableError,
       ui,
       wrapper,
+      reactStrictMode,
     })
 
     mountedRootEntries.push({container, root})
@@ -273,6 +276,7 @@ function render(
     hydrate,
     wrapper,
     root,
+    reactStrictMode,
   })
 }
 

types/index.d.ts

@@ -156,6 +156,11 @@ export interface RenderOptions<
    *  @see https://testing-library.com/docs/react-testing-library/api/#wrapper
    */
   wrapper?: React.JSXElementConstructor<{children: React.ReactNode}> | undefined
+  /**
+   * When enabled, <StrictMode> is rendered around the inner element.
+   * If defined, overrides the value of `reactStrictMode` set in `configure`.
+   */
+  reactStrictMode?: boolean
 }
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>