Mounting Vue components in Cypress - Build an Automation Script

Mount a simple Vue component and verify its rendered text

Preconditions (2)

Step 1: Import the HelloWorld component in the test file

Step 2: Use Cypress mount command to mount the HelloWorld component

Step 3: Check that the component renders the text 'Hello, Cypress!'

✅ Expected Result: The test should pass confirming that the HelloWorld component is mounted and displays the correct text

Automation Requirements - Cypress with @cypress/vue

Assertions Needed:

Verify the component's rendered text matches 'Hello, Cypress!'

Best Practices:

Use the mount function from @cypress/vue to mount Vue components

Use data-cy attributes or semantic selectors for locating elements

Avoid hardcoded waits; rely on Cypress automatic waits

Keep tests isolated and clean up after each test

Automated Solution

Cypress

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

describe('HelloWorld Component', () => {
  it('renders the correct greeting text', () => {
    mount(HelloWorld)
    cy.get('div').contains('Hello, Cypress!').should('be.visible')
  })
})

The test imports the mount function from @cypress/vue and the HelloWorld Vue component.

Inside the test, mount(HelloWorld) mounts the component in a virtual browser environment.

Then, cy.get('div').contains('Hello, Cypress!').should('be.visible') asserts that the component renders the expected text and is visible.

This approach uses Cypress's automatic waiting and clean syntax to keep the test simple and reliable.

Common Mistakes - 3 Pitfalls

Using hardcoded selectors like complex XPath or CSS selectors

Not importing the mount function from @cypress/vue and trying to use Cypress default commands

Using cy.wait() with fixed time instead of relying on Cypress automatic waits

Bonus Challenge

Now add data-driven testing to mount the HelloWorld component with different greeting props and verify each greeting text

Show Hint

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