Props and event testing in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mount a React component with a prop.

Cypress

cy.mount(<MyComponent [1]="testValue" />);

Drag options to blanks, or click blank then click option'

Astyle

BonClick

CpropName

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using event handler names like 'onClick' instead of a prop name.

Passing children instead of a prop attribute.

The prop name must be specified to pass a value to the component. 'propName' is a placeholder for the actual prop key.

2fill in blank

medium

Complete the code to spy on a click event handler.

Cypress

const clickSpy = cy.spy();
cy.mount(<Button onClick=[1] />);

Drag options to blanks, or click blank then click option'

Acy.click

BclickSpy

ChandleClick

DspyClick

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a function name that is not defined.

Using Cypress commands like cy.click instead of the spy.

You must pass the spy function as the onClick prop to track clicks.

3fill in blank

hard

Fix the error in the assertion to check if the click handler was called once.

Cypress

cy.get('button').click();
expect([1]).to.have.been.calledOnce;

Drag options to blanks, or click blank then click option'

AclickSpy

BhandleClick

Ccy.click

DspyClick

Attempts:

3 left

💡 Hint

Common Mistakes

Using Cypress commands like cy.click in the assertion.

Using undefined variable names.

The spy variable 'clickSpy' tracks the calls and is used in the assertion.

4fill in blank

hard

Fill both blanks to test if a prop value is rendered and an event is triggered.

Cypress

cy.mount(<MyButton label=[1] onClick=[2] />);
cy.get('button').should('contain', 'Submit').click();

Drag options to blanks, or click blank then click option'

A"Submit"

BclickSpy

C"Cancel"

DhandleClick

Attempts:

3 left

💡 Hint

Common Mistakes

Using a label that does not match the button text.

Passing an undefined function as onClick.

The label prop should be 'Submit' to match the button text, and the clickSpy tracks the click event.

5fill in blank

hard

Fill all three blanks to mount a component, simulate a click, and assert the event was called.

Cypress

const [1] = cy.spy();
cy.mount(<Clickable label="Click me" onClick=[2] />);
cy.get('button').click();
expect([3]).to.have.been.called;

Drag options to blanks, or click blank then click option'

AclickSpy

DhandleClick

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for the spy.

Not passing the spy as the onClick prop.

The spy variable 'clickSpy' is created, passed as onClick, and asserted for call count.

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