How does Cypress component testing work?

Component tests sit between unit tests and end-to-end tests. Instead of visiting a route, you mount one component with its props and interact with it. Cypress runs the component in a real browser, so layout, focus and events behave as they do in the app without starting the whole application.

import { mount } from "cypress/react";
import { Counter } from "../../src/Counter";

describe("Counter", () => {
  it("increments when clicked", () => {
    mount(<Counter start={0} step={2} />);

    cy.contains("button", "Add").click();
    cy.contains("[data-cy=value]", "2").should("be.visible");
  });
});

What to cover

• Rendering of props and conditional branches
• User interactions such as typing, selecting and keyboard behaviour
• Validation and error presentation inside the component
• Integration with a small state or context provider
• Visual states that are hard to reach through the full app

Component tests need the same mocking discipline as unit tests. Stub network calls at the boundary, provide the required context, and avoid importing the entire app shell. If a test needs routing, authentication and a database, it is probably an end-to-end test in disguise.