Implementation:Cypress io Cypress Reporter Component

Knowledge Sources	Cypress
Domains	UI, React
Last Updated	2026-02-12 00:00 GMT

Overview

Concrete React component for rendering test results in real time provided by the Cypress reporter package.

Description

The Reporter is a React functional component wrapped in MobX observer for reactive rendering. It receives test execution events from the driver, initializes MobX stores for runnables, stats, and app state, and renders the full test result UI including headers, runnable trees, and command logs. It supports Studio mode for recording new tests.

Usage

This component is mounted by the unified runner in the Cypress application. It is used in both open mode (interactive) and as the foundation for headless mode result aggregation.

Code Reference

Source Location

• Repository: cypress-io/cypress
• File: packages/reporter/src/main.tsx
• Lines: L30-153

Signature

export interface BaseReporterProps {
  appState: AppState
  className?: string
  runnablesStore: RunnablesStore
  runner: Runner
  scroller: Scroller
  statsStore: StatsStore
  autoScrollingEnabled?: boolean
  isSpecsListOpen?: boolean
  showFetchRequests?: boolean
  events: Events
  error?: RunnablesErrorModel
  resetStatsOnSpecChange?: boolean
  renderReporterHeader?: (props: ReporterHeaderProps) => JSX.Element
  studioEnabled: boolean
  runnerStore: MobxRunnerStore
}

export interface SingleReporterProps extends BaseReporterProps {
  runMode?: 'single'
}

const Reporter: React.FC<SingleReporterProps> = observer(({
  appState, runner, className, error, runMode, studioEnabled,
  autoScrollingEnabled, isSpecsListOpen, showFetchRequests,
  resetStatsOnSpecChange, renderReporterHeader, runnerStore
}) => { ... })

Import

import Reporter from '@packages/reporter/src/main'

I/O Contract

Inputs

Name	Type	Required	Description
appState	AppState	Yes	Application state (auto-scrolling, spec list)
runner	Runner	Yes	Runner instance for event communication
runnablesStore	RunnablesStore	Yes	MobX store for test tree data
statsStore	StatsStore	Yes	MobX store for pass/fail/pending counts
studioEnabled	boolean	Yes	Whether Studio recording mode is available
runnerStore	MobxRunnerStore	Yes	Runner store with spec and run information

Outputs

Name	Type	Description
JSX.Element	React component	Rendered test results UI with command log

Usage Examples

Mounting the Reporter

import Reporter from '@packages/reporter/src/main'

<Reporter
  appState={appState}
  runner={runner}
  runnablesStore={runnablesStore}
  statsStore={statsStore}
  studioEnabled={false}
  runnerStore={runnerStore}
  scroller={scroller}
  events={events}
/>

Related Pages

Implements Principle

• Principle:Cypress_io_Cypress_Test_Result_Reporting