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'.

Practice

1. What is the main purpose of using mount() in Cypress component testing?

easy

A. To write unit tests for backend APIs

B. To run end-to-end tests on the whole application

C. To load a component inside Cypress for testing

D. To deploy the application to a server

Solution

1. Step 1: Understand the role of mount()

   mount() is used to load a UI component inside Cypress so you can test it in isolation.

2. Step 2: Differentiate from other test types

   End-to-end tests run the whole app, but mount() focuses on small parts (components).

3. Final Answer:

   To load a component inside Cypress for testing -> Option C

4. Quick Check:

   mount() loads component [OK]

Hint: Remember: mount() loads components, not full apps [OK]

Common Mistakes:

• Confusing mount() with full app testing
• Thinking mount() deploys code
• Mixing component and API testing

2. Which of the following is the correct syntax to prepare a component before each test in Cypress?

easy

A. beforeEach(() => { mount() })

B. beforeAll(() => { mount() })

C. afterEach(() => { mount() })

D. before(() => { mount() })

Solution

1. Step 1: Identify the correct hook for setup before each test

   beforeEach() runs before every test, ideal for fresh component setup.

2. Step 2: Confirm syntax correctness

   The syntax beforeEach(() => { mount(<MyComponent />) }) correctly mounts the component before each test.

3. Final Answer:

   beforeEach(() => { mount(<MyComponent />) }) -> Option A

4. Quick Check:

   Use beforeEach() for setup [OK]

Hint: Use beforeEach() to reset component before every test [OK]

Common Mistakes:

• Using beforeAll() which runs only once
• Using afterEach() which runs after tests
• Using before() which is deprecated in Cypress

3. Given this Cypress component test code, what will be the output in the test runner?

describe('Button component', () => {
  beforeEach(() => {
    mount(Click me)
  })

  it('checks button text', () => {
    cy.get('button').should('have.text', 'Click me')
  })
})

medium

A. Test passes because button text matches

B. Test fails because button text is missing

C. Test errors due to wrong selector syntax

D. Test is skipped because mount() is missing

Solution

1. Step 1: Analyze the mount and selector

   The mount() loads a button with text 'Click me'. The selector cy.get('button') correctly targets it.

2. Step 2: Check the assertion

   The assertion should('have.text', 'Click me') matches the button's text exactly, so it passes.

3. Final Answer:

   Test passes because button text matches -> Option A

4. Quick Check:

   Correct selector and text = pass [OK]

Hint: Match selector text exactly for passing assertion [OK]

Common Mistakes:

• Using wrong selector causing no element found
• Mismatching text in assertion
• Forgetting to mount component before test

4. Identify the error in this Cypress component test setup:

describe('Input component', () => {
  beforeEach(() => {
    mount('')
  })

  it('checks placeholder', () => {
    cy.get('input').should('have.attr', 'placeholder', 'Enter name')
  })
})

medium

A. beforeEach() should be replaced with afterEach()

B. mount() should receive JSX, not a string

C. cy.get() selector is incorrect

D. The placeholder attribute is misspelled

Solution

1. Step 1: Check the argument passed to mount()

   The code passes a string '<input placeholder="Enter name" />' instead of JSX element. mount() expects JSX, not a string.

2. Step 2: Confirm other parts are correct

   The selector cy.get('input') and attribute check are correct, so no error there.

3. Final Answer:

   mount() should receive JSX, not a string -> Option B

4. Quick Check:

   mount() needs JSX, not string [OK]

Hint: Pass JSX, not strings, to mount() [OK]

Common Mistakes:

• Passing HTML strings instead of JSX to mount()
• Confusing beforeEach() with afterEach()
• Using wrong selectors

5. You want to test a component that renders a list of items passed as props. Which setup correctly mounts the component with props before each test?

hard

A. beforeEach(() => { mount() })

B. beforeEach(() => { mount('') })

C. beforeEach(() => { mount(List, { props: { items: ["a", "b"] } }) })

D. beforeEach(() => { mount() })

Solution

1. Step 1: Understand correct JSX with props

   Passing props in JSX uses syntax like <List items={["a", "b"]} />. This is correct in beforeEach(() => { mount(<List items={["a", "b"]} />) }).

2. Step 2: Identify incorrect options

   beforeEach(() => { mount('<List items=["a", "b"] />') }) passes a string, not JSX. beforeEach(() => { mount(List, { props: { items: ["a", "b"] } }) }) uses wrong mount signature. beforeEach(() => { mount(<List items="a,b" />) }) passes a string instead of array.

3. Final Answer:

   beforeEach(() => { mount(<List items={["a", "b"]} />) }) -> Option D

4. Quick Check:

   Use JSX with array props [OK]

Hint: Pass props as JSX arrays, not strings [OK]

Common Mistakes:

• Passing component as string instead of JSX
• Using wrong mount function signature
• Passing props as comma-separated string