test(dummy): enable StrictMode in OSS and Pro dummies (#3206)

## Summary

- Enables React StrictMode in the OSS `spec/dummy` startup paths by
wrapping normal `ReactOnRails.register` registrations and direct manual
renderer roots.
- Covers both OSS dummy variants: the React 19 `client/app/` path and
the React 16 `client/app-react16/` path.
- Extends the same coverage to the Pro dummy with webpack aliases for
the Pro package entrypoints, so async/generated registrations are
patched before startup imports run.
- Leaves 3-argument renderer functions in control of their own roots and
wraps those manual roots explicitly.
- Adds Jest coverage for the OSS StrictMode helper's wrapping, caching,
and render-function skip behavior.

Closes #1465

## Test plan

- [x] `pnpm --dir react_on_rails/spec/dummy run test:js`
- [x] `pnpm --dir react_on_rails/spec/dummy run build:test` (passes with
existing DefinePlugin warnings)
- [x] `pnpm exec eslint --no-ignore
react_on_rails_pro/spec/dummy/client/app/strictModeSupport.tsx
react_on_rails_pro/spec/dummy/client/app/strictModeReactOnRailsPro.js
react_on_rails_pro/spec/dummy/client/app/strictModeReactOnRailsProClient.js
react_on_rails_pro/spec/dummy/config/webpack/alias.js
react_on_rails_pro/spec/dummy/client/app/loadable/loadable-client.imports-loadable.jsx
react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/ManualRenderApp.jsx
react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/ReduxApp.client.jsx
react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/ReduxSharedStoreApp.client.jsx`
- [x] `pnpm --dir react_on_rails_pro/spec/dummy run build:test` (passes
with existing DefinePlugin warnings)
- [x] pre-commit hook: trailing-newlines, Prettier, ESLint on Pro
changed files
- [x] pre-push hook: branch-lint, markdown-links


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Enable React Strict Mode consistently for client render/hydration
flows, registered components, and pro/auto-loaded entry points; add
bundler/alias updates so client/server bundles resolve strict-mode-aware
implementations.

* **Tests**
* Add comprehensive tests validating strict-mode wrapping behavior,
wrapper caching, render-function exemptions, and opt-out handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk because changes are confined to `spec/dummy` apps and webpack
configs used for dummy/test builds; main risk is unexpected StrictMode
double-invocation effects causing flaky dummy tests or examples.
> 
> **Overview**
> **Enables React `StrictMode` across the OSS and Pro dummy apps** by
adding shared helpers to wrap rendered element trees and to
automatically wrap registered components.
> 
> In OSS `spec/dummy`, startup entrypoints (including the React 16
variant) now wrap manual render roots and Redux provider trees via
`wrapElementInStrictMode`, and `client-bundle.js` monkey-patches
`ReactOnRails.register` to StrictMode-wrap non-render-function
registrations.
> 
> In Pro `spec/dummy`, a TypeScript `strictModeSupport` adds
component/render-function wrapping (including async render results),
webpack aliases redirect `react-on-rails-pro` imports to
StrictMode-enabled shims for client/server builds (with RSC config
explicitly removing that alias), and several startup apps wrap their
roots explicitly; Jest coverage is added for the OSS helper.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
45da8de. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: justin808

react_on_rails/spec/dummy/client/app-react16/startup/ManualRenderApp.jsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+// Intentional cross-tree import: the React 16 dummy entries reuse the StrictMode helper from the
+// React 19 `app/` tree. Keep the import path in sync if `app/strictModeSupport` is moved.
+import { wrapElementInStrictMode } from '../../app/strictModeSupport';
 
 export default (props, _railsContext, domNodeId) => {
-  const reactElement = (
+  const reactElement = wrapElementInStrictMode(
     <div>
       <h1 id="manual-render">Manual Render Example</h1>
       <p>If you can see this, you can register renderer functions.</p>
-    </div>
+    </div>,
   );
 
   const domNode = document.getElementById(domNodeId);

react_on_rails/spec/dummy/client/app-react16/startup/ReduxApp.client.jsx

@@ -12,6 +12,9 @@ import reducers from '../../app/reducers/reducersIndex';
 import composeInitialState from '../../app/store/composeInitialState';
 
 import HelloWorldContainer from '../../app/components/HelloWorldContainer';
+// Intentional cross-tree import: the React 16 dummy entries reuse the StrictMode helper from the
+// React 19 `app/` tree. Keep the import path in sync if `app/strictModeSupport` is moved.
+import { wrapElementInStrictMode } from '../../app/strictModeSupport';
 
 /*
  *  Export a function that takes the props and returns a ReactComponent.
@@ -37,10 +40,10 @@ export default (props, railsContext, domNodeId) => {
   // Provider uses this.props.children, so we're not typical React syntax.
   // This allows redux to add additional props to the HelloWorldContainer.
   const renderApp = (Komponent) => {
-    const element = (
+    const element = wrapElementInStrictMode(
       <Provider store={store}>
         <Komponent />
-      </Provider>
+      </Provider>,
     );
 
     render(element, document.getElementById(domNodeId));

react_on_rails/spec/dummy/client/app-react16/startup/ReduxSharedStoreApp.client.jsx

@@ -7,6 +7,9 @@ import ReactOnRails from 'react-on-rails/client';
 import ReactDOM from 'react-dom';
 
 import HelloWorldContainer from '../../app/components/HelloWorldContainer';
+// Intentional cross-tree import: the React 16 dummy entries reuse the StrictMode helper from the
+// React 19 `app/` tree. Keep the import path in sync if `app/strictModeSupport` is moved.
+import { wrapElementInStrictMode } from '../../app/strictModeSupport';
 
 /*
  *  Export a function that returns a ReactComponent, depending on a store named SharedReduxStore.
@@ -27,10 +30,10 @@ export default (props, _railsContext, domNodeId) => {
   // Provider uses this.props.children, so we're not typical React syntax.
   // This allows redux to add additional props to the HelloWorldContainer.
   const renderApp = (Component) => {
-    const element = (
+    const element = wrapElementInStrictMode(
       <Provider store={store}>
         <Component />
-      </Provider>
+      </Provider>,
     );
     render(element, document.getElementById(domNodeId));
   };

react_on_rails/spec/dummy/client/app/packs/client-bundle.js

@@ -9,6 +9,31 @@ import ReactOnRails from 'react-on-rails/client';
 import HelloTurboStream from '../startup/HelloTurboStream';
 import ManualRenderComponent from '../startup/ManualRenderComponent';
 import SharedReduxStore from '../stores/SharedReduxStore';
+import { wrapRegisteredComponentsWithStrictMode } from '../strictModeSupport';
+
+const STRICT_MODE_PATCHED = '__reactOnRailsDummyStrictModePatched';
+
+// Scope: this patch only affects `ReactOnRails.register` calls that share this bundle's
+// `react-on-rails/client` module instance. Coverage today:
+//   - This pack and its imports (HelloTurboStream, ManualRenderComponent, SharedReduxStore).
+//   - The auto-generated `packs/generated/*.js` entries — they share this `ReactOnRails` instance
+//     because shakapacker's webpack build produces one runtime per compilation, and they run
+//     after `client-bundle.js` on every page that loads them.
+//   - Inline ERB views that call `ReactOnRails.register` after this pack has run.
+//   - Manual-render trees in `startup/` and `app-react16/startup/` already wrap with
+//     `wrapElementInStrictMode` directly (they don't need this `register` patch).
+//
+// What's NOT covered: any future pack that imports `react-on-rails/client` from a separate
+// webpack compilation (e.g., a standalone bundle config) would get its own unpatched module
+// instance. When adding a pack like that, either fold it into this compilation or duplicate
+// this `STRICT_MODE_PATCHED` block at the top of the new pack before any `register` calls.
+if (!ReactOnRails[STRICT_MODE_PATCHED]) {
+  const originalRegister = ReactOnRails.register.bind(ReactOnRails);
+
+  ReactOnRails.register = (components) =>
+    originalRegister(wrapRegisteredComponentsWithStrictMode(components));
+  Object.defineProperty(ReactOnRails, STRICT_MODE_PATCHED, { value: true });
+}
 
 ReactOnRails.setOptions({
   traceTurbolinks: true,

react_on_rails/spec/dummy/client/app/startup/ManualRenderApp.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import ReactDOMClient from 'react-dom/client';
+import { wrapElementInStrictMode } from '../strictModeSupport';
 
 export default (props, _railsContext, domNodeId) => {
-  const reactElement = (
+  const reactElement = wrapElementInStrictMode(
     <div>
       <h1 id="manual-render">Manual Render Example</h1>
       <p>If you can see this, you can register renderer functions.</p>
-    </div>
+    </div>,
   );
 
   const domNode = document.getElementById(domNodeId);

react_on_rails/spec/dummy/client/app/startup/ReduxApp.client.jsx

@@ -12,6 +12,7 @@ import reducers from '../reducers/reducersIndex';
 import composeInitialState from '../store/composeInitialState';
 
 import HelloWorldContainer from '../components/HelloWorldContainer';
+import { wrapElementInStrictMode } from '../strictModeSupport';
 
 /*
  *  Export a function that takes the props and returns a ReactComponent.
@@ -42,10 +43,10 @@ export default (props, railsContext, domNodeId) => {
   // Provider uses this.props.children, so we're not typical React syntax.
   // This allows redux to add additional props to the HelloWorldContainer.
   const renderApp = (Komponent) => {
-    const element = (
+    const element = wrapElementInStrictMode(
       <Provider store={store}>
         <Komponent />
-      </Provider>
+      </Provider>,
     );
 
     render(document.getElementById(domNodeId), element);

react_on_rails/spec/dummy/client/app/startup/ReduxSharedStoreApp.client.jsx

@@ -7,6 +7,7 @@ import ReactOnRails from 'react-on-rails/client';
 import ReactDOMClient from 'react-dom/client';
 
 import HelloWorldContainer from '../components/HelloWorldContainer';
+import { wrapElementInStrictMode } from '../strictModeSupport';
 
 /*
  *  Export a function that returns a ReactComponent, depending on a store named SharedReduxStore.
@@ -32,10 +33,10 @@ export default (props, _railsContext, domNodeId) => {
   // Provider uses this.props.children, so we're not typical React syntax.
   // This allows redux to add additional props to the HelloWorldContainer.
   const renderApp = (Component) => {
-    const element = (
+    const element = wrapElementInStrictMode(
       <Provider store={store}>
         <Component />
-      </Provider>
+      </Provider>,
     );
     render(document.getElementById(domNodeId), element);
   };

react_on_rails/spec/dummy/client/app/strictModeSupport.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+
+const REACT_OBJECT_COMPONENT_TYPES = new Set([
+  Symbol.for('react.forward_ref'),
+  Symbol.for('react.lazy'),
+  Symbol.for('react.memo'),
+]);
+
+const wrappedFunctionComponents = new WeakMap();
+const wrappedRenderFunctions = new WeakMap();
+// Object-typed React components (memo, forwardRef, lazy) are GC-safe in a WeakMap.
+const wrappedObjectComponents = new WeakMap();
+
+const isPromiseLike = (value) =>
+  typeof value === 'object' && value !== null && typeof value.then === 'function';
+
+const isFunctionWithMetadata = (component) => typeof component === 'function';
+
+const isObjectComponent = (component) =>
+  typeof component === 'object' &&
+  component !== null &&
+  REACT_OBJECT_COMPONENT_TYPES.has(component.$$typeof ?? 0);
+
+const isReactComponent = (component) => isFunctionWithMetadata(component) || isObjectComponent(component);
+
+// Mirrors the public react-on-rails/isRenderFunction convention while extending it with an
+// explicit `renderFunction = false` opt-out (the public helper only checks for truthiness; this
+// dummy honors `false` so legacy 2-arg `(props, context)` components can be wrapped via the
+// component path rather than the render-function path). Set `fn.renderFunction = true` to flag a
+// 1-arg render function explicitly. Class components are detected via the prototype check.
+const isRenderFunction = (component) => {
+  if (typeof component !== 'function') {
+    return false;
+  }
+
+  if (component.prototype?.isReactComponent) {
+    return false;
+  }
+
+  if (typeof component.renderFunction === 'boolean') {
+    return component.renderFunction;
+  }
+
+  return component.length >= 2;
+};
+
+// A 3-arg renderer controls its own root, so direct renderer files wrap their root elements explicitly.
+const isRendererFunction = (component) => isRenderFunction(component) && component.length === 3;
+
+const createStrictModeWrapper = (Component) => {
+  function StrictModeWrapper(props) {
+    return <React.StrictMode>{React.createElement(Component, props)}</React.StrictMode>;
+  }
+
+  StrictModeWrapper.displayName = `StrictMode(${Component.displayName || Component.name || 'AnonymousComponent'})`;
+
+  return StrictModeWrapper;
+};
+
+const wrapComponentInStrictMode = (component) => {
+  if (typeof component === 'function') {
+    const cachedComponent = wrappedFunctionComponents.get(component);
+    if (cachedComponent) {
+      return cachedComponent;
+    }
+
+    const wrappedComponent = createStrictModeWrapper(component);
+    wrappedFunctionComponents.set(component, wrappedComponent);
+    return wrappedComponent;
+  }
+
+  const cachedComponent = wrappedObjectComponents.get(component);
+  if (cachedComponent) {
+    return cachedComponent;
+  }
+
+  const wrappedComponent = createStrictModeWrapper(component);
+  wrappedObjectComponents.set(component, wrappedComponent);
+  return wrappedComponent;
+};
+
+export const wrapElementInStrictMode = (reactElement) => <React.StrictMode>{reactElement}</React.StrictMode>;
+
+const wrapRenderFunctionResult = (result) => {
+  if (isPromiseLike(result)) {
+    return result.then(wrapRenderFunctionResult);
+  }
+
+  if (React.isValidElement(result)) {
+    return wrapElementInStrictMode(result);
+  }
+
+  if (isReactComponent(result)) {
+    return wrapComponentInStrictMode(result);
+  }
+
+  return result;
+};
+
+// The wrapped function below has `length === 2`, so `isRenderFunction` would re-classify it as a
+// render function if it ever flowed back through `wrapRegisteredComponentsWithStrictMode`. The
+// `STRICT_MODE_PATCHED` guard on the patched `register` call (in `client-bundle.js`) keeps that
+// re-entry path unreachable. Note: when called directly (outside the registry path), the wrapper's
+// hardcoded `length === 2` does not reflect the original function's arity.
+const wrapRenderFunctionInStrictMode = (renderFunction) => {
+  const cachedRenderFunction = wrappedRenderFunctions.get(renderFunction);
+  if (cachedRenderFunction) {
+    return cachedRenderFunction;
+  }
+
+  const wrappedRenderFunction = function StrictModeRenderFunction(props, railsContext) {
+    return wrapRenderFunctionResult(renderFunction(props, railsContext));
+  };
+  wrappedRenderFunction.displayName = `StrictMode(${
+    renderFunction.displayName || renderFunction.name || 'AnonymousRenderFunction'
+  })`;
+
+  if (renderFunction.renderFunction) {
+    wrappedRenderFunction.renderFunction = true;
+  }
+
+  wrappedRenderFunctions.set(renderFunction, wrappedRenderFunction);
+  return wrappedRenderFunction;
+};
+
+export const wrapRegisteredComponentsWithStrictMode = (components) =>
+  Object.fromEntries(
+    Object.entries(components).map(([name, component]) => {
+      if (isRendererFunction(component)) {
+        return [name, component];
+      }
+
+      if (isRenderFunction(component)) {
+        return [name, wrapRenderFunctionInStrictMode(component)];
+      }
+
+      if (!isReactComponent(component)) {
+        return [name, component];
+      }
+
+      return [name, wrapComponentInStrictMode(component)];
+    }),
+  );