Component test setup in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress component test setup code?

Consider this Cypress test setup for a React component. What will be the test result after running this code?

Cypress

import { mount } from 'cypress/react';

describe('Button component', () => {
  it('renders with correct label', () => {
    mount(<button>Click me</button>);
    cy.get('button').should('have.text', 'Click me');
  });
});

A Test fails because the button text is empty.

B Test passes because the button text matches 'Click me'.

C Test fails due to a syntax error in the mount function.

D Test fails because the selector 'button' does not find any element.

💡 Hint

Think about what the mount function does and how Cypress queries elements.

The mount function renders the React component inside the Cypress test runner. The cy.get('button') finds the button element, and the assertion checks its text. Since the button text is 'Click me', the test passes.

❓ locator

intermediate

Which locator is best for selecting a button in a Cypress component test?

You want to select a button in a component test for Cypress. Which locator is the best practice to use?

A cy.get('button')

B cy.get('#submit')

C cy.get('.btn-primary')

D cy.get('[data-cy="submit-button"]')

💡 Hint

Consider maintainability and avoiding brittle selectors.

Using data-cy attributes is a best practice for Cypress tests because it avoids relying on styling classes or IDs that may change. This makes tests more stable and easier to maintain.

❓ assertion

advanced

Which assertion correctly verifies a component's input value in Cypress?

You have an input field rendered in a component test. Which assertion correctly checks that the input's value is 'hello'?

Cypress

import { mount } from 'cypress/react';

mount(<input value="hello" />);

A cy.get('input').should('have.value', 'hello')

B cy.get('input').should('contain.text', 'hello')

C cy.get('input').should('have.attr', 'value', 'hello')

D cy.get('input').should('have.text', 'hello')

💡 Hint

Think about how input values are accessed in Cypress assertions.

The have.value assertion checks the value property of input elements. Using contain.text or have.text does not work for input values because inputs do not have inner text. Checking the attribute value may not reflect the current value if changed dynamically.

🔧 Debug

advanced

Why does this Cypress component test fail to find the button?

Look at this test code. Why does the test fail with 'Timed out retrying: Expected to find element: button, but never found it'?

Cypress

import { mount } from 'cypress/react';

describe('MyComponent', () => {
  it('should find the button', () => {
    cy.get('button').should('exist');
    mount(<button>Press</button>);
  });
});

A The test is missing a wait command before cy.get.

B The selector 'button' is incorrect and does not match the button element.

C The mount call happens after the cy.get, so the button is not rendered when searched.

D The mount function is not imported, causing the test to fail.

💡 Hint

Think about the order of commands and when elements appear in the DOM.

Cypress commands run asynchronously in order. The cy.get('button') runs before the component is mounted, so no button exists yet. The test fails because it looks for the button too early.

❓ framework

expert

Which Cypress configuration is required to enable component testing with React?

You want to run Cypress component tests for React components. Which configuration setting is necessary in cypress.config.js?

A component: { devServer: { framework: 'react', bundler: 'webpack' } }

B component: { supportFile: false }

C e2e: { baseUrl: 'http://localhost:3000' }

D component: { testFiles: '**/*.spec.js' }

💡 Hint

Think about how Cypress knows which framework and bundler to use for component tests.

To run component tests with React, Cypress needs to know the framework and bundler to use. The component.devServer config with framework: 'react' and bundler: 'webpack' tells Cypress how to build and serve the components for testing.