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.