Implementation:Cypress io Cypress Component Config Options

Knowledge Sources	Cypress Component Testing Config
Domains	Configuration, Component_Testing
Last Updated	2026-02-12 00:00 GMT

Overview

Concrete tool for defining component testing configuration defaults provided by the @packages/config module.

Description

The component testing configuration options are defined within packages/config/src/options.ts as entries in the options array with overrideLevels that include component-specific defaults. Key options include specPattern, indexHtmlFile, devServerPublicPathRoute, and testing-type-specific overrides for viewportWidth, viewportHeight, and slowTestThreshold.

Usage

These options are read during configuration resolution when testingType is set to component. The resolution pipeline applies component-specific defaults from the option definitions.

Code Reference

Source Location

• Repository: cypress-io/cypress
• File: packages/config/src/options.ts
• Lines: L169-175 (component defaults), L423-426 (slowTestThreshold), L486-494 (viewport), L550-554 (devServerPublicPathRoute)

Signature

// Component-specific option definitions within the options array
{
  name: 'specPattern',
  defaultValue: '**/*.cy.{js,jsx,ts,tsx}',
  // overridden per testing type
}
{
  name: 'slowTestThreshold',
  defaultValue: 250, // 250ms for component (vs 10000ms for e2e)
}
{
  name: 'viewportWidth',
  defaultValue: 500, // 500px for component (vs 1000px for e2e)
}
{
  name: 'viewportHeight',
  defaultValue: 500, // 500px for component (vs 660px for e2e)
}
{
  name: 'devServerPublicPathRoute',
  defaultValue: '/__cypress/src',
}

Import

import { defineConfig } from 'cypress'

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

I/O Contract

Inputs

Name	Type	Required	Description
component	object	Yes	Component testing configuration block in cypress.config
component.devServer	object/function	Yes	Dev server configuration (framework + bundler or custom function)
component.specPattern	string	No	Glob for component test files (default: **/*.cy.{js,jsx,ts,tsx})

Outputs

Name	Type	Description
ResolvedConfig	object	Configuration with component-specific defaults applied

Usage Examples

React + Vite Configuration

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
    specPattern: 'src/**/*.cy.{ts,tsx}',
    viewportWidth: 800,
    viewportHeight: 600,
  },
})

Related Pages

Implements Principle

• Principle:Cypress_io_Cypress_Component_Testing_Configuration