The fixtures/ directory contains standalone applications and tools designed to test React's features in real-world environments. These fixtures serve as integration tests, performance benchmarks, and reference implementations for complex features like React Server Components (RSC), Streaming SSR, and Attribute Handling.
The Flight fixtures demonstrate the end-to-end integration of React Server Components using the react-server-dom-webpack and react-server-dom-unbundled packages.
The primary Flight fixture (fixtures/flight/src/App.js) implements a hybrid application where the server renders high-level components and streams them to the client.
renderToPipeableStream (in server/region.js) or renderToReadableStream (in App.js) from react-server-dom-unbundled/server to serialize the component tree into the Flight wire protocol fixtures/flight/src/App.js2 fixtures/flight/server/region.js79-81 fixtures/flight/server/region.js129-133createFromFetch to consume the RSC stream and ReactDOM.hydrateRoot to attach to the DOM fixtures/flight/src/index.js62-143actions.js and passed to client components as props fixtures/flight/src/App.js26 The client uses encodeReply to send arguments back to the server via a POST request fixtures/flight/src/index.js70-86debugChannel to provide source-map URLs and enhanced debugging info via createWebSocketStream fixtures/flight/src/index.js16-76This diagram maps the logical flow of the Flight fixture to specific code entities and server-side entry points.
Sources:
The attribute-behavior fixture is a specialized tool used to verify how React handles thousands of different HTML and SVG attributes across different value types (strings, booleans, objects, etc.).
It programmatically generates a grid of every supported attribute and compares three states:
ReactDOM.createRoot or legacy renderers to mount attributes in a browser environment fixtures/attribute-behavior/src/App.js241-264renderToReadableStream to generate HTML strings fixtures/attribute-behavior/src/App.js222-238getCanonicalizedValue to convert complex objects (like SVGMatrix, SVGLength, or Symbol) into standard string representations for comparison fixtures/attribute-behavior/src/App.js126-212The fixture iterates through an array of attribute definitions fixtures/attribute-behavior/src/attributes.js27-264 and a set of test types fixtures/attribute-behavior/src/App.js16-116 It detects "mismatches" where the SSR output does not match the client hydration result.
The results are stored in AttributeTableSnapshot.md, which serves as a regression baseline for React's DOM attribute logic fixtures/attribute-behavior/AttributeTableSnapshot.md1-141
| Attribute | Test Case | Flags | Result |
|---|---|---|---|
about | about=(numeric string) | (changed) | "42" |
accent-height | accent-height=(NaN) | (changed, warning) | "NaN" |
accept | accept=(true) | (initial, warning) | <empty string> |
Sources:
The fixtures/dom directory contains a manual testing application. It allows developers to verify behavior across different versions of React and build types fixtures/dom/src/components/Header.js6-15
VersionPicker component allows loading different React versions via query parameters fixtures/dom/src/components/Header.js96-104Sources:
These fixtures provide minimal examples of Fizz (React's streaming SSR engine).
ssr/: Demonstrates basic renderToPipeableStream usage with Suspense boundaries.ssr2/: An example focused on hydration and renderToReadableStream for Edge/Web environments.This diagram bridges the natural language concept of "Streaming SSR" to the specific code entities in the ssr fixtures.
Sources:
The fixtures/view-transition directory contains a demonstration of React's integration with the View Transitions API. This fixture showcases how React manages and coordinates visual transitions between different UI states, particularly in response to user gestures.
The core of the View Transition integration lies within the React reconciler, specifically in ReactFiberGestureScheduler.js. This module manages ScheduledGesture objects, which represent ongoing or scheduled view transitions.
ScheduledGesture: This type tracks the state of a gesture-driven transition, including its provider (the GestureTimeline), rangeStart, rangeEnd, associated types, and a running ViewTransition instance packages/react-reconciler/src/ReactFiberGestureScheduler.js31-43scheduleGesture: This function is called to register a new gesture with a root. It either finds an existing ScheduledGesture for the given provider or creates a new one, adding it to the root.pendingGestures list packages/react-reconciler/src/ReactFiberGestureScheduler.js45-82startScheduledGesture: When a gesture begins, this function updates the rangeStart and rangeEnd properties of the corresponding ScheduledGesture and accumulates any transitionTypes packages/react-reconciler/src/ReactFiberGestureScheduler.js84-132cancelScheduledGesture: When a gesture ends (e.g., user releases a swipe), this function determines whether to commit the current state or revert. It can trigger a commit by calling pingGestureRoot or directly executing a pending commit callback packages/react-reconciler/src/ReactFiberGestureScheduler.js134-182The fixture itself likely uses a component like SwipeRecognizer (fixtures/view-transition/src/components/SwipeRecognizer.js) to capture user input and drive the GestureTimeline provider, which then interacts with the reconciler's gesture scheduling logic.
Sources:
The fixtures/ directory also includes configurations for verifying build integrity:
flight-esm: Specifically tests the ESM build of the Flight loader using Node's --experimental-loader packages/react-server-dom-esm/src/ReactFlightESMNodeLoader.js.codesandbox/ci.json file specifies which packages should be built and published for PR previews, ensuring that packages like react-server-dom-webpack can be tested in a live environment .codesandbox/ci.json1-13flight fixture uses custom scripts to copy local builds of oss-experimental into node_modules before starting development servers fixtures/flight/package.json73-74Sources:
Refresh this wiki