facebook/react · error

364

364

Error message

Invalid host root specified. Should be either a React container or a node with a testname attribute.

What it means

React's test-selector layer (findAllNodes and friends, used by DevTools and www-style testing tooling) resolves the host root you pass to a fiber root via findFiberRootForHostRoot. If the node maps to a React instance, the contract additionally requires that instance to carry a string data-testname prop; when memoizedProps['data-testname'] is missing or not a string, the root is rejected (error code 364).

Source

Thrown at packages/react-reconciler/src/ReactTestSelectors.js:124

export function createTextSelector(text: string): TextSelector {
  return {
    $$typeof: TEXT_TYPE,
    value: text,
  };
}

export function createTestNameSelector(id: string): TestNameSelector {
  return {
    $$typeof: TEST_NAME_TYPE,
    value: id,
  };
}

function findFiberRootForHostRoot(hostRoot: Instance): Fiber {
  const maybeFiber = getInstanceFromNode(hostRoot as any);
  if (maybeFiber != null) {
    if (typeof maybeFiber.memoizedProps['data-testname'] !== 'string') {
      throw new Error(
        'Invalid host root specified. Should be either a React container or a node with a testname attribute.',
      );
    }

    return maybeFiber as any as Fiber;
  } else {
    const fiberRoot = findFiberRoot(hostRoot);

    // $FlowFixMe[invalid-compare]
    if (fiberRoot === null) {
      throw new Error(
        'Could not find React container within specified host subtree.',
      );
    }

    // The Flow type for FiberRoot is a little funky.
    // createFiberRoot() cheats this by treating the root as :any and adding stateNode lazily.
    return (fiberRoot as any).stateNode.current as Fiber;

View on GitHub (pinned to eafeac097b)

Solutions

  1. Render into an element that already has data-testname set (e.g. <div id='app' data-testname='root'> in the HTML) before calling selector APIs
  2. Pass the exact container element you gave to createRoot, not an ancestor like document.body
  3. If you did not mean to use test selectors, use the regular DOM/container APIs instead of the test-selector entry points

Example fix

// before
const root = document.getElementById('app'); // <div id='app'></div>
createRoot(root).render(<App />);
findAllNodes(document.body, [createTestNameSelector('feed')]); // no data-testname anywhere

// after
// index.html: <div id='app' data-testname='root'></div>
const root = document.getElementById('app');
createRoot(root).render(<App />);
findAllNodes(root, [createTestNameSelector('feed')]);
Defensive patterns

Strategy: validation

Validate before calling

const isTestNameRoot = (el) =>
  el instanceof Element &&
  typeof el.getAttribute('data-testname') === 'string';
if (!isTestNameRoot(hostRoot)) {
  throw new TypeError('host root needs data-testname before test-selector queries');
}

Type guard

function isTestNameRoot(el) {
  return el instanceof Element && typeof el.getAttribute('data-testname') === 'string';
}

Prevention

When it happens

Trigger: Calling a test-selector API (e.g. findAllNodes) with a host root that is a React container but whose container element was rendered without a data-testname attribute, so the instance lookup succeeds while the testname check fails.

Common situations: Using www-derived test-selector tooling outside the environment where containers always get data-testname; querying document.body when the attribute lives on the app container div; attributes added after render so memoizedProps never saw them.

Related errors


AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/5153cd6796278f05. Report an issue: GitHub.