{
  "doc": {
    "id": "app/component-testing/react/api",
    "title": "React API",
    "description": "API for mounting React components in Cypress tests.",
    "section": "app",
    "source_path": "/llm/markdown/app/component-testing/react/api.md",
    "version": "24a73f8a97175663aaffd3b016289fb2a523a4ea",
    "updated_at": "2026-05-14T20:17:33.301Z",
    "headings": [
      {
        "id": "app/component-testing/react/api#react-api",
        "text": "React API",
        "level": 1
      },
      {
        "id": "app/component-testing/react/api#methods",
        "text": "Methods",
        "level": 2
      },
      {
        "id": "app/component-testing/react/api#mount",
        "text": "mount",
        "level": 3
      },
      {
        "id": "app/component-testing/react/api#example",
        "text": "Example",
        "level": 4
      },
      {
        "id": "app/component-testing/react/api#getcontainerel",
        "text": "getContainerEl",
        "level": 3
      },
      {
        "id": "app/component-testing/react/api#interfaces",
        "text": "Interfaces",
        "level": 2
      },
      {
        "id": "app/component-testing/react/api#mountoptions",
        "text": "MountOptions",
        "level": 3
      },
      {
        "id": "app/component-testing/react/api#mountreturn",
        "text": "MountReturn",
        "level": 3
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "React API"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Methods"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "mount"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { mount } from 'cypress/react'"
      },
      {
        "type": "html",
        "value": "<table><tbody><tr><td>Description</td><td>Mounts a React component into the DOM.</td></tr><tr><td>Signature</td><td><p>mount(jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string): Cypress.Chainable&lt;MountReturn&gt;</p></td></tr><tr><td>Returns</td><td>Cypress.Chainable&lt;MountReturn&gt;</td></tr></tbody></table>"
      },
      {
        "type": "html",
        "value": "<table><caption>mount Parameters</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>jsx</td><td>React.JSX.Element</td><td>The React component to mount.</td></tr><tr><td>options</td><td>MountOptions (optional)</td><td>The options for mounting the component</td></tr><tr><td>rerenderKey</td><td>string (optional)</td><td>A key to use to force a rerender.</td></tr></tbody></table>"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Example"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { mount } from '@cypress/react'import { Stepper } from './Stepper'it('mounts', () => {  mount(<StepperComponent />)  cy.get('[data-cy=increment]').click()  cy.get('[data-cy=counter]').should('have.text', '1')}"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "getContainerEl"
          }
        ]
      },
      {
        "type": "html",
        "value": "<table><tbody><tr><td>Description</td><td>Gets the root element used to mount the component.</td></tr><tr><td>Signature</td><td>() =&gt; HTMLElement</td></tr><tr><td>Returns</td><td>HTMLElement</td></tr></tbody></table>"
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Interfaces"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "MountOptions"
          }
        ]
      },
      {
        "type": "html",
        "value": "<table><caption>members</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>alias</td><td>string (optional)</td><td></td></tr><tr><td>ReactDom</td><td>MountReactComponentOptions.ReactDom (optional)</td><td></td></tr><tr><td>log</td><td>boolean (optional)</td><td>Log the mounting command into Cypress Command Log, true by default</td></tr><tr><td>strict</td><td>boolean (optional)</td><td><p>Render component in React <a href=\"https://reactjs.org/docs/strict-mode.html\">strict mode</a> It activates additional checks and warnings for child components.</p></td></tr></tbody></table>"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "MountReturn"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Type that the `mount` function yields"
          }
        ]
      },
      {
        "type": "html",
        "value": "<table><caption>members</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>component</td><td>React.ReactNode</td><td><p>Render component in React <a href=\"https://reactjs.org/docs/strict-mode.html\">strict mode</a> It activates additional checks and warnings for child components.</p></td></tr><tr><td>rerender</td><td><p>(component: React.ReactNode) =&gt; globalThis.Cypress.Chainable&lt;MountReturn&gt;</p></td><td>The component that was rendered.</td></tr></tbody></table>"
      }
    ]
  },
  "token_estimate": 199
}