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.

Practice

1. What is the main purpose of mounting a Vue component in Cypress tests?

easy

A. To deploy the component to production

B. To create a new Vue component from scratch

C. To write CSS styles for the component

D. To test the component in isolation without the full app

Solution

1. Step 1: Understand mounting in testing context

   Mounting means loading a component alone to test its behavior without other app parts.

2. Step 2: Identify the purpose of mounting in Cypress

   Cypress mounts Vue components to isolate and test them independently.

3. Final Answer:

   To test the component in isolation without the full app -> Option D

4. Quick Check:

   Mounting = isolated component test [OK]

Hint: Mount means test component alone, not full app [OK]

Common Mistakes:

• Confusing mounting with deployment
• Thinking mounting creates components
• Mixing mounting with styling

2. Which of the following is the correct syntax to mount a Vue component named MyButton in Cypress?

easy

A. cy.mount(MyButton)

B. mount.cy(MyButton)

C. cy.component(MyButton)

D. mountComponent(MyButton)

Solution

1. Step 1: Recall Cypress Vue mounting syntax

   The official Cypress command to mount Vue components is cy.mount().

2. Step 2: Check each option's syntax

   Only cy.mount(MyButton) matches the correct Cypress syntax.

3. Final Answer:

   cy.mount(MyButton) -> Option A

4. Quick Check:

   Correct mount syntax = cy.mount() [OK]

Hint: Use cy.mount() to mount Vue components in Cypress [OK]

Common Mistakes:

• Swapping method and object order
• Using non-existent commands like cy.component
• Confusing mount with other Cypress commands

3. Given this test code, what will the assertion check?

cy.mount(MyButton, { props: { label: 'Click me' } })
cy.get('button').should('contain.text', 'Click me')

medium

A. The button contains the text 'Click me'

B. The button is disabled

C. The button has no text

D. The button has a CSS class named 'Click me'

Solution

1. Step 1: Understand the mounted component props

   The component is mounted with a prop label set to 'Click me'.

2. Step 2: Analyze the assertion

   The test checks if the button element contains the text 'Click me'.

3. Final Answer:

   The button contains the text 'Click me' -> Option A

4. Quick Check:

   Prop label sets button text = 'Click me' [OK]

Hint: Props set text, assertion checks button text content [OK]

Common Mistakes:

• Confusing text content with CSS classes
• Assuming button is disabled without code
• Ignoring the prop passed to component

4. Identify the error in this Cypress test code for mounting a Vue component:

cy.mount(MyButton, { props: { label: Click me } })
cy.get('button').should('contain.text', 'Click me')

medium

A. The assertion uses wrong method should('text')

B. The prop value Click me is not quoted as a string

C. The selector 'button' is invalid

D. The mount command is missing parentheses

Solution

1. Step 1: Check prop syntax

   The prop value Click me is missing quotes, so it's treated as an undefined variable.

2. Step 2: Verify other parts

   Mount syntax and selector are correct; assertion method is valid.

3. Final Answer:

   The prop value Click me is not quoted as a string -> Option B

4. Quick Check:

   Prop strings must be quoted [OK]

Hint: Always quote string prop values in mount options [OK]

Common Mistakes:

• Forgetting quotes around string props
• Misusing assertion methods
• Using invalid selectors

5. You want to test a Vue component AlertBox that accepts a slot for custom message content. Which is the correct way to mount it with a slot containing <p>Warning!</p> in Cypress?

hard

A. cy.mount(AlertBox, { slot: 'Warning!' })

B. cy.mount(AlertBox, { props: { default: 'Warning!' } })

C. cy.mount(AlertBox, { slots: { default: 'Warning!' } })

D. cy.mount(AlertBox, { children: 'Warning!' })

Solution

1. Step 1: Understand slot passing in Cypress mount

   Slots are passed using the slots option with keys for slot names.

2. Step 2: Check each option

   Only cy.mount(AlertBox, { slots: { default: '

   Warning!

   ' } }) correctly uses slots: { default: '

   Warning!

   ' } syntax.

3. Final Answer:

   cy.mount(AlertBox, { slots: { default: '<p>Warning!</p>' } }) -> Option C

4. Quick Check:

   Slots passed via slots object [OK]

Hint: Use slots: { default: '<html>' } to pass slot content [OK]

Common Mistakes:

• Passing slot content as props
• Using wrong option names like slot or children
• Not wrapping slot content in slots object