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.

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