feat: React 19.2 support (#52)

Author: mdjastrzebski

README.md

@@ -48,7 +48,7 @@ Starting with `1.x`, `test-renderer` tracks preferred React 19 compatibility lin
 | `1.1.x`                 | `19.1`          | `~0.32.0`                  | Owner Stack support, CSS-selector-safe `useId()` format |
 | `1.2.x`                 | `19.2`          | `~0.33.0`                  | `<Activity />`, `useEffectEvent`                        |
 
-These examples are illustrative, not exhaustive. The `1.0.x` and `1.1.x` lines are current, and `1.2.x` is the next planned React 19 line. New React-minor-specific support lands on the matching preferred React / `react-reconciler` line for each `1.x` release, even though the package publishes a broad React 19 peer range.
+These examples are illustrative, not exhaustive. The `1.0.x`, `1.1.x`, and `1.2.x` lines are current compatibility lines. New React-minor-specific support lands on the matching preferred React / `react-reconciler` line for each `1.x` release, even though the package publishes a broad React 19 peer range.
 
 ## Test Output Tree
 

bun.lock

@@ -138,15 +138,15 @@ When multiple `1.x` compatibility lines are live, direct `test-renderer` consume
 
 This keeps `npm` install flows predictable for users who consume `test-renderer` directly.
 
-During the rollout to later React 19 lines, `latest` may temporarily lag the highest planned compatibility line. Dist tags become more useful once there is more than one active `1.x` line.
+During rollouts to later React 19 lines, `latest` may temporarily lag the highest published compatibility line. Dist tags become more useful once there is more than one active `1.x` line.
 
 ## Summary
 
 The recommended `test-renderer` 1.x scheme is:
 
 - `1.0.x` for React `19.0`
 - `1.1.x` for React `19.1`
-- `1.2.x` for React `19.2` when that line is published
+- `1.2.x` for React `19.2`
 
 With this scheme:
 

docs/versioning.md

@@ -51,8 +51,8 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@types/react-reconciler": "~0.32.0",
-    "react-reconciler": "~0.32.0"
+    "@types/react-reconciler": "~0.33.0",
+    "react-reconciler": "~0.33.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

package.json

@@ -0,0 +1,106 @@
+import { beforeEach, expect } from "@jest/globals";
+import { Activity, useState } from "react";
+
+import type { Props } from "../reconciler";
+import { createRoot } from "../renderer";
+import { testGateReact19_2 } from "../test-utils/react-version";
+import { renderWithAct } from "../test-utils/render";
+
+beforeEach(() => {
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+const transformHiddenInstanceProps = ({ props }: { props: Props }) => ({
+  ...props,
+  "data-is-hidden": true,
+});
+
+testGateReact19_2("Activity hides content while preserving child state", async () => {
+  let nextStateId = 0;
+
+  function CounterPane() {
+    const [stateId] = useState(() => ++nextStateId);
+    return <div>Pane state: {stateId}</div>;
+  }
+
+  function App({ mode }: { mode: "hidden" | "visible" }) {
+    return (
+      <Activity mode={mode}>
+        <CounterPane />
+      </Activity>
+    );
+  }
+
+  const renderer = createRoot();
+
+  await renderWithAct(renderer, <App mode="visible" />);
+  expect(renderer.container).toMatchInlineSnapshot(`
+    <>
+      <div>
+        Pane state: 
+        1
+      </div>
+    </>
+  `);
+
+  await renderWithAct(renderer, <App mode="hidden" />);
+  expect(renderer.container).toMatchInlineSnapshot(`< />`);
+
+  await renderWithAct(renderer, <App mode="visible" />);
+  expect(renderer.container).toMatchInlineSnapshot(`
+    <>
+      <div>
+        Pane state: 
+        1
+      </div>
+    </>
+  `);
+});
+
+testGateReact19_2(
+  "Activity keeps hidden instances in output with transformHiddenInstanceProps",
+  async () => {
+    function Pane() {
+      return <div>Content</div>;
+    }
+
+    function App({ mode }: { mode: "hidden" | "visible" }) {
+      return (
+        <Activity mode={mode}>
+          <Pane />
+        </Activity>
+      );
+    }
+
+    const renderer = createRoot({ transformHiddenInstanceProps });
+
+    await renderWithAct(renderer, <App mode="visible" />);
+    expect(renderer.container).toMatchInlineSnapshot(`
+    <>
+      <div>
+        Content
+      </div>
+    </>
+  `);
+
+    await renderWithAct(renderer, <App mode="hidden" />);
+    expect(renderer.container).toMatchInlineSnapshot(`
+    <>
+      <div
+        data-is-hidden={true}
+      >
+        Content
+      </div>
+    </>
+  `);
+
+    await renderWithAct(renderer, <App mode="visible" />);
+    expect(renderer.container).toMatchInlineSnapshot(`
+    <>
+      <div>
+        Content
+      </div>
+    </>
+  `);
+  },
+);

src/__tests__/activity.test.tsx

@@ -0,0 +1,40 @@
+import { beforeEach, expect } from "@jest/globals";
+import { useEffect, useEffectEvent } from "react";
+
+import { createRoot } from "../renderer";
+import { testGateReact19_2 } from "../test-utils/react-version";
+import { renderWithAct } from "../test-utils/render";
+
+beforeEach(() => {
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+testGateReact19_2(
+  "useEffectEvent reads the latest value when an effect is triggered by another dependency",
+  async () => {
+    const observedValues: string[] = [];
+
+    function Subscriber({ trigger, value }: { trigger: number; value: string }) {
+      const onEffectEvent = useEffectEvent(() => {
+        observedValues.push(value);
+      });
+
+      useEffect(() => {
+        onEffectEvent();
+      }, [trigger]);
+
+      return <div>{value}</div>;
+    }
+
+    const renderer = createRoot();
+
+    await renderWithAct(renderer, <Subscriber trigger={0} value="first" />);
+    expect(observedValues).toEqual(["first"]);
+
+    await renderWithAct(renderer, <Subscriber trigger={0} value="second" />);
+    expect(observedValues).toEqual(["first"]);
+
+    await renderWithAct(renderer, <Subscriber trigger={1} value="second" />);
+    expect(observedValues).toEqual(["first", "second"]);
+  },
+);

src/__tests__/effect-event.test.tsx

@@ -115,7 +115,6 @@ export function createRoot(options?: RootOptions): Root {
     options?.onCaughtError ?? defaultOnCaughtError,
     options?.onRecoverableError ?? defaultOnRecoverableError,
     defaultOnDefaultTransitionIndicator,
-    null, // transitionCallbacks
   );
 
   measureEnd("createRoot");

src/renderer.ts

@@ -0,0 +1,21 @@
+import { test } from "@jest/globals";
+import React from "react";
+
+function isReactMinorOrNewer(targetMinor: number): boolean {
+  const match = /^(\d+)\.(\d+)/.exec(React.version);
+
+  if (!match) {
+    return false;
+  }
+
+  const major = Number(match[1]);
+  const minor = Number(match[2]);
+
+  if (major !== 19) {
+    return major > 19;
+  }
+
+  return minor >= targetMinor;
+}
+
+export const testGateReact19_2 = isReactMinorOrNewer(2) ? test : test.skip;