Props and event testing in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are props in component testing?

Props are inputs passed to a component to control its behavior or display. They act like settings or instructions for the component.

intermediate

How do you test if a component received the correct prop value in Cypress?

You can check the component's rendered output or attributes that depend on the prop. Cypress can also spy on functions to verify prop-driven behavior.

beginner

What is an event in the context of UI testing?

An event is an action like a click, input, or submit that a user performs. Testing events means checking if the component reacts correctly to these actions.

intermediate

How can Cypress test if an event handler was called when a button is clicked?

Use cy.get() to find the button, then .click() to simulate the click. Use cy.spy() or cy.stub() to watch the event handler and assert it was called.

beginner

Why is testing props and events important in component testing?

Because props control what the component shows or does, and events are how users interact. Testing both ensures the component works as expected in real use.

In Cypress, which command simulates a user clicking a button?

A cy.click()

B cy.type()

C cy.get().click()

D cy.spy()

You first select the element with cy.get(), then call .click() to simulate the click.

What does a cy.spy() do in event testing?

A It watches if a function is called

B It replaces the event handler

C It triggers an event

D It asserts the UI state

cy.spy() watches a function to see if it was called during the test.

Which of these is a prop in component testing?

A A function passed to a component

B A browser event

C A CSS style

D A user click

Props are inputs like functions or values passed into components.

Why test events in UI components?

A To check if the UI looks correct

B To check network requests

C To measure performance

D To verify user interactions trigger expected behavior

Events represent user actions; testing them ensures the component responds properly.

Which Cypress command helps check if a prop affects the component output?

A cy.spy()

B cy.get() with assertions

C cy.stub()

D cy.visit()

cy.get() selects elements to assert their content or attributes changed by props.

Explain how you would test a button click event handler using Cypress.

Think about selecting the element, simulating the event, and verifying the response.

Describe why testing props is important and how you can verify them in Cypress tests.

Consider props as settings and how to check their effect.