Props and event testing in Cypress - Test Execution Trace

Test Overview

This test checks if a React component receives the correct props and if clicking a button triggers the expected event handler.

Test Code - Cypress

Cypress

describe('Props and event testing', () => {
  it('should render with correct props and handle click event', () => {
    const onClickSpy = cy.spy().as('clickHandler');
    cy.mount(<MyButton label="Click me" onClick={onClickSpy} />);
    cy.get('button').should('have.text', 'Click me');
    cy.get('button').click();
    cy.get('@clickHandler').should('have.been.calledOnce');
  });
});

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner is ready to execute the test	-	PASS
2	Mount the MyButton component with label prop 'Click me' and onClick event handler spy	Component is rendered in the test DOM with a button showing text 'Click me'	-	PASS
3	Find the button element	Button element with text 'Click me' is found in the DOM	Check button text equals 'Click me'	PASS
4	Click the button	Button is clicked by the test	-	PASS
5	Verify the onClick event handler spy was called once	Spy function recorded one call from the button click	Spy was called exactly once	PASS

Failure Scenario

Failing Condition: The button text does not match the 'label' prop or the onClick handler is not called on click

Execution Trace Quiz - 3 Questions

What does the test verify about the button's label?

A The button has a default label regardless of props

B The button displays the text passed as the 'label' prop

C The button label changes after clicking

D The button label is empty

Key Result

Always verify that components receive the correct props and that event handlers are triggered as expected to ensure UI behaves correctly.