{
  "doc": {
    "id": "api/commands/mount",
    "title": "mount | Cypress Documentation",
    "description": "Set up a mount command in your support file for Cypress Component Testing",
    "section": "api",
    "source_path": "/llm/markdown/api/commands/mount.md",
    "version": "48b03b5502f7aea1d0454750cce208f775403542",
    "updated_at": "2026-05-20T19:00:20.270Z",
    "headings": [
      {
        "id": "api/commands/mount#mount",
        "text": "mount",
        "level": 1
      },
      {
        "id": "api/commands/mount#creating-a-new-cy-mount-command",
        "text": "Creating a New cy.mount() Command",
        "level": 2
      },
      {
        "id": "api/commands/mount#adding-typescript-typings-for-cy-mount-commands",
        "text": "Adding TypeScript Typings for cy.mount() Commands",
        "level": 2
      },
      {
        "id": "api/commands/mount#additional-mount-command-examples",
        "text": "Additional Mount Command Examples",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "api/commands/mount#creating-a-new-cy-mount-command",
      "doc_id": "api/commands/mount",
      "heading": "Creating a New cy.mount() Command",
      "heading_level": 2,
      "content_markdown": "## Creating a New `cy.mount()` Command\n\nDifferent frameworks render their components differently, so we provide framework-specific `mount()` functions, which can be imported like so:\n\n*   React\n*   Vue\n*   Angular\n\n**A note for React users**\n\nThe `mount()` command exported from the [cypress/react](https://github.com/cypress-io/cypress/tree/develop/npm/react) module supports standard JSX syntax for mounting components.\n\n```\nimport { mount } from 'cypress/react'\n```\n\n**A note for Vue users**\n\nThe `mount()` command exported from the [cypress/vue](https://github.com/cypress-io/cypress/tree/develop/npm/vue) library uses [Vue Test Utils](https://vue-test-utils.vuejs.org/) internally, but instead of mounting your components in a virtual browser in node, it mounts them in your actual browser.\n\n```\nimport { mount } from 'cypress/vue'\n```\n\n**A note for Angular users**\n\nThe `mount()` command exported from the [cypress/angular](https://github.com/cypress-io/cypress/tree/develop/npm/angular) library uses [Angular TestBed](https://angular.io/api/core/testing/TestBed) internally, but instead of mounting your components in a virtual browser in node, it mounts them in your actual browser.\n\n```\nimport { mount } from 'cypress/angular'\n```\n\nTo use `cy.mount()`, add a [custom command](/llm/markdown/api/cypress-api/custom-commands.md) to the commands file using [`Cypress.Commands.add()`](/llm/markdown/api/cypress-api/custom-commands.md). Below are examples to start with for your commands:\n\n*   React\n*   Vue\n*   Angular\n\n```\nimport { mount } from 'cypress/react'Cypress.Commands.add('mount', (component, options) => {  // Wrap any parent components needed  // ie: return mount(<MyProvider>{component}</MyProvider>, options)  return mount(component, options)})\n```\n\n```\nimport { mount } from 'cypress/vue'Cypress.Commands.add('mount', (component, options = {}) => {  // Setup options object  options.global = options.global || {}  options.global.stubs = options.global.stubs || {}  options.global.stubs['transition'] = false  options.global.components = options.global.components || {}  options.global.plugins = options.global.plugins || []  /* Add any global plugins */  // options.global.plugins.push({  //   install(app) {  //     app.use(MyPlugin);  //   },  // });  /* Add any global components */  // options.global.components['Button'] = Button;  return mount(component, options)})\n```\n\n```\nimport { mount } from 'cypress/angular'Cypress.Commands.add('mount', (component, config) => {  return mount(component, config)})\n```\n",
      "section": "api",
      "anchors": [
        "creating-a-new-cy-mount-command"
      ],
      "path": "/llm/json/chunked/api/commands/mount.json",
      "token_estimate": 383
    },
    {
      "id": "api/commands/mount#adding-typescript-typings-for-cy-mount-commands",
      "doc_id": "api/commands/mount",
      "heading": "Adding TypeScript Typings for cy.mount() Commands",
      "heading_level": 2,
      "content_markdown": "## Adding TypeScript Typings for `cy.mount()` Commands\n\nWhen working in [TypeScript](/llm/markdown/app/tooling/typescript-support.md), you will need to add custom typings for your commands to get code completion and to avoid any TypeScript errors.\n\nThe typings need to be in a location that any code can access, therefore, we recommend creating a `cypress.d.ts` file in the root directory, and use this example as a starting point for customizing your own command:\n\n*   React\n*   Vue\n*   Angular\n\n```\nimport { mount } from 'cypress/react'declare global {  namespace Cypress {    interface Chainable {      mount: typeof mount    }  }}\n```\n\n```\nimport { mount } from 'cypress/vue'type MountParams = Parameters<typeof mount>type OptionsParam = MountParams[1]declare global {  namespace Cypress {    interface Chainable {      mount: typeof mount    }  }}\n```\n\n```\nimport { mount } from 'cypress/angular'declare global {  namespace Cypress {    interface Chainable {      mount: typeof mount    }  }}\n```\n\nIf your tests have trouble finding the types for the custom commands, manually include the `cypress.d.ts` file in all your `tsconfig.json` files like so:\n\n```\n\"include\": [\"./src\", \"cypress.d.ts\"]\n```\n",
      "section": "api",
      "anchors": [
        "adding-typescript-typings-for-cy-mount-commands"
      ],
      "path": "/llm/json/chunked/api/commands/mount.json",
      "token_estimate": 231
    }
  ]
}