Component test setup in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mount a React component for testing.

Cypress

import { mount } from 'cypress/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    [1](<MyComponent />);
  });
});

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

Asetup

Brender

Cshallow

Dmount

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' instead of 'mount' which is not imported from 'cypress/react'.

Using 'shallow' which is from other testing libraries, not Cypress.

In Cypress component testing, the 'mount' function is used to render the component in the test environment.

2fill in blank

medium

Complete the code to import the component before mounting it.

Cypress

import { mount } from 'cypress/react';
[1] MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders', () => {
    mount(<MyComponent />);
  });
});

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

Aexport

Brequire

Cimport

Dinclude

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'export' which is for sending code out, not bringing it in.

Using 'require' which is CommonJS syntax, not standard in Cypress ES modules.

To use a component in the test file, you must import it using the 'import' keyword.

3fill in blank

hard

Fix the error in the test setup by completing the missing import statement.

Cypress

import { [1] } from 'cypress/react';
import Button from './Button';

describe('Button', () => {
  it('should render', () => {
    mount(<Button />);
  });
});

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

Amount

Brender

Csetup

Dtest

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'render' which is not provided by 'cypress/react'.

Forgetting to import 'mount' causing runtime errors.

The 'mount' function must be imported from 'cypress/react' to render the component in the test.

4fill in blank

hard

Fill both blanks to correctly set up a component test with a beforeEach hook.

Cypress

import { [1] } from 'cypress/react';
import Header from './Header';

describe('Header', () => {
  beforeEach(() => {
    [2](<Header />);
  });

  it('displays title', () => {
    cy.contains('Welcome').should('be.visible');
  });
});

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

Amount

Brender

Csetup

Dinitialize

Attempts:

3 left

💡 Hint

Common Mistakes

Using different functions for import and call causing errors.

Using 'render' which is not from 'cypress/react'.

The 'mount' function is imported and used to render the component before each test.

5fill in blank

hard

Fill all three blanks to correctly import, mount, and assert a component renders a button.

Cypress

import { [1] } from 'cypress/react';
import Button from './Button';

describe('Button', () => {
  it('renders button', () => {
    [2](<Button />);
    cy.get('button').should([3]);
  });
});

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

Amount

C'be.visible'

D'exist'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' instead of 'mount' for import or call.

Using 'exist' which checks presence but not visibility.

Import and mount use 'mount', and the assertion checks the button is visible with 'be.visible'.