Props and event testing in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test for a button click event?

Consider this Cypress test code that checks if a button click triggers an event handler:

cy.get('button#submit').click().then(() => {
  cy.get('@clickHandler').should('have.been.calledOnce')
})

Assuming the alias @clickHandler is correctly set for the click event, what will be the test result?

Cypress

cy.get('button#submit').click().then(() => {
  cy.get('@clickHandler').should('have.been.calledOnce')
})

A Test fails because the click event handler was never called

B Test passes because the click event handler was called exactly once

C Test fails with a syntax error due to incorrect alias usage

D Test passes but the event handler was called multiple times

💡 Hint

Think about what should('have.been.calledOnce') checks after the click.

The test checks that the click event handler alias @clickHandler was called exactly once after clicking the button. If the alias is set correctly, the test passes.

❓ locator

intermediate

Which locator is best to select a React component by its prop for testing?

You want to select a React component in Cypress by a custom prop data-test-id="login-button". Which locator is best practice?

A cy.get('button[data-test-id="login-button"]')

B cy.get('button#login-button')

C cy.get('button.login-button')

D cy.get('button').contains('Login')

💡 Hint

Use attributes designed for testing to avoid brittle selectors.

Using a custom attribute like data-test-id is best practice because it is stable and does not depend on styling or text content.

❓ assertion

advanced

Which assertion correctly verifies a prop value in a Vue component using Cypress?

You want to check that a Vue component has a prop visible set to true. Which assertion is correct?

Cypress

cy.get('my-component').should( /* assertion here */ )

A have.attr('visible', 'true')

B have.class('visible')

C have.prop('visible', true)

D contain('visible: true')

💡 Hint

Props are JavaScript properties, not HTML attributes or classes.

The have.prop assertion checks the JavaScript property visible on the component instance, which is the correct way to verify a prop value.

🔧 Debug

advanced

Why does this Cypress test fail to detect the emitted event?

Given this test code:

cy.get('child-component').invoke('trigger', 'customEvent')
cy.get('@eventSpy').should('have.been.called')

The test fails because @eventSpy is never called. What is the likely cause?

A The event spy was not attached to the component before triggering the event

B The event name <code>customEvent</code> is misspelled in the trigger

C The component does not emit events in Cypress tests

D The trigger method cannot simulate custom events

💡 Hint

Check when the spy is attached relative to the event trigger.

If the spy is attached after the event is triggered, it will never detect the event. The spy must be set up before triggering the event.

❓ framework

expert

In Cypress, how do you best test a component's prop change triggers an event?

You want to test that changing a prop isActive on a component triggers an event statusChanged. Which approach is best?

A Use <code>cy.get</code> to find the component, then call <code>.trigger('statusChanged')</code> manually

B Mount the component and assert the event was emitted without changing the prop

C Mount the component, update the prop directly in the DOM, then check for the event

D Mount the component with <code>isActive</code>, attach an event spy, then update the prop using <code>cy.wrap</code> and check the spy

💡 Hint

Think about how to simulate prop changes and listen for events in component tests.

Mounting the component with initial props, attaching an event spy, then updating the prop programmatically allows testing if the event is emitted on prop change.