How to Test React Components with Cypress: Simple Guide

To test a React component with Cypress, use the cypress/react library to mount the component inside your test and then write assertions on its rendered output. This allows you to simulate user interactions and verify UI behavior in an easy and reliable way.

Syntax

Use mount() from @cypress/react to render your React component inside Cypress tests. Then use Cypress commands like cy.get() and cy.contains() to find elements and should() to assert conditions.

• mount(<Component />): Renders the React component.
• cy.get(selector): Finds elements by CSS selector.
• cy.contains(text): Finds elements containing text.
• should('have.text', expected): Asserts element text.

javascript

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

describe('Component Test', () => {
  it('renders and asserts text', () => {
    mount(<MyComponent />);
    cy.get('h1').should('have.text', 'Hello World');
  });
});

Example

This example shows how to test a simple React component that displays a greeting. It mounts the component, checks the heading text, and simulates a button click to change the text.

javascript

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

export default function Greeting() {
  const [name, setName] = useState('World');
  return (
    <div>
      <h1>Hello {name}</h1>
      <button onClick={() => setName('Cypress')}>Change Name</button>
    </div>
  );
}

describe('Greeting Component', () => {
  it('renders and updates text on button click', () => {
    mount(<Greeting />);
    cy.get('h1').should('have.text', 'Hello World');
    cy.get('button').click();
    cy.get('h1').should('have.text', 'Hello Cypress');
  });
});

Output

Test passes if the heading text changes from 'Hello World' to 'Hello Cypress' after button click.

Common Pitfalls

Common mistakes when testing React components with Cypress include:

• Not importing mount from @cypress/react, which causes tests to fail.
• Using selectors that are too generic or brittle, like tag names instead of data attributes.
• Not waiting for state updates before asserting, leading to flaky tests.
• Testing implementation details instead of user-visible behavior.

Use data-cy attributes for stable selectors and always assert visible text or behavior.

javascript

/* Wrong way: Using tag selector and no wait */
mount(<Greeting />);
cy.get('h1').should('have.text', 'Hello Cypress'); // Fails immediately

/* Right way: Use data-cy and proper interaction */
mount(<Greeting />);
cy.get('[data-cy=greeting-text]').should('have.text', 'Hello World');
cy.get('[data-cy=change-button]').click();
cy.get('[data-cy=greeting-text]').should('have.text', 'Hello Cypress');

Quick Reference

Tips for testing React components with Cypress:

• Use mount() from @cypress/react to render components.
• Prefer data-cy attributes for selectors to avoid brittle tests.
• Assert visible text or user interactions, not internal state.
• Use Cypress commands like cy.get(), cy.contains(), and should() for assertions.
• Simulate user events with click(), type(), etc.

Key Takeaways

Use @cypress/react's mount() to render React components in tests.

Select elements with stable data-cy attributes to avoid fragile tests.

Assert user-visible output and simulate real user actions.

Avoid testing internal implementation details for reliable tests.

Wait for UI updates before asserting to prevent flaky results.