Skip to main content

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:

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'

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

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:

import { mount } from 'cypress/react'

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.