Skip to content

Add comprehensive ViewTransition component unit tests#36515

Open
vansszh wants to merge 1 commit into
facebook:mainfrom
vansszh:add-view-transition-tests
Open

Add comprehensive ViewTransition component unit tests#36515
vansszh wants to merge 1 commit into
facebook:mainfrom
vansszh:add-view-transition-tests

Conversation

@vansszh
Copy link
Copy Markdown

@vansszh vansszh commented May 21, 2026

Summary

Add three new test files with comprehensive unit tests for the <ViewTransition> component, covering areas that currently lack test coverage.

The existing test coverage is minimal (6 tests in ReactDOMViewTransition-test.js, 4 in ReactDOMFizzViewTransition-test.js, 1 in ViewTransitionReactServer-test.js) relative to the 35KB+ of source code in ReactFiberCommitViewTransitions.js and ReactFiberViewTransitionComponent.js.

New Test Files

ReactDOMViewTransitionName-test.js (9 tests)

  • Renders children without a wrapper element
  • Uses explicit name prop when provided
  • Generates auto name when name is not provided
  • Generates auto name when name is 'auto'
  • Preserves auto name across re-renders
  • Supports multiple ViewTransitions as siblings
  • Supports nested ViewTransitions
  • Handles conditional rendering inside ViewTransition
  • Handles ViewTransition mounting and unmounting

ReactDOMViewTransitionClass-test.js (14 tests)

  • Accepts string as default/update/enter/exit/share class
  • Accepts object with default key as class
  • Accepts object with transition type keys
  • Handles 'none' class which suppresses transition
  • Handles 'none' in object class taking precedence
  • Handles 'auto' class
  • Combines multiple matching transition type classes
  • Falls back to default when no transition types match
  • Event class overrides default class
  • Event class 'auto' nullifies the class
  • Supports different classes for enter, exit, update, and share

ReactDOMViewTransitionWarnings-test.js (6 warning tests + 13 edge case tests)

  • Warns when two ViewTransitions have the same name
  • Does not warn for 'auto' name duplicates
  • Does not warn for unnamed ViewTransitions
  • Does not warn when duplicate is unmounted before new one mounts
  • Only warns once per duplicate name
  • Supports different unique names without warnings
  • Handles rapid mount/unmount cycles
  • Handles null/text/multiple DOM/Fragment children
  • Handles list operations (add, remove, reorder)
  • Handles Suspense fallback integration
  • Handles key changes and name changes
  • Handles deeply nested ViewTransitions
  • Handles memo and forwardRef components

How did you test this change?

These are test-only additions. They follow the same patterns as the existing ReactDOMViewTransition-test.js test file (same mocking approach for document.startViewTransition, getBoundingClientRect, getAnimations, etc.).

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.
@meta-cla meta-cla Bot added the CLA Signed label May 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant