{"record":{"id":"36840d1177480b19","repo":"cypress-io/cypress","slug":"cypress-react-hmm-cannot-find-root-element","errorCode":null,"errorMessage":"[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}","messagePattern":"\\[@cypress/react\\] 🔥 Hmm, cannot find root element to mount the component\\. Searched for (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"npm/react/src/createMount.ts","lineNumber":41,"sourceCode":" jsx: React.ReactNode,\n options: MountOptions = {},\n rerenderKey?: string,\n internalMountOptions?: InternalMountOptions,\n): globalThis.Cypress.Chainable => {\n if (!internalMountOptions) {\n throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters')\n }\n\n mountCleanup = internalMountOptions.cleanup\n\n return cy\n .then(() => {\n const reactDomToUse = internalMountOptions.reactDom\n\n const el = getContainerEl()\n\n if (!el) {\n throw new Error(\n [\n `[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,\n ].join(' '),\n )\n }\n\n const key = rerenderKey ??\n // @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests\n (Cypress?.mocha?.getRunner()?.test?.title as string || '') + Math.random()\n const props = {\n key,\n }\n\n const reactComponent = React.createElement(\n options.strict ? React.StrictMode : React.Fragment,\n props,\n jsx,\n )","sourceCodeStart":23,"sourceCodeEnd":59,"githubUrl":"https://github.com/cypress-io/cypress/blob/0d85fdc91230885bca0a91df278312800a48b727/npm/react/src/createMount.ts#L23-L59","documentation":"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.","triggerScenarios":"Calling `cy.mount()` 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.","commonSituations":"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 `

` (or whatever ROOT_SELECTOR resolves to); an async race where mount runs before document is ready.","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 `

` 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."],"exampleFix":"// before: custom index.html missing the mount point\n\n// after: include the root selector\n

","handlingStrategy":"validation","validationCode":"cy.document().then((doc) => {\n if (!doc.querySelector('[data-cy-root]')) throw new Error('mount root missing')\n}).then(() => cy.mount())","typeGuard":"const hasMountRoot = (doc: Document): boolean => !!doc.querySelector('[data-cy-root]')","tryCatchPattern":null,"preventionTips":["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'."],"tags":["react","component-testing","mount","dom","mount-utils"],"backgroundTag":null,"analyzedSha":"0d85fdc91230885bca0a91df278312800a48b727","analyzedAt":"2026-08-12T16:24:28.056Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}