Principle:Cypress io Cypress Component Testing Configuration
| Knowledge Sources | |
|---|---|
| Domains | Configuration, Component_Testing |
| Last Updated | 2026-02-12 00:00 GMT |
Overview
A testing-type-specific configuration mechanism that tailors Cypress defaults for isolated component rendering with appropriate viewport, timeout, and dev server settings.
Description
Component testing configuration extends the base Cypress configuration with component-specific defaults. Unlike E2E testing which tests full applications, component testing renders individual UI components in isolation. This requires different defaults: a smaller viewport (500x500 vs 1000x660), shorter slow test threshold (250ms vs 10000ms), a dev server integration, and a component-specific specPattern.
The configuration must specify a devServer function that integrates with the project's build tool (Vite or Webpack) to serve components with the same transformations (JSX, TypeScript, CSS modules) the application uses in production.
Usage
Use this principle when setting up Cypress component testing for a project. It applies during initial configuration and whenever component-specific defaults need to differ from E2E defaults.
Theoretical Basis
Component Config Defaults (vs E2E):
viewportWidth: 500 (vs 1000)
viewportHeight: 500 (vs 660)
slowTestThreshold: 250 (vs 10000)
specPattern: '**/*.cy.{js,jsx,ts,tsx}'
indexHtmlFile: 'cypress/support/component-index.html'
devServerPublicPathRoute: '/__cypress/src'