Implementation:Cypress io Cypress Reporter Component CT

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

Overview

Concrete React component for rendering component test results alongside the tested component viewport provided by the Cypress reporter package.

Description

The Reporter component is reused from E2E reporting (packages/reporter/src/main.tsx) but rendered within the component testing layout. In component testing mode, the Reporter occupies the left panel while the right panel shows the rendered component. The same BaseReporterProps interface applies, with the runnerStore tracking the component spec being tested.

Usage

This component is instantiated by the Cypress app when running in component testing mode. The layout differs from E2E mode to accommodate the component viewport.

Code Reference

Source Location

• Repository: cypress-io/cypress
• File: packages/reporter/src/main.tsx
• Lines: L53-129 (Reporter component render, same as E2E but in CT layout)

Signature

// Same Reporter component used in E2E, rendered in component testing layout
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
runner	Runner	Yes	Runner instance for events
runnablesStore	RunnablesStore	Yes	Test tree data store
statsStore	StatsStore	Yes	Pass/fail/pending counts
runnerStore	MobxRunnerStore	Yes	Runner store with component spec info

Outputs

Name	Type	Description
JSX.Element	React component	Test results panel for component testing layout

Usage Examples

Component Testing Layout

// In the Cypress app component testing view
<div className="ct-layout">
  <div className="reporter-panel">
    <Reporter
      appState={appState}
      runner={runner}
      runnablesStore={runnablesStore}
      statsStore={statsStore}
      studioEnabled={false}
      runnerStore={runnerStore}
      scroller={scroller}
      events={events}
    />
  </div>
  <div className="component-viewport">
    {/* Rendered component appears here */}
  </div>
</div>

Related Pages

Implements Principle

• Principle:Cypress_io_Cypress_Component_Result_Review