getVisibleChildren() — react Function Reference

Architecture documentation for the getVisibleChildren() function in FizzTestUtils.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ getVisibleChildren() — react Function Reference

Dependency Diagram

graph TD
  dc727932_2bab_9de2_f215_48f13d12c70d["getVisibleChildren()"]
  7c063c03_f497_41b6_7547_aff9bc8a9af7["FizzTestUtils.js"]
  dc727932_2bab_9de2_f215_48f13d12c70d -->|defined in| 7c063c03_f497_41b6_7547_aff9bc8a9af7
  style dc727932_2bab_9de2_f215_48f13d12c70d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom/src/test-utils/FizzTestUtils.js lines 142–188

function getVisibleChildren(element: Element): React$Node {
  const children = [];
  let node: any = element.firstChild;
  while (node) {
    if (node.nodeType === 1) {
      if (
        ((node.tagName !== 'SCRIPT' && node.tagName !== 'script') ||
          node.hasAttribute('data-meaningful')) &&
        node.tagName !== 'TEMPLATE' &&
        node.tagName !== 'template' &&
        !node.hasAttribute('hidden') &&
        !node.hasAttribute('aria-hidden') &&
        // Ignore the render blocking expect
        (node.getAttribute('rel') !== 'expect' ||
          node.getAttribute('blocking') !== 'render')
      ) {
        const props: any = {};
        const attributes = node.attributes;
        for (let i = 0; i < attributes.length; i++) {
          if (
            attributes[i].name === 'id' &&
            attributes[i].value.includes(':')
          ) {
            // We assume this is a React added ID that's a non-visual implementation detail.
            continue;
          }
          props[attributes[i].name] = attributes[i].value;
        }
        const nestedChildren = getVisibleChildren(node);
        if (nestedChildren !== undefined) {
          props.children = nestedChildren;
        }
        children.push(
          require('react').createElement(node.tagName.toLowerCase(), props),
        );
      }
    } else if (node.nodeType === 3) {
      children.push(node.data);
    }
    node = node.nextSibling;
  }
  return children.length === 0
    ? undefined
    : children.length === 1
      ? children[0]
      : children;
}