mount

Component Only

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 or adding Vue plugins.

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

info

A note for React users

The mount() command exported from the cypress/react module supports standard JSX syntax for mounting components.

// React 18
import { mount } from 'cypress/react18'

// React 16, 17
import { mount } from 'cypress/react'

Vue

info

A note for Vue users

The mount() command exported from the cypress/vue library uses Vue Test Utils internally, but instead of mounting your components in a virtual browser in node, it mounts them in your actual browser.

// For Vue 3
import { mount } from 'cypress/vue'

// For Vue 2
import { mount } from 'cypress/vue2'

Angular

info

A note for Angular users

The mount() command exported from the cypress/angular library uses Angular 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 to the commands file using Cypress.Commands.add(). Below are examples to start with for your commands:

React

// React 18
import { mount } from 'cypress/react18'

// React 16, 17
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)
})

Vue 2

import { mount } from 'cypress/vue2'

Cypress.Commands.add('mount', (component, options = {}) => {
  // Setup options object
  options.extensions = options.extensions || {}
  options.extensions.plugins = options.extensions.plugins || []
  options.extensions.components = options.extensions.components || {}

  /* Add any global plugins */
  // options.extensions.plugins.push({
  //   install(app) {
  //     app.use(MyPlugin);
  //   },
  // });

  /* Add any global components */
  // options.extensions.components['Button'] = Button;

  return mount(component, options)
})

Vue 3

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

Angular

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, 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

import { mount } from 'cypress/react'

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Vue

import { mount } from 'cypress/vue'

type MountParams = Parameters<typeof mount>
type OptionsParam = MountParams[1]

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Angular

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, Vue, Angular, and Svelte for customizing a mount command.