From 9aca6e7a403d8b9664117c026efa84b688fcc862 Mon Sep 17 00:00:00 2001
From: vansszh <vansszh@gmail.com>
Date: Thu, 21 May 2026 15:55:07 +0530
Subject: [PATCH] Add comprehensive ViewTransition component unit tests

Add three new test files covering ViewTransition component behavior:

- ReactDOMViewTransitionName-test.js: Tests for name resolution (auto-generated
  names, explicit names, name stability across re-renders, sibling and nested
  ViewTransitions, conditional rendering, mount/unmount cycles)

- ReactDOMViewTransitionClass-test.js: Tests for className resolution (string
  classes, object classes with transition types, 'none' precedence, 'auto'
  behavior, multiple matching types, default fallback, event class overrides)

- ReactDOMViewTransitionWarnings-test.js: Tests for duplicate name warnings
  and edge cases (duplicate name detection, 'auto' name exemption, unnamed
  exemption, unmount-before-mount, warn-once behavior, rapid mount/unmount,
  list operations, Suspense integration, key changes, deeply nested
  ViewTransitions, Fragment/memo/forwardRef children)

The existing test coverage for ViewTransition is minimal (6 tests in
ReactDOMViewTransition-test.js) relative to the 35KB+ of source code in
ReactFiberCommitViewTransitions.js and ReactFiberViewTransitionComponent.js.
These tests improve coverage of the component's core behaviors.
---
 .../ReactDOMViewTransitionClass-test.js       | 529 ++++++++++++
 .../ReactDOMViewTransitionName-test.js        | 320 +++++++
 .../ReactDOMViewTransitionWarnings-test.js    | 799 ++++++++++++++++++
 3 files changed, 1648 insertions(+)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMViewTransitionClass-test.js
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMViewTransitionName-test.js
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMViewTransitionWarnings-test.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMViewTransitionClass-test.js b/packages/react-dom/src/__tests__/ReactDOMViewTransitionClass-test.js
new file mode 100644
index 000000000000..236cf84c1d7e
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMViewTransitionClass-test.js
@@ -0,0 +1,529 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOMClient;
+let ViewTransition;
+let act;
+let startTransition;
+let addTransitionType;
+let container;
+
+describe('ReactDOMViewTransitionClass', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    ViewTransition = React.ViewTransition;
+    startTransition = React.startTransition;
+    addTransitionType = React.addTransitionType;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    // Mock document.startViewTransition
+    if (!document.startViewTransition) {
+      document.startViewTransition = function ({update}) {
+        update();
+        return {
+          ready: Promise.resolve(),
+          finished: Promise.resolve(),
+          skipTransition() {},
+        };
+      };
+    }
+
+    // Mock CSS.escape
+    if (typeof CSS === 'undefined') {
+      global.CSS = {escape: str => str};
+    } else if (!CSS.escape) {
+      CSS.escape = str => str;
+    }
+
+    // Mock document.fonts
+    if (!document.fonts) {
+      Object.defineProperty(document, 'fonts', {
+        value: {status: 'loaded', ready: Promise.resolve()},
+        configurable: true,
+      });
+    }
+
+    // Mock Element.prototype.getAnimations
+    if (!Element.prototype.getAnimations) {
+      Element.prototype.getAnimations = function () {
+        return [];
+      };
+    }
+
+    // Mock Element.prototype.animate
+    if (!Element.prototype.animate) {
+      Element.prototype.animate = function () {
+        return {cancel() {}, finished: Promise.resolve()};
+      };
+    }
+
+    // Mock getBoundingClientRect
+    Element.prototype._originalGetBoundingClientRect =
+      Element.prototype.getBoundingClientRect;
+    Element.prototype.getBoundingClientRect = function () {
+      const text = this.textContent || '';
+      return new DOMRect(0, 0, text.length * 10 + 10, 20);
+    };
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    if (Element.prototype._originalGetBoundingClientRect) {
+      Element.prototype.getBoundingClientRect =
+        Element.prototype._originalGetBoundingClientRect;
+      delete Element.prototype._originalGetBoundingClientRect;
+    }
+  });
+
+  // @gate enableViewTransition
+  it('accepts a string as the default class', async () => {
+    function App() {
+      return (
+        <ViewTransition default="fade-in">
+          <div id="child">Hello</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    expect(container.querySelector('#child')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('accepts a string as the update class', async () => {
+    function App({text}) {
+      return (
+        <ViewTransition update="slide-up">
+          <div id="child">{text}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="First" />);
+      });
+    });
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="Second" />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Second');
+  });
+
+  // @gate enableViewTransition
+  it('accepts a string as the enter class', async () => {
+    function App({show}) {
+      if (!show) return null;
+      return (
+        <ViewTransition enter="slide-in">
+          <div id="child">Entered</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={true} />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Entered');
+  });
+
+  // @gate enableViewTransition
+  it('accepts a string as the exit class', async () => {
+    function App({show}) {
+      if (!show) return null;
+      return (
+        <ViewTransition exit="slide-out">
+          <div id="child">Will Exit</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={true} />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Will Exit');
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={false} />);
+      });
+    });
+
+    expect(container.querySelector('#child')).toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('accepts a string as the share class', async () => {
+    function App({page}) {
+      if (page === 'a') {
+        return (
+          <ViewTransition key="a" name="hero" share="morph">
+            <div id="page-a">Page A</div>
+          </ViewTransition>
+        );
+      }
+      return (
+        <ViewTransition key="b" name="hero" share="morph">
+          <div id="page-b">Page B</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App page="a" />);
+      });
+    });
+
+    expect(container.querySelector('#page-a')).not.toBe(null);
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App page="b" />);
+      });
+    });
+
+    expect(container.querySelector('#page-b')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('accepts an object with default key as the class', async () => {
+    function App() {
+      return (
+        <ViewTransition update={{default: 'fade'}}>
+          <div id="child">Object class</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    expect(container.querySelector('#child')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('accepts an object with transition type keys', async () => {
+    function App({text}) {
+      return (
+        <ViewTransition
+          update={{
+            'nav-forward': 'slide-left',
+            'nav-back': 'slide-right',
+            default: 'fade',
+          }}>
+          <div id="child">{text}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="First" />);
+      });
+    });
+
+    await act(() => {
+      startTransition(() => {
+        addTransitionType('nav-forward');
+        root.render(<App text="Second" />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Second');
+  });
+
+  // @gate enableViewTransition
+  it('handles "none" class which suppresses the transition', async () => {
+    function App({text}) {
+      return (
+        <ViewTransition update="none">
+          <div id="child">{text}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="First" />);
+      });
+    });
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="Second" />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Second');
+  });
+
+  // @gate enableViewTransition
+  it('handles "none" in object class which takes precedence', async () => {
+    function App({text}) {
+      return (
+        <ViewTransition
+          update={{
+            'nav-forward': 'none',
+            'nav-back': 'slide-right',
+            default: 'fade',
+          }}>
+          <div id="child">{text}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="First" />);
+      });
+    });
+
+    // When nav-forward type is active, "none" should take precedence
+    await act(() => {
+      startTransition(() => {
+        addTransitionType('nav-forward');
+        addTransitionType('nav-back');
+        root.render(<App text="Second" />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Second');
+  });
+
+  // @gate enableViewTransition
+  it('handles "auto" class which means use default behavior', async () => {
+    function App({text}) {
+      return (
+        <ViewTransition update="auto">
+          <div id="child">{text}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="First" />);
+      });
+    });
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="Second" />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Second');
+  });
+
+  // @gate enableViewTransition
+  it('combines multiple matching transition type classes', async () => {
+    function App({text}) {
+      return (
+        <ViewTransition
+          update={{
+            highlight: 'glow',
+            important: 'bold',
+            default: 'fade',
+          }}>
+          <div id="child">{text}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="First" />);
+      });
+    });
+
+    // When multiple types match, their classes should be combined
+    await act(() => {
+      startTransition(() => {
+        addTransitionType('highlight');
+        addTransitionType('important');
+        root.render(<App text="Second" />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Second');
+  });
+
+  // @gate enableViewTransition
+  it('falls back to default when no transition types match', async () => {
+    function App({text}) {
+      return (
+        <ViewTransition
+          update={{
+            'nav-forward': 'slide-left',
+            default: 'crossfade',
+          }}>
+          <div id="child">{text}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="First" />);
+      });
+    });
+
+    // No transition type added, should fall back to default
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="Second" />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Second');
+  });
+
+  // @gate enableViewTransition
+  it('event class overrides default class', async () => {
+    function App({show}) {
+      if (!show) return null;
+      return (
+        <ViewTransition default="base-class" enter="enter-class">
+          <div id="child">Content</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={true} />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Content');
+  });
+
+  // @gate enableViewTransition
+  it('event class "auto" nullifies the class', async () => {
+    function App({show}) {
+      if (!show) return null;
+      return (
+        <ViewTransition default="base-class" enter="auto">
+          <div id="child">Content</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={true} />);
+      });
+    });
+
+    expect(container.querySelector('#child').textContent).toBe('Content');
+  });
+
+  // @gate enableViewTransition
+  it('supports different classes for enter, exit, update, and share', async () => {
+    function PageA() {
+      return (
+        <ViewTransition
+          name="page"
+          enter="page-enter"
+          exit="page-exit"
+          update="page-update"
+          share="page-share">
+          <div id="page-a">Page A Content</div>
+        </ViewTransition>
+      );
+    }
+
+    function PageB() {
+      return (
+        <ViewTransition
+          name="page"
+          enter="page-enter"
+          exit="page-exit"
+          update="page-update"
+          share="page-share">
+          <div id="page-b">Page B Content</div>
+        </ViewTransition>
+      );
+    }
+
+    function App({page}) {
+      return page === 'a' ? <PageA key="a" /> : <PageB key="b" />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App page="a" />);
+      });
+    });
+
+    expect(container.querySelector('#page-a')).not.toBe(null);
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App page="b" />);
+      });
+    });
+
+    expect(container.querySelector('#page-b')).not.toBe(null);
+    expect(container.querySelector('#page-a')).toBe(null);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMViewTransitionName-test.js b/packages/react-dom/src/__tests__/ReactDOMViewTransitionName-test.js
new file mode 100644
index 000000000000..7bba8e849bef
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMViewTransitionName-test.js
@@ -0,0 +1,320 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOMClient;
+let ViewTransition;
+let act;
+let startTransition;
+let addTransitionType;
+let container;
+
+describe('ReactDOMViewTransitionName', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    ViewTransition = React.ViewTransition;
+    startTransition = React.startTransition;
+    addTransitionType = React.addTransitionType;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    // Mock document.startViewTransition
+    if (!document.startViewTransition) {
+      document.startViewTransition = function ({update}) {
+        update();
+        return {
+          ready: Promise.resolve(),
+          finished: Promise.resolve(),
+          skipTransition() {},
+        };
+      };
+    }
+
+    // Mock CSS.escape
+    if (typeof CSS === 'undefined') {
+      global.CSS = {escape: str => str};
+    } else if (!CSS.escape) {
+      CSS.escape = str => str;
+    }
+
+    // Mock document.fonts
+    if (!document.fonts) {
+      Object.defineProperty(document, 'fonts', {
+        value: {status: 'loaded', ready: Promise.resolve()},
+        configurable: true,
+      });
+    }
+
+    // Mock Element.prototype.getAnimations
+    if (!Element.prototype.getAnimations) {
+      Element.prototype.getAnimations = function () {
+        return [];
+      };
+    }
+
+    // Mock Element.prototype.animate
+    if (!Element.prototype.animate) {
+      Element.prototype.animate = function () {
+        return {cancel() {}, finished: Promise.resolve()};
+      };
+    }
+
+    // Mock getBoundingClientRect
+    Element.prototype._originalGetBoundingClientRect =
+      Element.prototype.getBoundingClientRect;
+    Element.prototype.getBoundingClientRect = function () {
+      const text = this.textContent || '';
+      return new DOMRect(0, 0, text.length * 10 + 10, 20);
+    };
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    if (Element.prototype._originalGetBoundingClientRect) {
+      Element.prototype.getBoundingClientRect =
+        Element.prototype._originalGetBoundingClientRect;
+      delete Element.prototype._originalGetBoundingClientRect;
+    }
+  });
+
+  // @gate enableViewTransition
+  it('renders children without a wrapper element', async () => {
+    function App() {
+      return (
+        <ViewTransition>
+          <div id="child">Hello</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(container.querySelector('#child')).not.toBe(null);
+    expect(container.querySelector('#child').textContent).toBe('Hello');
+    // ViewTransition should not add a wrapper element
+    expect(container.firstChild.id).toBe('child');
+  });
+
+  // @gate enableViewTransition
+  it('uses explicit name prop when provided', async () => {
+    function App() {
+      return (
+        <ViewTransition name="my-transition">
+          <div id="child">Named</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    // The element should be rendered
+    expect(container.querySelector('#child')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('generates auto name when name is not provided', async () => {
+    function App() {
+      return (
+        <ViewTransition>
+          <div id="auto-named">Auto</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    expect(container.querySelector('#auto-named')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('generates auto name when name is "auto"', async () => {
+    function App() {
+      return (
+        <ViewTransition name="auto">
+          <div id="auto-explicit">Auto Explicit</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    expect(container.querySelector('#auto-explicit')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('preserves auto name across re-renders', async () => {
+    function App({text}) {
+      return (
+        <ViewTransition>
+          <div id="stable">{text}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="First" />);
+      });
+    });
+
+    expect(container.querySelector('#stable').textContent).toBe('First');
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="Second" />);
+      });
+    });
+
+    expect(container.querySelector('#stable').textContent).toBe('Second');
+  });
+
+  // @gate enableViewTransition
+  it('supports multiple ViewTransitions as siblings', async () => {
+    function App() {
+      return (
+        <div>
+          <ViewTransition name="first">
+            <div id="first">First</div>
+          </ViewTransition>
+          <ViewTransition name="second">
+            <div id="second">Second</div>
+          </ViewTransition>
+          <ViewTransition name="third">
+            <div id="third">Third</div>
+          </ViewTransition>
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    expect(container.querySelector('#first').textContent).toBe('First');
+    expect(container.querySelector('#second').textContent).toBe('Second');
+    expect(container.querySelector('#third').textContent).toBe('Third');
+  });
+
+  // @gate enableViewTransition
+  it('supports nested ViewTransitions', async () => {
+    function App() {
+      return (
+        <ViewTransition name="outer">
+          <div id="outer">
+            <ViewTransition name="inner">
+              <span id="inner">Nested</span>
+            </ViewTransition>
+          </div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    expect(container.querySelector('#outer')).not.toBe(null);
+    expect(container.querySelector('#inner').textContent).toBe('Nested');
+  });
+
+  // @gate enableViewTransition
+  it('handles conditional rendering inside ViewTransition', async () => {
+    function App({show}) {
+      return (
+        <ViewTransition>
+          <div id="wrapper">{show ? <span>Visible</span> : null}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+
+    expect(container.querySelector('#wrapper').textContent).toBe('');
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={true} />);
+      });
+    });
+
+    expect(container.querySelector('#wrapper').textContent).toBe('Visible');
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition mounting and unmounting', async () => {
+    function App({show}) {
+      if (!show) {
+        return <div id="empty">Empty</div>;
+      }
+      return (
+        <ViewTransition>
+          <div id="content">Content</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App show={false} />);
+    });
+
+    expect(container.querySelector('#empty')).not.toBe(null);
+    expect(container.querySelector('#content')).toBe(null);
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={true} />);
+      });
+    });
+
+    expect(container.querySelector('#content')).not.toBe(null);
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={false} />);
+      });
+    });
+
+    expect(container.querySelector('#content')).toBe(null);
+    expect(container.querySelector('#empty')).not.toBe(null);
+  });
+});
diff --git a/packages/react-dom/src/__tests__/ReactDOMViewTransitionWarnings-test.js b/packages/react-dom/src/__tests__/ReactDOMViewTransitionWarnings-test.js
new file mode 100644
index 000000000000..f79f35e31737
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMViewTransitionWarnings-test.js
@@ -0,0 +1,799 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOMClient;
+let ViewTransition;
+let Suspense;
+let act;
+let startTransition;
+let addTransitionType;
+let container;
+
+describe('ReactDOMViewTransitionWarnings', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    ViewTransition = React.ViewTransition;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+    addTransitionType = React.addTransitionType;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    // Mock document.startViewTransition
+    if (!document.startViewTransition) {
+      document.startViewTransition = function ({update}) {
+        update();
+        return {
+          ready: Promise.resolve(),
+          finished: Promise.resolve(),
+          skipTransition() {},
+        };
+      };
+    }
+
+    // Mock CSS.escape
+    if (typeof CSS === 'undefined') {
+      global.CSS = {escape: str => str};
+    } else if (!CSS.escape) {
+      CSS.escape = str => str;
+    }
+
+    // Mock document.fonts
+    if (!document.fonts) {
+      Object.defineProperty(document, 'fonts', {
+        value: {status: 'loaded', ready: Promise.resolve()},
+        configurable: true,
+      });
+    }
+
+    // Mock Element.prototype.getAnimations
+    if (!Element.prototype.getAnimations) {
+      Element.prototype.getAnimations = function () {
+        return [];
+      };
+    }
+
+    // Mock Element.prototype.animate
+    if (!Element.prototype.animate) {
+      Element.prototype.animate = function () {
+        return {cancel() {}, finished: Promise.resolve()};
+      };
+    }
+
+    // Mock getBoundingClientRect
+    Element.prototype._originalGetBoundingClientRect =
+      Element.prototype.getBoundingClientRect;
+    Element.prototype.getBoundingClientRect = function () {
+      const text = this.textContent || '';
+      return new DOMRect(0, 0, text.length * 10 + 10, 20);
+    };
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    if (Element.prototype._originalGetBoundingClientRect) {
+      Element.prototype.getBoundingClientRect =
+        Element.prototype._originalGetBoundingClientRect;
+      delete Element.prototype._originalGetBoundingClientRect;
+    }
+  });
+
+  // @gate enableViewTransition && __DEV__
+  it('warns when two ViewTransitions have the same name', async () => {
+    function App() {
+      return (
+        <div>
+          <ViewTransition name="duplicate">
+            <div id="first">First</div>
+          </ViewTransition>
+          <ViewTransition name="duplicate">
+            <div id="second">Second</div>
+          </ViewTransition>
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        startTransition(() => {
+          root.render(<App />);
+        });
+      });
+    }).toErrorDev([
+      'There are two <ViewTransition name="duplicate"> components with the same name',
+      'The existing <ViewTransition name="duplicate"> duplicate has this stack trace',
+    ]);
+  });
+
+  // @gate enableViewTransition && __DEV__
+  it('does not warn for "auto" name duplicates', async () => {
+    function App() {
+      return (
+        <div>
+          <ViewTransition name="auto">
+            <div id="first">First</div>
+          </ViewTransition>
+          <ViewTransition name="auto">
+            <div id="second">Second</div>
+          </ViewTransition>
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    // Should not produce any warnings
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    expect(container.querySelector('#first')).not.toBe(null);
+    expect(container.querySelector('#second')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition && __DEV__
+  it('does not warn for unnamed ViewTransitions', async () => {
+    function App() {
+      return (
+        <div>
+          <ViewTransition>
+            <div id="first">First</div>
+          </ViewTransition>
+          <ViewTransition>
+            <div id="second">Second</div>
+          </ViewTransition>
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    // Should not produce any warnings
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    expect(container.querySelector('#first')).not.toBe(null);
+    expect(container.querySelector('#second')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition && __DEV__
+  it('does not warn when duplicate is unmounted before new one mounts', async () => {
+    function App({page}) {
+      if (page === 'a') {
+        return (
+          <ViewTransition name="hero">
+            <div id="page-a">Page A</div>
+          </ViewTransition>
+        );
+      }
+      return (
+        <ViewTransition name="hero">
+          <div id="page-b">Page B</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App page="a" />);
+      });
+    });
+
+    expect(container.querySelector('#page-a')).not.toBe(null);
+
+    // Switching pages should not warn because old one unmounts
+    await act(() => {
+      startTransition(() => {
+        root.render(<App page="b" />);
+      });
+    });
+
+    expect(container.querySelector('#page-b')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition && __DEV__
+  it('only warns once per duplicate name', async () => {
+    function App({count}) {
+      const items = [];
+      for (let i = 0; i < count; i++) {
+        items.push(
+          <ViewTransition key={i} name="repeated">
+            <div>{i}</div>
+          </ViewTransition>,
+        );
+      }
+      return <div>{items}</div>;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        startTransition(() => {
+          root.render(<App count={3} />);
+        });
+      });
+    }).toErrorDev([
+      'There are two <ViewTransition name="repeated"> components with the same name',
+      'The existing <ViewTransition name="repeated"> duplicate has this stack trace',
+    ]);
+
+    // Adding more duplicates should not warn again
+    await act(() => {
+      startTransition(() => {
+        root.render(<App count={5} />);
+      });
+    });
+  });
+
+  // @gate enableViewTransition
+  it('supports different unique names without warnings', async () => {
+    function App() {
+      return (
+        <div>
+          <ViewTransition name="header">
+            <header id="header">Header</header>
+          </ViewTransition>
+          <ViewTransition name="main">
+            <main id="main">Main</main>
+          </ViewTransition>
+          <ViewTransition name="footer">
+            <footer id="footer">Footer</footer>
+          </ViewTransition>
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    expect(container.querySelector('#header').textContent).toBe('Header');
+    expect(container.querySelector('#main').textContent).toBe('Main');
+    expect(container.querySelector('#footer').textContent).toBe('Footer');
+  });
+});
+
+describe('ReactDOMViewTransitionEdgeCases', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = require('internal-test-utils').act;
+    ViewTransition = React.ViewTransition;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+    addTransitionType = React.addTransitionType;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    // Mock document.startViewTransition
+    if (!document.startViewTransition) {
+      document.startViewTransition = function ({update}) {
+        update();
+        return {
+          ready: Promise.resolve(),
+          finished: Promise.resolve(),
+          skipTransition() {},
+        };
+      };
+    }
+
+    // Mock CSS.escape
+    if (typeof CSS === 'undefined') {
+      global.CSS = {escape: str => str};
+    } else if (!CSS.escape) {
+      CSS.escape = str => str;
+    }
+
+    // Mock document.fonts
+    if (!document.fonts) {
+      Object.defineProperty(document, 'fonts', {
+        value: {status: 'loaded', ready: Promise.resolve()},
+        configurable: true,
+      });
+    }
+
+    // Mock Element.prototype.getAnimations
+    if (!Element.prototype.getAnimations) {
+      Element.prototype.getAnimations = function () {
+        return [];
+      };
+    }
+
+    // Mock Element.prototype.animate
+    if (!Element.prototype.animate) {
+      Element.prototype.animate = function () {
+        return {cancel() {}, finished: Promise.resolve()};
+      };
+    }
+
+    // Mock getBoundingClientRect
+    Element.prototype._originalGetBoundingClientRect =
+      Element.prototype.getBoundingClientRect;
+    Element.prototype.getBoundingClientRect = function () {
+      const text = this.textContent || '';
+      return new DOMRect(0, 0, text.length * 10 + 10, 20);
+    };
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    if (Element.prototype._originalGetBoundingClientRect) {
+      Element.prototype.getBoundingClientRect =
+        Element.prototype._originalGetBoundingClientRect;
+      delete Element.prototype._originalGetBoundingClientRect;
+    }
+  });
+
+  // @gate enableViewTransition
+  it('handles rapid mount/unmount cycles', async () => {
+    function App({show}) {
+      if (!show) return null;
+      return (
+        <ViewTransition name="rapid">
+          <div id="rapid">Rapid</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+
+    // Rapid mount/unmount
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={true} />);
+      });
+    });
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={false} />);
+      });
+    });
+    await act(() => {
+      startTransition(() => {
+        root.render(<App show={true} />);
+      });
+    });
+
+    expect(container.querySelector('#rapid')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition with null children', async () => {
+    function App() {
+      return (
+        <ViewTransition>
+          <div id="wrapper">{null}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(container.querySelector('#wrapper')).not.toBe(null);
+    expect(container.querySelector('#wrapper').textContent).toBe('');
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition with text children', async () => {
+    function App() {
+      return (
+        <ViewTransition>
+          <div id="text-child">Just text content</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(container.querySelector('#text-child').textContent).toBe(
+      'Just text content',
+    );
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition with multiple DOM children', async () => {
+    function App() {
+      return (
+        <ViewTransition>
+          <div id="multi-parent">
+            <span>One</span>
+            <span>Two</span>
+            <span>Three</span>
+          </div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    const parent = container.querySelector('#multi-parent');
+    expect(parent.children.length).toBe(3);
+    expect(parent.children[0].textContent).toBe('One');
+    expect(parent.children[1].textContent).toBe('Two');
+    expect(parent.children[2].textContent).toBe('Three');
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition inside a list', async () => {
+    function App({items}) {
+      return (
+        <ul>
+          {items.map(item => (
+            <ViewTransition key={item.id} name={`item-${item.id}`}>
+              <li id={`item-${item.id}`}>{item.text}</li>
+            </ViewTransition>
+          ))}
+        </ul>
+      );
+    }
+
+    const items = [
+      {id: 1, text: 'Apple'},
+      {id: 2, text: 'Banana'},
+      {id: 3, text: 'Cherry'},
+    ];
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App items={items} />);
+      });
+    });
+
+    expect(container.querySelector('#item-1').textContent).toBe('Apple');
+    expect(container.querySelector('#item-2').textContent).toBe('Banana');
+    expect(container.querySelector('#item-3').textContent).toBe('Cherry');
+
+    // Reorder items
+    const reordered = [items[2], items[0], items[1]];
+    await act(() => {
+      startTransition(() => {
+        root.render(<App items={reordered} />);
+      });
+    });
+
+    const listItems = container.querySelectorAll('li');
+    expect(listItems[0].textContent).toBe('Cherry');
+    expect(listItems[1].textContent).toBe('Apple');
+    expect(listItems[2].textContent).toBe('Banana');
+  });
+
+  // @gate enableViewTransition
+  it('handles adding items to a list with ViewTransitions', async () => {
+    function App({items}) {
+      return (
+        <ul>
+          {items.map(item => (
+            <ViewTransition key={item} name={`list-${item}`}>
+              <li id={`list-${item}`}>{item}</li>
+            </ViewTransition>
+          ))}
+        </ul>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App items={['a', 'b']} />);
+      });
+    });
+
+    expect(container.querySelectorAll('li').length).toBe(2);
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App items={['a', 'b', 'c', 'd']} />);
+      });
+    });
+
+    expect(container.querySelectorAll('li').length).toBe(4);
+    expect(container.querySelector('#list-c').textContent).toBe('c');
+    expect(container.querySelector('#list-d').textContent).toBe('d');
+  });
+
+  // @gate enableViewTransition
+  it('handles removing items from a list with ViewTransitions', async () => {
+    function App({items}) {
+      return (
+        <ul>
+          {items.map(item => (
+            <ViewTransition key={item} name={`rm-${item}`}>
+              <li id={`rm-${item}`}>{item}</li>
+            </ViewTransition>
+          ))}
+        </ul>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App items={['x', 'y', 'z']} />);
+      });
+    });
+
+    expect(container.querySelectorAll('li').length).toBe(3);
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App items={['x']} />);
+      });
+    });
+
+    expect(container.querySelectorAll('li').length).toBe(1);
+    expect(container.querySelector('#rm-x').textContent).toBe('x');
+    expect(container.querySelector('#rm-y')).toBe(null);
+    expect(container.querySelector('#rm-z')).toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition with Suspense fallback', async () => {
+    let resolve;
+    const promise = new Promise(r => (resolve = r));
+
+    function AsyncChild() {
+      return React.use(promise);
+    }
+
+    function App() {
+      return (
+        <ViewTransition>
+          <Suspense fallback={<div id="fallback">Loading...</div>}>
+            <AsyncChild />
+          </Suspense>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    // Should show fallback
+    expect(container.querySelector('#fallback')).not.toBe(null);
+
+    // Resolve the promise
+    await act(async () => {
+      resolve(<div id="resolved">Loaded!</div>);
+    });
+
+    expect(container.querySelector('#resolved')).not.toBe(null);
+    expect(container.querySelector('#fallback')).toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition with key change', async () => {
+    function App({id}) {
+      return (
+        <ViewTransition key={id} name={`card-${id}`}>
+          <div id={`card-${id}`}>Card {id}</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App id="1" />);
+      });
+    });
+
+    expect(container.querySelector('#card-1')).not.toBe(null);
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App id="2" />);
+      });
+    });
+
+    expect(container.querySelector('#card-2')).not.toBe(null);
+    expect(container.querySelector('#card-1')).toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition name change on same component', async () => {
+    function App({name}) {
+      return (
+        <ViewTransition name={name}>
+          <div id="named">Named transition</div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App name="first-name" />);
+      });
+    });
+
+    expect(container.querySelector('#named')).not.toBe(null);
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App name="second-name" />);
+      });
+    });
+
+    expect(container.querySelector('#named')).not.toBe(null);
+  });
+
+  // @gate enableViewTransition
+  it('handles deeply nested ViewTransitions', async () => {
+    function App() {
+      return (
+        <ViewTransition name="level-1">
+          <div id="l1">
+            <ViewTransition name="level-2">
+              <div id="l2">
+                <ViewTransition name="level-3">
+                  <div id="l3">Deep</div>
+                </ViewTransition>
+              </div>
+            </ViewTransition>
+          </div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+
+    expect(container.querySelector('#l1')).not.toBe(null);
+    expect(container.querySelector('#l2')).not.toBe(null);
+    expect(container.querySelector('#l3').textContent).toBe('Deep');
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition with Fragment children', async () => {
+    function App() {
+      return (
+        <ViewTransition>
+          <div id="frag-parent">
+            <>
+              <span>Fragment child 1</span>
+              <span>Fragment child 2</span>
+            </>
+          </div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    const parent = container.querySelector('#frag-parent');
+    expect(parent.children.length).toBe(2);
+    expect(parent.children[0].textContent).toBe('Fragment child 1');
+    expect(parent.children[1].textContent).toBe('Fragment child 2');
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition with component children', async () => {
+    function Child({text}) {
+      return <span id="comp-child">{text}</span>;
+    }
+
+    function App() {
+      return (
+        <ViewTransition>
+          <div>
+            <Child text="Component child" />
+          </div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(container.querySelector('#comp-child').textContent).toBe(
+      'Component child',
+    );
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition with memo component', async () => {
+    const MemoChild = React.memo(function MemoChild({text}) {
+      return <div id="memo-child">{text}</div>;
+    });
+
+    function App({text}) {
+      return (
+        <ViewTransition>
+          <div>
+            <MemoChild text={text} />
+          </div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App text="Memoized" />);
+    });
+
+    expect(container.querySelector('#memo-child').textContent).toBe(
+      'Memoized',
+    );
+
+    await act(() => {
+      startTransition(() => {
+        root.render(<App text="Updated" />);
+      });
+    });
+
+    expect(container.querySelector('#memo-child').textContent).toBe('Updated');
+  });
+
+  // @gate enableViewTransition
+  it('handles ViewTransition with forwardRef component', async () => {
+    const RefChild = React.forwardRef(function RefChild(props, ref) {
+      return (
+        <div id="ref-child" ref={ref}>
+          {props.text}
+        </div>
+      );
+    });
+
+    function App() {
+      const ref = React.useRef(null);
+      return (
+        <ViewTransition>
+          <div>
+            <RefChild ref={ref} text="With ref" />
+          </div>
+        </ViewTransition>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(<App />);
+    });
+
+    expect(container.querySelector('#ref-child').textContent).toBe('With ref');
+  });
+});