You want to test a Vue component that emits an event when a button is clicked. Which approach correctly mounts the component and listens for the event in Cypress?

hard📝 framework Q8 of 15

Cypress - Component Testing

Acy.mount(MyComponent, { on: { submit: cy.stub().as('submitSpy') } })

Bcy.mount(MyComponent).then(({ component }) => { component.$on('submit', cy.stub().as('submitSpy')) })

Ccy.mount(MyComponent, { listeners: { submit: cy.stub().as('submitSpy') } })

Dcy.mount(MyComponent).invoke('on', 'submit', cy.stub().as('submitSpy'))

Step-by-Step Solution

Solution:

Step 1: Understand event listening in mounted Vue components
After mounting, you can access the Vue component instance and attach event listeners using $on.
Step 2: Evaluate options
Only cy.mount(MyComponent).then(({ component }) => { component.$on('submit', cy.stub().as('submitSpy')) }) correctly uses then to get the component instance and attach a stub listener with $on. Other options use invalid keys or methods.
Final Answer:
cy.mount(MyComponent).then(({ component }) => { component.$on('submit', cy.stub().as('submitSpy')) }) -> Option B
Quick Check:
Use component.$on after mount to listen events [OK]

Quick Trick: Access component instance with then() and use $on for events [OK]

Common Mistakes:

Passing event listeners as mount options
Using invalid keys like 'on' or 'listeners'
Trying to invoke 'on' directly on cy.mount()

Master "Component Testing" in Cypress

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Trace Try Challenge Automate Recall Frame

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions

More Cypress Quizzes

You want to test a Vue component that emits an event when a button is clicked. Which approach correctly mounts the component and listens for the event in Cypress?

Step 1: Understand event listening in mounted Vue components

Step 2: Evaluate options

Final Answer:

Quick Check:

Want More Practice?