{
"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": "6a908a532b1fca4ed18538a4c1c5a9bc7f24f403",
"updated_at": "2026-05-01T19:25:18.656Z",
"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
}
]
},
"content": {
"type": "root",
"children": [
{
"type": "heading",
"depth": 1,
"children": [
{
"type": "text",
"value": "mount"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Cypress does not have a built-in `cy.mount()` command. The command must be set up in your support file. By default, when you use Cypress to configure your project, one will be automatically scaffolded for you."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "This guide covers how to customize the `cy.mount()` command to fit the needs of your app."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "We recommend setting up a custom `cy.mount()` command instead of importing the mount command from the mounting libraries. Doing so offers a few advantages:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "You don't need to import the mount command into every test as the `cy.mount()` command is available globally."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "You can set up common scenarios that you usually have to do in each test, like wrapping a component in a "
},
{
"type": "link",
"title": null,
"url": "https://reactjs.org/docs/context.html",
"children": [
{
"type": "text",
"value": "React Provider"
}
]
},
{
"type": "text",
"value": " or adding "
},
{
"type": "link",
"title": null,
"url": "https://vuejs.org/v2/guide/plugins.html",
"children": [
{
"type": "text",
"value": "Vue plugins"
}
]
},
{
"type": "text",
"value": "."
}
]
}
]
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Let's take a look at how to implement the command."
}
]
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "Creating a New `cy.mount()` Command"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Different frameworks render their components differently, so we provide framework-specific `mount()` functions, which can be imported like so:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Vue"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "A note for React users"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The `mount()` command exported from the "
},
{
"type": "link",
"title": null,
"url": "https://github.com/cypress-io/cypress/tree/develop/npm/react",
"children": [
{
"type": "text",
"value": "cypress/react"
}
]
},
{
"type": "text",
"value": " module supports standard JSX syntax for mounting components."
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import { mount } from 'cypress/react'"
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "A note for Vue users"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The `mount()` command exported from the "
},
{
"type": "link",
"title": null,
"url": "https://github.com/cypress-io/cypress/tree/develop/npm/vue",
"children": [
{
"type": "text",
"value": "cypress/vue"
}
]
},
{
"type": "text",
"value": " library uses "
},
{
"type": "link",
"title": null,
"url": "https://vue-test-utils.vuejs.org/",
"children": [
{
"type": "text",
"value": "Vue Test Utils"
}
]
},
{
"type": "text",
"value": " internally, but instead of mounting your components in a virtual browser in node, it mounts them in your actual browser."
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import { mount } from 'cypress/vue'"
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "A note for Angular users"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The `mount()` command exported from the "
},
{
"type": "link",
"title": null,
"url": "https://github.com/cypress-io/cypress/tree/develop/npm/angular",
"children": [
{
"type": "text",
"value": "cypress/angular"
}
]
},
{
"type": "text",
"value": " library uses "
},
{
"type": "link",
"title": null,
"url": "https://angular.io/api/core/testing/TestBed",
"children": [
{
"type": "text",
"value": "Angular TestBed"
}
]
},
{
"type": "text",
"value": " internally, but instead of mounting your components in a virtual browser in node, it mounts them in your actual browser."
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import { mount } from 'cypress/angular'"
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "To use `cy.mount()`, add a "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/api/cypress-api/custom-commands.md",
"children": [
{
"type": "text",
"value": "custom command"
}
]
},
{
"type": "text",
"value": " to the commands file using "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/api/cypress-api/custom-commands.md",
"children": [
{
"type": "text",
"value": "`Cypress.Commands.add()`"
}
]
},
{
"type": "text",
"value": ". Below are examples to start with for your commands:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Vue"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import { mount } from 'cypress/react'Cypress.Commands.add('mount', (component, options) => { // Wrap any parent components needed // ie: return mount({component}, options) return mount(component, options)})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import { 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)})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import { mount } from 'cypress/angular'Cypress.Commands.add('mount', (component, config) => { return mount(component, config)})"
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "Adding TypeScript Typings for `cy.mount()` Commands"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "When working in "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/tooling/typescript-support.md",
"children": [
{
"type": "text",
"value": "TypeScript"
}
]
},
{
"type": "text",
"value": ", you will need to add custom typings for your commands to get code completion and to avoid any TypeScript errors."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The 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:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Vue"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import { mount } from 'cypress/react'declare global { namespace Cypress { interface Chainable { mount: typeof mount } }}"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import { mount } from 'cypress/vue'type MountParams = Parameterstype OptionsParam = MountParams[1]declare global { namespace Cypress { interface Chainable { mount: typeof mount } }}"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import { mount } from 'cypress/angular'declare global { namespace Cypress { interface Chainable { mount: typeof mount } }}"
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "If 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:"
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "\"include\": [\"./src\", \"cypress.d.ts\"]"
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "Additional Mount Command Examples"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Visit the guides for scenarios in "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/react/examples.md",
"children": [
{
"type": "text",
"value": "React"
}
]
},
{
"type": "text",
"value": ", "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/vue/examples.md",
"children": [
{
"type": "text",
"value": "Vue"
}
]
},
{
"type": "text",
"value": ", "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/angular/examples.md",
"children": [
{
"type": "text",
"value": "Angular"
}
]
},
{
"type": "text",
"value": ", and "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/svelte/examples.md",
"children": [
{
"type": "text",
"value": "Svelte"
}
]
},
{
"type": "text",
"value": " for customizing a mount command."
}
]
}
]
},
"token_estimate": 820
}