Component Testing

Component Testing Overview

Cypress Component Testing (CT) mounts components in browser without full app navigation—faster feedback than E2E for UI edge cases. Shares Cypress API: cy.get, intercept, assertions.

Configure component devServer in cypress.config for Vite, Webpack, or Next.js. Specs live in cypress/component or co-located *.cy.tsx.

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "react",
      bundler: "vite",
    },
    specPattern: "src/**/*.cy.tsx",
  },
});

Mounting Components

cy.mount from @cypress/react (or vue/angular adapters) renders component with props. Wrap with providers—Router, Theme, QueryClient—via mount options or custom wrapper.

Test user interactions and visual states without routing to page containing component.

import { mount } from "cypress/react18";
import { Button } from "./Button";

it("emits click", () => {
  const onClick = cy.stub().as("click");
  mount(<Button onClick={onClick}>Save</Button>);
  cy.contains("Save").click();
  cy.get("@click").should("have.been.calledOnce");
});

CT vs E2E Boundaries

Use CT for prop variations, edge UI states, and interaction logic. Use E2E for routing, auth cookies, and multi-service integration.

CT can still intercept API calls components make—test loading and error UI without full backend.

• CT runs faster—include more variant cases than E2E allows
• Do not duplicate every E2E flow in CT—avoid redundant maintenance
• Share data-cy conventions between CT and E2E specs

Styling and Assets

Import global CSS in component support file for accurate visual tests. Mock static assets and fonts if slow in CI.

Visual comparison optional with cypress-image-snapshot plugin—treat like any snapshot with careful review.

// cypress/support/component.ts
import "../../src/index.css";
import { mount } from "cypress/react18";

Cypress.Commands.add("mount", mount);

CI for Component Tests

Run cypress run --component in CI separately from E2E job for faster PR signal. Component tests need devServer build—cache node_modules and Vite prebundle.

Combine with Storybook optionally—Storybook for docs, Cypress CT for interaction assertions.

"test:component": "cypress run --component --browser chrome"