How to Mock React Fiber Architecture

This article explains how to mock React’s internal Fiber architecture for advanced testing, custom renderers, or library development. It covers how to inspect and mock the internal Fiber node structure attached to DOM elements, mock the React Scheduler to control concurrent rendering, and simulate Fiber-based updates in unit tests.

React Fiber is the core reconciliation engine responsible for scheduling, pausing, and resuming rendering work. Because Fiber is an internal implementation detail, you should rarely mock it for standard component testing. However, if you are building testing utilities, deep profiling tools, or custom renderers, you must interact with and mock Fiber nodes.

Mocking Fiber Nodes on DOM Elements

React attaches internal Fiber node references directly to DOM elements. In a testing environment like Jest or Vitest, you can mock this reference to simulate specific component trees, state, or hook configurations.

React prefixes these internal keys with __reactFiber$ followed by a random ID. You can find and mock this property on a target DOM node:

// Helper to find the Fiber key on a DOM element
function getFiberNode(domElement) {
  const key = Object.keys(domElement).find(key => key.startsWith('__reactFiber$'));
  return key ? domElement[key] : null;
}

// Mocking a Fiber node in a test
test('should mock a Fiber node structure', () => {
  const mockElement = document.createElement('div');
  
  // Create a mock Fiber node structure
  const mockFiberNode = {
    type: 'div',
    pendingProps: { className: 'test' },
    memoizedState: null,
    child: null,
    sibling: null,
    return: null // Points to parent Fiber
  };

  // Attach the mock Fiber to the DOM node
  mockElement['__reactFiber$randomId123'] = mockFiberNode;

  const fiber = getFiberNode(mockElement);
  expect(fiber.type).toBe('div');
});

Mocking the React Scheduler for Concurrent Fiber Behavior

Fiber’s primary feature is its ability to split rendering work into chunks. To test how your application handles this asynchronous, prioritized rendering, you can mock the scheduler package that powers Fiber.

Using Jest, you can mock the scheduler to control exactly when Fiber tasks are executed:

jest.mock('scheduler', () => {
  const actualScheduler = jest.requireActual('scheduler/unstable_mock');
  return actualScheduler;
});

import { unstable_flushAll, unstable_yieldValue } from 'scheduler';

test('should mock Scheduler to control Fiber task execution', () => {
  // Trigger state updates that cause Fiber to schedule concurrent work
  
  // Assert that work is paused
  expect(unstable_yieldValue()).toBeUndefined();
  
  // Force Fiber to flush all pending rendering work synchronously
  unstable_flushAll();
});

Simulating Fiber State Updates Using React’s Act API

For 99% of testing scenarios, directly mutating Fiber nodes is brittle and prone to breaking across React versions. Instead, use the act function from React or React Testing Library. Under the hood, act hooks into React Fiber’s work loop, ensuring that all scheduled Fiber updates, effects, and re-renders are processed and flushed before assertions run.

import { act } from 'react';
import { createRoot } from 'react-dom/client';

test('handles Fiber reconciliation safely', () => {
  const container = document.createElement('div');
  const root = createRoot(container);

  act(() => {
    root.render(<MyComponent />);
  });

  // Fiber has fully reconciled the tree and flushed effects
  expect(container.textContent).toBe('Expected Content');
});