cypress-io/cypress · error · Error

[@cypress/react] 🔥 Hmm, cannot find root element to mount t

Error message

[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}

What it means

Thrown by @cypress/react's mount function when getContainerEl() returns null/undefined. The container is the DOM node matching ROOT_SELECTOR (exported by @cypress/mount-utils) inside the Cypress AUT iframe that React mounts into. If that node is absent at mount time, render cannot proceed and the error names the selector that was searched for.

Source

Thrown at npm/react/src/createMount.ts:41

  jsx: React.ReactNode,
  options: MountOptions = {},
  rerenderKey?: string,
  internalMountOptions?: InternalMountOptions,
): globalThis.Cypress.Chainable<MountReturn> => {
  if (!internalMountOptions) {
    throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters')
  }

  mountCleanup = internalMountOptions.cleanup

  return cy
  .then(() => {
    const reactDomToUse = internalMountOptions.reactDom

    const el = getContainerEl()

    if (!el) {
      throw new Error(
        [
          `[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
        ].join(' '),
      )
    }

    const key = rerenderKey ??
        // @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
        (Cypress?.mocha?.getRunner()?.test?.title as string || '') + Math.random()
    const props = {
      key,
    }

    const reactComponent = React.createElement(
      options.strict ? React.StrictMode : React.Fragment,
      props,
      jsx,
    )

View on GitHub (pinned to 0d85fdc912)

Solutions

Confirm your cypress.config.ts sets `component.specPattern` and `component.support` correctly so setupHooks runs.
If you customized the dev-server index.html, ensure it still contains the root element matching ROOT_SELECTOR (typically `<div id="__cypress-root">` or `data-cy-root`).
Make sure you are running the spec as component (`cypress open --component` / testingType='component'), not e2e.
Reinstall/upgrade @cypress/react and @cypress/mount-utils to matching versions so the container contract is consistent.

Example fix

// before: custom index.html missing the mount point
<!DOCTYPE html><html><body></body></html>
// after: include the root selector
<!DOCTYPE html><html><body><div data-cy-root></div></body></html>

Defensive patterns

Strategy: validation

Validate before calling

cy.document().then((doc) => {
  if (!doc.querySelector('[data-cy-root]')) throw new Error('mount root missing')
}).then(() => cy.mount(<App/>))

Type guard

const hasMountRoot = (doc: Document): boolean => !!doc.querySelector('[data-cy-root]')

Prevention

Configure component.support and component.specPattern so setupHooks injects the root.
Keep the default CT index.html; if customizing, retain the root selector div.
Run specs as testingType='component'.

When it happens

Trigger: Calling `cy.mount(<Component/>)` before the Cypress AUT iframe has injected the root container element. Happens when the CT support HTML template is missing or overridden, when mount is called outside a CT run (testingType !== 'component' so setupHooks never injected the container), or when a custom index.html stripped the root element.

Common situations: CT support file not configured or mis-imported; running a component spec as e2e by mistake; a customized dev-server index.html that removed the `<div data-cy-root>` (or whatever ROOT_SELECTOR resolves to); an async race where mount runs before document is ready.

Related errors

AI-assisted analysis of cypress-io/cypress@0d85fdc912 (2026-08-12). Data as JSON: /api/errors/36840d1177480b19. Report an issue: GitHub.