Mounting Vue components in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of mounting a Vue component with props

What will be the text content of the mounted component after this Cypress test runs?

Cypress

import { mount } from 'cypress/vue'
import { defineComponent, h } from 'vue'

const Hello = defineComponent({
  props: ['name'],
  setup(props) {
    return () => h('div', `Hello, ${props.name}!`)
  }
})

describe('Hello component', () => {
  it('renders greeting with prop', () => {
    mount(Hello, { props: { name: 'Alice' } })
    cy.get('div').invoke('text').as('greeting')
    cy.get('@greeting').should('equal', 'Hello, Alice!')
  })
})

A "Hello, name!"

B "Hello, Alice!"

C "Hello, undefined!"

D "Hello!"

💡 Hint

Check how the prop 'name' is passed and used inside the component.

The component receives the prop 'name' with value 'Alice' and renders it inside the div. So the text content is exactly 'Hello, Alice!'.

❓ assertion

intermediate

Correct assertion to check emitted event after mount

Which assertion correctly verifies that the 'submit' event was emitted once after clicking the button in this mounted Vue component?

Cypress

import { mount } from 'cypress/vue'
import { defineComponent, h } from 'vue'

const SubmitButton = defineComponent({
  emits: ['submit'],
  setup(_, { emit }) {
    return () => h('button', { onClick: () => emit('submit') }, 'Send')
  }
})

describe('SubmitButton', () => {
  it('emits submit event on click', () => {
    const wrapper = mount(SubmitButton)
    cy.get('button').click()
    // Which assertion is correct here?
  })
})

A cy.get('button').should('emit', 'submit')

B expect(wrapper.emitted('submit')).to.have.lengthOf(1)

C cy.wrap(wrapper.emitted()).should('have.property', 'submit').and('have.length', 1)

D cy.wrap(wrapper.emitted('submit')).should('have.length', 1)

💡 Hint

Remember how to access emitted events from the wrapper and assert with Cypress.

The emitted events are accessed by wrapper.emitted('submit'), which returns an array of event calls. Wrapping it with cy.wrap allows Cypress assertions. Option D correctly asserts the length is 1.

❓ locator

advanced

Best locator for accessible button in mounted Vue component

Given a mounted Vue component with a button labeled 'Submit Form', which Cypress locator is best practice to select the button for testing?

Cypress

import { mount } from 'cypress/vue'
import { defineComponent, h } from 'vue'

const FormButton = defineComponent({
  setup() {
    return () => h('button', { 'aria-label': 'Submit Form' }, 'Submit')
  }
})

describe('FormButton', () => {
  it('clicks the submit button', () => {
    mount(FormButton)
    // Which locator is best here?
  })
})

A cy.get('button[aria-label="Submit Form"]')

B cy.contains('button', 'Submit')

C cy.get('button').first()

D cy.get('button').eq(0)

💡 Hint

Consider accessibility and stable selectors for testing.

Using the aria-label attribute is best practice for accessibility and stable selectors. Option A uses this attribute directly, making tests more robust and accessible.

🔧 Debug

advanced

Identify the cause of test failure when mounting Vue component

This Cypress test fails with error: "TypeError: Cannot read property 'value' of undefined". What is the most likely cause?

Cypress

import { mount } from 'cypress/vue'
import { defineComponent, ref } from 'vue'

const Counter = defineComponent({
  setup() {
    const count = ref(0)
    function increment() {
      count.value++
    }
    return { count, increment }
  },
  template: `<button @click="increment">Count: {{ count }}</button>`
})

describe('Counter', () => {
  it('increments count on click', () => {
    mount(Counter)
    cy.get('button').click()
    cy.get('button').should('contain.text', 'Count: 1')
  })
})

A The test runs before the component is fully mounted, causing 'count.value' to be undefined.

B The 'count' ref is not properly returned from setup, so 'count.value' is undefined.

C The component's template is a string but mount requires a render function or SFC.

D The template syntax is invalid in this context; Vue 3 requires defineComponent with render function.

💡 Hint

Check how Vue components are mounted in Cypress with templates.

Cypress Vue mount expects either a render function or a Single File Component (SFC). Passing a template string directly causes the component not to compile properly, leading to undefined refs.

❓ framework

expert

Correct Cypress command sequence to mount and test a Vue component with async setup

You have a Vue component with an async setup function that fetches data before rendering. Which Cypress test sequence correctly waits for the component to mount and verifies the rendered text?

Cypress

import { mount } from 'cypress/vue'
import { defineComponent, ref, onMounted } from 'vue'

const AsyncComponent = defineComponent({
  setup() {
    const message = ref('Loading...')
    onMounted(async () => {
      await new Promise(r => setTimeout(r, 100))
      message.value = 'Data loaded'
    })
    return { message }
  },
  template: `<div>{{ message }}</div>`
})

describe('AsyncComponent', () => {
  it('shows loaded message after async setup', () => {
    // Which sequence is correct?
  })
})

A

mount(AsyncComponent)
cy.wait(150)
cy.contains('Data loaded').should('exist')

B

mount(AsyncComponent)
cy.get('div').should('contain.text', 'Loading...')
cy.get('div').should('contain.text', 'Data loaded')

C

mount(AsyncComponent)
cy.get('div').should('have.text', 'Data loaded')

D

mount(AsyncComponent)
cy.contains('Data loaded').should('exist')

💡 Hint

Async setup requires waiting for the promise to resolve before asserting final state.

Because the component updates its message after an async delay, the test must wait enough time before checking the final text. Option A waits 150ms (more than 100ms delay) before asserting, ensuring the message is updated.