Cypress Component Testing — The Complete Guide (2026)

Last updated 2026-07-20 · 10 min read · By Avinash K

Component testing is Cypress's killer feature and the reason many teams still choose it over Playwright. You mount a component in a real browser, at ~50ms per test, with the same debugging UX as E2E. This guide covers React + Vue + Angular setup, mocking patterns, and the design-system regression suite that keeps our design tokens honest.

Key takeaways

• Component setup for React, Vue, and Angular.
• Mount + prop patterns.
• Network stubs at the component level.
• A design-system regression pattern.

npx cypress open --component
# Cypress detects your framework and generates cypress.config.ts + support files

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

it('renders and clicks', () => {
  const onClick = cy.stub().as('onClick');
  mount(<Button onClick={onClick}>Save</Button>);
  cy.get('button').click();
  cy.get('@onClick').should('have.been.calledOnce');
});

cy.intercept('GET', '/api/users', { fixture: 'users.json' });
mount(<UserList />);
cy.contains('Alice').should('be.visible');

Same cy.intercept API you use for E2E — no MSW required.

Mount every design-system component in every documented state (default, hover, disabled, error, loading). Combine with visual regression snapshots and you catch 90% of design token regressions before merge. Related: framework decision matrix, POM guide. Docs: docs.cypress.io/guides/component-testing.