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