Skip to content

Performance tests Fabric

Jump to bottom
Abhijeet Jha edited this page Feb 16, 2026 · 2 revisions

Performance Testing for React Native Windows

Each test measures mount, unmount, re-render and component specific test scenario times also records baselines via snapshot matching.

How to Run

cd packages/e2e-test-app-fabric
yarn perf                                              # all tests
yarn perf -- --testPathPattern=FlatList                 # single component
yarn perf:update                                       # update all baselines
yarn perf:update --testPathPattern=TouchableHighlight   # update one baseline

CLI Generator

yarn perf:create -- --name=ComponentName scaffolds a new .perf-test.tsx file with the correct structure, required props detection, and category selection.

What's Included

Perf Testing Framework (@react-native-windows/perf-testing)

Module Purpose
ComponentPerfTestBase Abstract base class — components provide props/scenarios, framework handles measurement
measurePerf() Core timing engine using React.Profiler (monotonic high-resolution clock, QueryPerformanceCounter on windows OS)
toMatchPerfSnapshot() Custom Jest matcher — compares results against .perf-baseline.json snapshots
PerfProfiler React wrapper that captures actualDuration from Profiler callbacks
snapshotManager Reads/writes/updates baseline JSON files
Threshold presets strict, standard, relaxed, ci — configurable tolerance bands
Scenarios MountScenario, UnmountScenario, RerenderScenario
Reporters ConsoleReporter, MarkdownReporter, PerfJsonReporter
CI utilities BaselineComparator for CI regression detection

Component Test Suites (14 suites, 134 tests)

Category Component Tests Key Scenarios
Core View 7 default, nested, styled, accessible, nativeID, testID, pointerEvents
Text 6 default, long text, nested, styled, selectable, accessible
TextInput 6 default, placeholder, multiline, secure, styled, accessible
Button 8 default, colored, disabled, accessible, long title, custom a11y, styled container, all props
Image 10 default, remote URI, sized, resizeMode, accessible, tinted, background, blurred, multiple sources, all props
ScrollView 10 default, horizontal, many children, pagingEnabled, styled, accessible, stickyHeaders, nestedScroll, invertedStickyHeaders, contentInset
Switch 10 default, enabled-on, disabled, custom colors, accessible, styled, ios_backgroundColor, all props, toggled-on, toggled-off
Modal 9 default, visible, transparent, slide, fade, fullscreen, accessible, onShow, all props
ActivityIndicator 10 default, animating, large, custom color, small, styled, accessible, non-animating, custom size, all props
Interactive Pressable 10 default, disabled, styled, accessible, pressed-style, ripple, hitSlop, delayLongPress, unstable_pressDelay, all props
TouchableOpacity 11 default, active-opacity, disabled, styled, accessible, long-press, press-in/out, hitSlop, custom-a11y, all-props, focus
TouchableHighlight 11 default, custom-underlay, opacity, disabled, styled, accessible, long-press, show/hide-underlay, hitSlop, all-props, focus
Lists FlatList 13 10/100/500 items, horizontal, separator, header+footer, empty, getItemLayout, inverted, numColumns(3), sections
SectionList 13 3×5, 5×10, 10×20, 20×10 sections, separators, header+footer, section-footer, sticky-headers, empty, inverted, renderSectionHeader, all-features

Test Architecture

ComponentPerfTest extends ComponentPerfTestBase
  ├── componentName()   → 'FlatList'
  ├── baseProps()       → minimal valid props
  ├── scenarios()       → [{ name, props, description }]
  └── (optional) renderChildren(), wrapComponent()

measurePerf(test, scenario)
  ├── renders via PerfProfiler
  ├── captures actualDuration from React.Profiler
  ├── runs mount / unmount / rerender cycles
  └── returns PerfMetrics

expect(metrics).toMatchPerfSnapshot()
  ├── loads/creates .perf-baseline.json
  ├── compares against thresholds
  └── updates baseline when --updateSnapshot

=================================================================================================================================

Folder Structure

packages/e2e-test-app-fabric/
├── jest.perf.config.js                          # Jest config (maxWorkers:1, .perf-test pattern)
├── jest.perf.setup.ts                           # Test setup (registers toMatchPerfSnapshot matcher)
└── test/__perf__/
    ├── core/                                    # 9 core component tests
    │   ├── View.perf-test.tsx
    │   ├── Text.perf-test.tsx
    │   ├── TextInput.perf-test.tsx
    │   ├── Button.perf-test.tsx
    │   ├── Image.perf-test.tsx
    │   ├── ScrollView.perf-test.tsx
    │   ├── Switch.perf-test.tsx
    │   ├── Modal.perf-test.tsx
    │   ├── ActivityIndicator.perf-test.tsx
    │   └── __perf_snapshots__/                  # Baseline JSONs (one per test)
    ├── interactive/                             # 3 interactive component tests
    │   ├── Pressable.perf-test.tsx
    │   ├── TouchableOpacity.perf-test.tsx
    │   ├── TouchableHighlight.perf-test.tsx
    │   └── __perf_snapshots__/
    └── list/                                    # 2 list component tests
        ├── FlatList.perf-test.tsx
        ├── SectionList.perf-test.tsx
        └── __perf_snapshots__/

packages/@react-native-windows/perf-testing/src/
├── index.ts                                     # Public API exports
├── base/
│   └── ComponentPerfTestBase.ts                 # Abstract base class for tests
├── core/
│   ├── measurePerf.ts                           # Timing engine (React.Profiler + performance.now)
│   ├── PerfProfiler.tsx                         # React.Profiler wrapper
│   └── statistics.ts                            # mean, median, stdDev
├── interfaces/
│   ├── IComponentPerfTest.ts                    # Test interface contract
│   ├── PerfMetrics.ts                           # Result shape
│   └── PerfThreshold.ts                         # Threshold config shape
├── matchers/
│   ├── toMatchPerfSnapshot.ts                   # Custom Jest matcher
│   └── snapshotManager.ts                       # Baseline file read/write
├── scenarios/
│   ├── MountScenario.ts
│   ├── UnmountScenario.ts
│   └── RerenderScenario.ts
├── config/
│   ├── defaultConfig.ts                         # Default runs, warmup, thresholds
│   └── thresholdPresets.ts                      # strict / standard / relaxed / ci
├── reporters/
│   ├── ConsoleReporter.ts                       # Terminal output
│   └── MarkdownReporter.ts                      # .md report generation
└── ci/
    ├── PerfJsonReporter.ts                      # JSON results for CI artifacts
    └── BaselineComparator.ts                    # Regression detection

vnext/Scripts/perf/
├── create-perf-test.js                          # CLI scaffold generator (yarn perf:create)
├── compare-results.js                           # CI baseline comparison
└── post-pr-comment.js                           # GitHub PR comment poster

Clone this wiki locally