Mounting Vue components in Cypress

Introduction

Mounting Vue components lets you test them in isolation. It helps you check if they work as expected before using them in your app.

You want to test a button component to see if it reacts to clicks.

You need to check if a form component shows error messages correctly.

You want to verify that a list component renders items properly.

You want to test a component's behavior when props change.

You want to catch bugs early by testing small parts of your app.

Syntax

Cypress

import { mount } from '@cypress/vue'
import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
  it('renders properly', () => {
    mount(MyComponent, {
      props: { /* optional props here */ },
      slots: { /* optional slots here */ },
      global: { /* optional global config */ }
    })
    // add assertions here
  })
})

Use mount() to render the Vue component inside Cypress.

You can pass props, slots, and global config to customize the component during testing.

Examples

Mounts a simple button component without props or slots.

Cypress

mount(MyButton)

Mounts the button with a label prop to test dynamic text.

Cypress

mount(MyButton, { props: { label: 'Click me' } })

Mounts a list component with slot content to test rendering of children.

Cypress

mount(MyList, { slots: { default: '<li>Item 1</li><li>Item 2</li>' } })

Sample Program

This test mounts the HelloWorld component with a message prop. It then checks if the heading shows the correct text.

Cypress

import { mount } from '@cypress/vue'
import HelloWorld from './HelloWorld.vue'

describe('HelloWorld Component', () => {
  it('shows greeting message', () => {
    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
    cy.get('h1').should('contain.text', 'Hello Cypress')
  })
})

Important Notes

Always use semantic selectors like cy.get('h1') or data attributes for stable tests.

Mounting components isolates them, so you can test without interference from other parts of your app.

Use Cypress DevTools to inspect mounted components during test runs.

Summary

Mount Vue components in Cypress to test them alone.

Pass props and slots to customize the component during tests.

Use assertions to check if the component behaves as expected.