Props and event testing in Cypress - Build an Automation Script

Verify component renders with correct props and handles click event

Preconditions (2)

Step 1: Mount the 'Button' component with the prop label='Submit'

Step 2: Check that the button text is 'Submit'

Step 3: Click the button

Step 4: Verify that the click event handler is called once

✅ Expected Result: The button displays the label 'Submit' and the click event handler is triggered exactly once when clicked

Automation Requirements - Cypress with @cypress/react

Assertions Needed:

Verify button text matches the label prop

Verify click event handler is called once on click

Best Practices:

Use cy.mount() to mount React components

Use data-cy attributes or semantic selectors for locating elements

Use Cypress spies to verify event handler calls

Avoid hardcoded waits; use Cypress commands chaining

Automated Solution

Cypress

import React from 'react';
import { mount } from '@cypress/react';
import Button from '../../src/components/Button';

describe('Button component props and event testing', () => {
  it('renders with correct label and handles click event', () => {
    const onClickSpy = cy.spy().as('onClickSpy');

    mount(<Button label="Submit" onClick={onClickSpy} />);

    cy.get('button').should('have.text', 'Submit');

    cy.get('button').click();

    cy.get('@onClickSpy').should('have.been.calledOnce');
  });
});

The test imports React and the mount function from Cypress React plugin to render the Button component.

We create a spy function onClickSpy to track clicks on the button.

The Button is mounted with the label prop set to 'Submit' and the onClick prop set to the spy.

We assert the button's text matches the label prop.

Then we simulate a click on the button and verify the spy was called exactly once.

This ensures the component renders props correctly and handles events as expected.

Common Mistakes - 3 Pitfalls

{'mistake': "Using generic selectors like 'button' without data attributes", 'why_bad': 'It can select multiple buttons or wrong elements, making tests flaky', 'correct_approach': "Add data-cy attributes to the button and select with cy.get('[data-cy=submit-button]')"}

Not using spies to verify event handlers

Hardcoding waits like cy.wait(1000)

Bonus Challenge

Now add data-driven testing with 3 different label props and verify each renders correctly and triggers click event

Show Hint

Practice

1. What is the main purpose of props testing in Cypress component tests?

easy

A. To verify that components receive and display data correctly

B. To check if the component's CSS styles are applied

C. To test if the component renders without errors

D. To measure the performance of component rendering

Solution

1. Step 1: Understand what props are

   Props are data passed to components to control their behavior or display.

2. Step 2: Identify the goal of props testing

   Props testing ensures the component uses and shows this data correctly.

3. Final Answer:

   To verify that components receive and display data correctly -> Option A

4. Quick Check:

   Props testing = verify data usage [OK]

Hint: Props testing checks data passed to components [OK]

Common Mistakes:

• Confusing props testing with style or performance testing
• Thinking props testing checks event handlers
• Assuming props testing is about rendering errors

2. Which Cypress command is used to spy on an event handler function passed as a prop?

easy

A. cy.spy()

B. cy.stub()

C. cy.mount()

D. cy.visit()

Solution

1. Step 1: Recall Cypress commands for spying

   cy.spy() creates a spy to watch function calls without changing behavior.

2. Step 2: Match command to event handler spying

   Spying on event handlers uses cy.spy() to check if they were called.

3. Final Answer:

   cy.spy() -> Option A

4. Quick Check:

   Spy event handler = cy.spy() [OK]

Hint: Use cy.spy() to watch function calls [OK]

Common Mistakes:

• Using cy.stub() which replaces function behavior
• Confusing cy.mount() with spying
• Using cy.visit() which is for page navigation

3. Given this Cypress test snippet:

const onClick = cy.spy();
cy.mount();
cy.get('button').click();
expect(onClick).to.have.been.calledOnce();

What will be the test result?

medium

A. Test passes because the click triggers onClick once

B. Test passes but onClick is called multiple times

C. Test fails because onClick is never called

D. Test fails due to syntax error in expect statement

Solution

1. Step 1: Analyze the spy and mount setup

   onClick is a spy passed as prop; Button is mounted with it.

2. Step 2: Check the assertion syntax

   The assertion uses calledOnce() which is incorrect syntax; it should be calledOnce without parentheses.

3. Final Answer:

   Test fails due to syntax error in expect statement -> Option D

4. Quick Check:

   calledOnce() is invalid syntax [OK]

Hint: Use calledOnce without () in assertions [OK]

Common Mistakes:

• Adding parentheses after calledOnce
• Assuming spy is not called when it is
• Ignoring syntax errors in assertions

4. You wrote this Cypress test to check a button click event:

const onClick = cy.spy();
cy.mount();
cy.get('button').click();
expect(onClick).to.have.been.called();

The test fails. What is the likely problem?

medium

A. The spy was not created correctly with cy.spy()

B. The event handler prop name is wrong

C. The assertion incorrectly uses parentheses after called

D. The button selector is incorrect

Solution

1. Step 1: Check spy creation and usage

   Spy is created correctly with cy.spy() and passed as prop.

2. Step 2: Review assertion syntax

   called is a property, not a function, so no parentheses should be used; parentheses cause failure.

3. Final Answer:

   The assertion incorrectly uses parentheses after called -> Option C

4. Quick Check:

   called is property, no () [OK]

Hint: Don't add () after called in assertions [OK]

Common Mistakes:

• Using called() instead of called
• Incorrect selector causing no click
• Wrong prop name like onClickHandler

5. You want to test a component that receives a disabled prop and an onSubmit event handler prop. Which Cypress test approach correctly verifies that clicking the submit button calls onSubmit only when disabled is false?

hard

A. Mount component with disabled=true and spy on onSubmit; click button and assert spy called once; then mount with disabled=false and assert spy not called

B. Mount component with disabled=false and spy on onSubmit; click button and assert spy called once; then mount with disabled=true and assert spy not called on click

C. Mount component once with disabled=false and spy on onSubmit; click button twice and assert spy called twice regardless of disabled prop

D. Mount component with disabled=false without spy; click button and check UI changes only

Solution

1. Step 1: Test enabled state with spy

   Mount with disabled=false, spy on onSubmit, click button, expect spy called once.

2. Step 2: Test disabled state with spy

   Mount with disabled=true, click button, expect spy not called to confirm no event triggered.

3. Final Answer:

   Mount component with disabled=false and spy on onSubmit; click button and assert spy called once; then mount with disabled=true and assert spy not called on click -> Option B

4. Quick Check:

   Test both states with spy to confirm event firing [OK]

Hint: Test enabled and disabled states separately with spy [OK]

Common Mistakes:

• Testing only one disabled state
• Not using spy to check event calls
• Assuming event fires regardless of disabled prop