mockRangeClientRects() — react Function Reference

Architecture documentation for the mockRangeClientRects() function in IntersectionMocks.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ mockRangeClientRects() — react Function Reference

Dependency Diagram

graph TD
  8db7eb4d_0120_c460_d278_109a03b0a6c3["mockRangeClientRects()"]
  401ac3c1_db64_239a_36cd_82c9b882e0ea["IntersectionMocks.js"]
  8db7eb4d_0120_c460_d278_109a03b0a6c3 -->|defined in| 401ac3c1_db64_239a_36cd_82c9b882e0ea
  style 8db7eb4d_0120_c460_d278_109a03b0a6c3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom/src/__tests__/utils/IntersectionMocks.js lines 101–150

export function mockRangeClientRects(
  rects = [{x: 0, y: 0, width: 100, height: 20}],
) {
  const originalCreateRange = document.createRange;
  document.createRange = function () {
    const range = originalCreateRange.call(document);
    range.getClientRects = function () {
      return rects.map(({x, y, width, height}) => ({
        width,
        height,
        left: x,
        right: x + width,
        top: y,
        bottom: y + height,
        x,
        y,
      }));
    };
    range.getBoundingClientRect = function () {
      // Return the bounding rect that encompasses all rects
      if (rects.length === 0) {
        return {
          width: 0,
          height: 0,
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          x: 0,
          y: 0,
        };
      }
      const first = rects[0];
      return {
        width: first.width,
        height: first.height,
        left: first.x,
        right: first.x + first.width,
        top: first.y,
        bottom: first.y + first.height,
        x: first.x,
        y: first.y,
      };
    };
    return range;
  };
  return function restore() {
    document.createRange = originalCreateRange;
  };
}