---
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: docs/api/commands/mount.mdx
version: 6a908a532b1fca4ed18538a4c1c5a9bc7f24f403
updated_at: '2026-05-01T19:25:18.656Z'
---
# mount

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.

This guide covers how to customize the `cy.mount()` command to fit the needs of your app.

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:

*   You don't need to import the mount command into every test as the `cy.mount()` command is available globally.
*   You can set up common scenarios that you usually have to do in each test, like wrapping a component in a [React Provider](https://reactjs.org/docs/context.html) or adding [Vue plugins](https://vuejs.org/v2/guide/plugins.html).

Let's take a look at how to implement the command.

## Creating a New `cy.mount()` Command

Different frameworks render their components differently, so we provide framework-specific `mount()` functions, which can be imported like so:

*   React
*   Vue
*   Angular

**A note for React users**

The `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.

```
import { mount } from 'cypress/react'
```

**A note for Vue users**

The `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.

```
import { mount } from 'cypress/vue'
```

**A note for Angular users**

The `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.

```
import { mount } from 'cypress/angular'
```

To 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:

*   React
*   Vue
*   Angular

```
import { 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)})
```

```
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)})
```

```
import { mount } from 'cypress/angular'Cypress.Commands.add('mount', (component, config) => {  return mount(component, config)})
```

## Adding TypeScript Typings for `cy.mount()` Commands

When 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.

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:

*   React
*   Vue
*   Angular

```
import { mount } from 'cypress/react'declare global {  namespace Cypress {    interface Chainable {      mount: typeof mount    }  }}
```

```
import { mount } from 'cypress/vue'type MountParams = Parameters<typeof mount>type OptionsParam = MountParams[1]declare global {  namespace Cypress {    interface Chainable {      mount: typeof mount    }  }}
```

```
import { mount } from 'cypress/angular'declare global {  namespace Cypress {    interface Chainable {      mount: typeof mount    }  }}
```

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:

```
"include": ["./src", "cypress.d.ts"]
```

## Additional Mount Command Examples

Visit the guides for scenarios in [React](/llm/markdown/app/component-testing/react/examples.md), [Vue](/llm/markdown/app/component-testing/vue/examples.md), [Angular](/llm/markdown/app/component-testing/angular/examples.md), and [Svelte](/llm/markdown/app/component-testing/svelte/examples.md) for customizing a mount command.