Why component testing isolates UI units in Cypress - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mount a React component for isolated testing.

Cypress

cy.[1](<MyComponent />);

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

Amount

Bvisit

Cget

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visit' instead of 'mount' to render a component.

Trying to use 'get' or 'click' to render components.

Use mount to render a component in isolation for testing.

2fill in blank

medium

Complete the code to stub a child component during component testing.

Cypress

cy.mount(<ParentComponent childComponent=[1] />);

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

Achild_component

BChildComponent

Cchildcomponent

DchildComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for React components.

Passing incorrect prop names to stub components.

Props and components in React are case-sensitive. The child component should be passed as ChildComponent.

3fill in blank

hard

Fix the error in the test code to isolate the UI unit correctly.

Cypress

cy.mount(<MyComponent />).[1]('.submit-button').click();

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

Aselect

Bcontains

Cget

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' which searches the entire document instead of within the component.

Using 'select' which is for dropdowns.

Use find to select elements within the mounted component in Cypress.

4fill in blank

hard

Fill both blanks to stub a network request and isolate the component from backend calls.

Cypress

cy.intercept('[1]', [2]).as('getData');

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

A/api/data

B/api/info

C{ fixture: 'data.json' }

D{ statusCode: 404 }

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong API endpoint in intercept.

Not providing a valid stub response.

Intercept the API endpoint /api/data and respond with fixture data to isolate the component.

5fill in blank

hard

Fill all three blanks to assert the component renders isolated UI text correctly.

Cypress

cy.get('[1]').should('[2]', '[3]');

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

A.title

Bcontain

CWelcome to the app

Dhave.text

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'have.text' which requires exact match.

Selecting wrong element or using wrong assertion.

Select the element with class .title, assert it contains the text Welcome to the app.