Mounting React components in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Mounting a Simple React Component

What will be the output in the Cypress test runner when this React component is mounted and checked for text content?

Cypress

import React from 'react';
import { mount } from 'cypress/react';

function Greeting() {
  return <h1>Hello, Cypress!</h1>;
}

describe('Greeting component', () => {
  it('renders correct text', () => {
    mount(<Greeting />);
    cy.contains('Hello, Cypress!').should('exist');
  });
});

A Test passes because the text 'Hello, Cypress!' is found in the mounted component.

B Test fails because the component does not render any text.

C Test fails with a syntax error due to missing import of React.

D Test fails because cy.contains cannot find the text 'Hello, World!'.

💡 Hint

Check what text the component renders and what text the test looks for.

The component renders 'Hello, Cypress!' inside an h1 tag. The test mounts the component and checks for that exact text, so it passes.

❓ locator

intermediate

Best Locator for a Button in Mounted React Component

You have mounted a React component with a button: . Which Cypress selector is the best practice to locate this button for testing?

A cy.contains('Submit')

B cy.get('button').eq(0)

C cy.get('button').contains('Submit')

D cy.get('button[aria-label="submit form"]')

💡 Hint

Use selectors that improve accessibility and are less likely to break.

Using the aria-label attribute is best practice for accessibility and stable selectors. It is more reliable than text or position-based selectors.

❓ assertion

advanced

Correct Assertion for React Component State Change

After mounting a React component with a button that toggles text from 'Off' to 'On', which assertion correctly verifies the text changes after clicking?

Cypress

import React, { useState } from 'react';
import { mount } from 'cypress/react';

function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

describe('Toggle component', () => {
  it('toggles text on click', () => {
    mount(<Toggle />);
    cy.get('button').click();
    // Which assertion is correct here?
  });
});

A cy.get('button').should('have.text', 'On')

B cy.get('button').should('contain', 'On')

C cy.get('button').should('have.attr', 'text', 'On')

D cy.get('button').should('have.value', 'On')

💡 Hint

Check the correct Cypress assertion for button text content.

The 'have.text' assertion checks the exact text content of the button. 'contain' is less strict but also works; however, 'have.value' and 'have.attr' are incorrect for button text.

🔧 Debug

advanced

Debugging Mount Failure in Cypress React Test

You try to mount a React component in Cypress but get the error: "TypeError: mount is not a function". What is the most likely cause?

Cypress

import React from 'react';
import { mount } from 'cypress/react';

function Sample() {
  return <div>Sample</div>;
}

describe('Sample test', () => {
  it('mounts component', () => {
    mount(<Sample />);
  });
});

A The import statement should be from 'react-dom' instead of 'cypress/react'.

B The cypress/react package is not installed or not configured correctly.

C The mount function is deprecated and should be replaced with render.

D The React component is missing a return statement.

💡 Hint

Check if the testing environment has the right packages installed.

The error means Cypress cannot find the mount function. This usually happens if the cypress/react package is missing or not set up properly.

❓ framework

expert

Handling Asynchronous Effects in Mounted React Components

You mount a React component that fetches data asynchronously on mount and displays it. Which Cypress approach correctly waits for the data to appear before asserting?

Cypress

import React, { useEffect, useState } from 'react';
import { mount } from 'cypress/react';

function DataFetcher() {
  const [data, setData] = useState(null);
  useEffect(() => {
    setTimeout(() => setData('Loaded'), 1000);
  }, []);
  return <div>{data ?? 'Loading...'}</div>;
}

describe('DataFetcher component', () => {
  it('shows loaded data', () => {
    mount(<DataFetcher />);
    // Which option waits correctly for data?
  });
});

A cy.get('div').should('have.text', 'Loaded')

B cy.wait(1000); cy.get('div').should('have.text', 'Loaded')

C cy.contains('Loaded').should('exist')

D cy.get('div').should('not.have.text', 'Loading...')

💡 Hint

Use Cypress commands that automatically retry until the condition is met.

cy.contains('Loaded').should('exist') retries until the text appears, handling async updates gracefully. cy.wait(1000) is brittle and not recommended. Other options may fail if text changes timing varies.