packages/pretty-format/src/plugins/ReactElement.ts - main - githubmirror/jest

packages/pretty-format/src/plugins/ReactElement.ts
135 строк4 KB
Simen Bekkhus
feat(pretty-format): support React 19 (#16123)
05 май 2026, 12:41
05 май 2026, 12:41f9bb970
/**
 * 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.
 */

import * as ReactIs18 from 'react-is-18';
import * as ReactIs19 from 'react-is-19';
import type {Config, NewPlugin, Printer, Refs} from '../types';
import {
  printChildren,
  printElement,
  printElementAsLeaf,
  printProps,
} from './lib/markup';

const isElement = (val: unknown) =>
  ReactIs18.isElement(val) || ReactIs19.isElement(val);
const isFragment = (val: unknown) =>
  ReactIs18.isFragment(val) || ReactIs19.isFragment(val);
const isSuspense = (val: unknown) =>
  ReactIs18.isSuspense(val) || ReactIs19.isSuspense(val);
const isContextProvider = (val: unknown) =>
  ReactIs18.isContextProvider(val) || ReactIs19.isContextProvider(val);
const isContextConsumer = (val: unknown) =>
  ReactIs18.isContextConsumer(val) || ReactIs19.isContextConsumer(val);
const isForwardRef = (val: unknown) =>
  ReactIs18.isForwardRef(val) || ReactIs19.isForwardRef(val);
const isMemo = (val: unknown) => ReactIs18.isMemo(val) || ReactIs19.isMemo(val);

// Given element.props.children, or subtree during recursive traversal,
// return flattened array of children.
const getChildren = (arg: unknown, children: Array<unknown> = []) => {
  if (Array.isArray(arg)) {
    for (const item of arg) {
      getChildren(item, children);
    }
  } else if (arg != null && arg !== false && arg !== '') {
    children.push(arg);
  }
  return children;
};

const getType = (element: any) => {
  const type = element.type;
  if (typeof type === 'string') {
    return type;
  }
  if (typeof type === 'function') {
    return type.displayName || type.name || 'Unknown';
  }

  if (isFragment(element)) {
    return 'React.Fragment';
  }
  if (isSuspense(element)) {
    return 'React.Suspense';
  }
  if (typeof type === 'object' && type !== null) {
    if (isContextProvider(element)) {
      return 'Context.Provider';
    }

    if (isContextConsumer(element)) {
      return 'Context.Consumer';
    }

    if (isForwardRef(element)) {
      if (type.displayName) {
        return type.displayName;
      }

      const functionName = type.render.displayName || type.render.name || '';

      return functionName === '' ? 'ForwardRef' : `ForwardRef(${functionName})`;
    }

    if (isMemo(element)) {
      const functionName =
        type.displayName || type.type.displayName || type.type.name || '';

      return functionName === '' ? 'Memo' : `Memo(${functionName})`;
    }
  }
  return 'UNDEFINED';
};

const getPropKeys = (element: any) => {
  const {props} = element;

  return Object.keys(props)
    .filter(key => key !== 'children' && props[key] !== undefined)
    .sort();
};

export const serialize: NewPlugin['serialize'] = (
  element: any,
  config: Config,
  indentation: string,
  depth: number,
  refs: Refs,
  printer: Printer,
) =>
  ++depth > config.maxDepth
    ? printElementAsLeaf(getType(element), config)
    : printElement(
        getType(element),
        printProps(
          getPropKeys(element),
          element.props,
          config,
          indentation + config.indent,
          depth,
          refs,
          printer,
        ),
        printChildren(
          getChildren(element.props.children),
          config,
          indentation + config.indent,
          depth,
          refs,
          printer,
        ),
        config,
        indentation,
      );

export const test: NewPlugin['test'] = (val: unknown) =>
  val != null && isElement(val);

const plugin: NewPlugin = {serialize, test};

export default plugin;