Adding visual regression testing infra

[acoates-ms]

Description

Add screenshot snapshot infra to E2E app

Why

Enable us to detect visual regressions.

What

What changes were made to the codebase to solve the bug, add the functionality, etc. that you specified above.

Added a new automation channel API to the E2E test app to allow tests to take screenshots of components. And added jest-image-snapshot to allow tests to verify that the images match existing snapshots.

Microsoft Reviewers: Open in CodeFlow

[github-actions]

Performance Test Results

Branch: screenshottest
Commit: 9c88d645
Time: 2026-04-23T01:08:48.273Z
Tests: 161/161 passed

✅ Passed

161 scenario(s) across 28 suite(s) — no regressions

SectionList

Scenario	Mean	Median	StdDev	Renders	vs Baseline
SectionList mount	5.00ms	5.00ms	±0.67ms	1	+0.0%
SectionList unmount	0.30ms	0.00ms	±0.48ms	0	+0.0%
SectionList rerender	11.00ms	10.00ms	±2.26ms	2	-4.8%
SectionList with-3-sections-15-items	5.50ms	5.50ms	±0.53ms	1	+0.0%
SectionList with-5-sections-50-items	6.00ms	6.00ms	±1.49ms	1	+0.0%
SectionList with-10-sections-200-items	5.40ms	6.00ms	±0.84ms	1	+9.1%
SectionList with-20-sections-200-items	5.00ms	5.00ms	±1.49ms	1	+0.0%
SectionList with-section-separator	2.00ms	2.00ms	±0.47ms	1	+0.0%
SectionList with-item-separator	2.20ms	2.00ms	±0.42ms	1	+0.0%
SectionList with-header-footer	2.40ms	2.00ms	±1.65ms	1	+0.0%
SectionList with-section-footer	1.10ms	1.00ms	±0.32ms	1	-50.0%
SectionList with-sticky-section-headers	2.00ms	2.00ms	±0.47ms	1	+0.0%
SectionList with-empty-list	0.40ms	0.00ms	±0.52ms	1	-100.0%
SectionList with-50-sections-1000-items	1.70ms	2.00ms	±0.48ms	1	+0.0%

FlatList

Scenario	Mean	Median	StdDev	Renders	vs Baseline
FlatList mount	4.90ms	5.00ms	±1.45ms	1	+25.0%
FlatList unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
FlatList rerender	10.60ms	10.00ms	±1.78ms	2	+11.1%
FlatList with-10-items	4.70ms	5.00ms	±0.48ms	1	+25.0%
FlatList with-100-items	5.50ms	5.00ms	±2.84ms	1	+0.0%
FlatList with-500-items	4.60ms	5.00ms	±0.52ms	1	+25.0%
FlatList with-1000-items	4.50ms	4.50ms	±0.53ms	1	+12.5%
FlatList horizontal	3.80ms	4.00ms	±1.14ms	1	-20.0%
FlatList with-separator	2.40ms	2.00ms	±0.97ms	1	+0.0%
FlatList with-header-footer	1.60ms	2.00ms	±0.52ms	1	+0.0%
FlatList with-empty-list	0.50ms	0.50ms	±0.53ms	1	+0.0%
FlatList with-get-item-layout	1.50ms	1.50ms	±0.53ms	1	+50.0%
FlatList inverted	1.30ms	1.00ms	±0.48ms	1	-33.3%
FlatList with-num-columns	3.00ms	3.00ms	±0.00ms	1	+0.0%

TouchableOpacity

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableOpacity mount	1.00ms	1.00ms	±0.00ms	1	+0.0%
TouchableOpacity unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
TouchableOpacity rerender	1.50ms	1.50ms	±1.18ms	2	+50.0%
TouchableOpacity custom-active-opacity	0.70ms	1.00ms	±0.48ms	1	+0.0%
TouchableOpacity disabled	0.60ms	1.00ms	±0.52ms	1	+0.0%
TouchableOpacity with-all-handlers	0.70ms	1.00ms	±0.48ms	1	+0.0%
TouchableOpacity with-hit-slop	0.70ms	1.00ms	±0.48ms	1	+0.0%
TouchableOpacity with-delay	0.60ms	1.00ms	±0.52ms	1	+0.0%
TouchableOpacity nested	1.40ms	1.00ms	±0.52ms	1	+0.0%
TouchableOpacity multiple-10	5.27ms	5.00ms	±0.70ms	1	-16.7%
TouchableOpacity multiple-50	26.27ms	25.00ms	±2.69ms	1	-13.8%
TouchableOpacity multiple-100	35.07ms	32.00ms	±11.66ms	1	-36.0%

ScrollView

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ScrollView mount	0.60ms	1.00ms	±0.52ms	1	+Infinity%
ScrollView unmount	0.10ms	0.00ms	±0.32ms	0	+0.0%
ScrollView rerender	0.70ms	1.00ms	±0.48ms	2	+0.0%
ScrollView children-20	2.87ms	3.00ms	±0.64ms	1	-25.0%
ScrollView children-100	16.20ms	16.00ms	±1.82ms	1	+0.0%
ScrollView horizontal	3.40ms	3.50ms	±0.70ms	1	-12.5%
ScrollView sticky-headers	3.20ms	3.00ms	±1.69ms	1	+0.0%
ScrollView scroll-indicators	0.80ms	1.00ms	±0.42ms	1	+0.0%
ScrollView nested	1.40ms	1.00ms	±0.52ms	1	+0.0%
ScrollView content-container-style	0.70ms	1.00ms	±0.48ms	1	+0.0%
ScrollView children-500	20.07ms	20.00ms	±3.03ms	1	+5.3%

TouchableHighlight

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableHighlight mount	0.40ms	0.00ms	±0.52ms	1	-100.0%
TouchableHighlight unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
TouchableHighlight rerender	0.70ms	1.00ms	±0.48ms	2	+0.0%
TouchableHighlight custom-underlay-color	0.50ms	0.50ms	±0.53ms	1	+Infinity%
TouchableHighlight custom-active-opacity	0.40ms	0.00ms	±0.52ms	1	+0.0%
TouchableHighlight disabled	0.30ms	0.00ms	±0.48ms	1	+0.0%
TouchableHighlight with-all-handlers	0.30ms	0.00ms	±0.48ms	1	+0.0%
TouchableHighlight with-hit-slop	0.30ms	0.00ms	±0.48ms	1	+0.0%
TouchableHighlight nested-touchables	0.70ms	1.00ms	±0.48ms	1	+0.0%
TouchableHighlight multiple-touchables-10	3.10ms	3.00ms	±0.32ms	1	+0.0%
TouchableHighlight multiple-touchables-50	12.80ms	13.00ms	±1.03ms	1	+4.0%
TouchableHighlight multiple-touchables-100	26.20ms	24.50ms	±5.20ms	1	+8.9%

Pressable

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Pressable mount	0.40ms	0.00ms	±0.52ms	1	+0.0%
Pressable unmount	0.20ms	0.00ms	±0.42ms	0	+0.0%
Pressable rerender	0.80ms	1.00ms	±0.42ms	2	+100.0%
Pressable with-all-handlers	0.40ms	0.00ms	±0.52ms	1	+0.0%
Pressable with-style-function	0.20ms	0.00ms	±0.42ms	1	+0.0%
Pressable disabled	0.20ms	0.00ms	±0.42ms	1	+0.0%
Pressable with-hit-slop	0.40ms	0.00ms	±0.52ms	1	+0.0%
Pressable nested	0.80ms	1.00ms	±0.42ms	1	+0.0%
Pressable multiple-10	3.40ms	3.00ms	±1.06ms	1	+0.0%
Pressable multiple-50	16.13ms	16.00ms	±2.03ms	1	+14.3%
Pressable multiple-100	17.67ms	14.00ms	±9.77ms	1	+16.7%

Modal

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Modal mount	0.30ms	0.00ms	±0.48ms	1	+0.0%
Modal unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Modal rerender	0.50ms	0.50ms	±0.53ms	2	+Infinity%
Modal slide-animation	0.40ms	0.00ms	±0.52ms	1	+0.0%
Modal fade-animation	0.20ms	0.00ms	±0.42ms	1	+0.0%
Modal transparent	0.40ms	0.00ms	±0.52ms	1	+0.0%
Modal with-callbacks	0.30ms	0.00ms	±0.48ms	1	+0.0%
Modal rich-content	1.60ms	2.00ms	±0.52ms	1	+0.0%
Modal with-accessibility	0.30ms	0.00ms	±0.48ms	1	+0.0%

Image

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Image mount	0.20ms	0.00ms	±0.42ms	1	+0.0%
Image unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Image rerender	0.20ms	0.00ms	±0.42ms	2	+0.0%
Image with-resize-mode	0.10ms	0.00ms	±0.32ms	1	+0.0%
Image with-border-radius	0.30ms	0.00ms	±0.48ms	1	+0.0%
Image with-tint-color	0.20ms	0.00ms	±0.42ms	1	+0.0%
Image with-blur-radius	0.20ms	0.00ms	±0.42ms	1	+0.0%
Image with-accessibility	0.20ms	0.00ms	±0.42ms	1	+0.0%
Image multiple-10	1.00ms	1.00ms	±0.00ms	1	+0.0%
Image multiple-50	3.87ms	4.00ms	±0.35ms	1	+33.3%
Image multiple-100	8.00ms	8.00ms	±1.00ms	1	+0.0%

ActivityIndicator

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ActivityIndicator mount	0.20ms	0.00ms	±0.42ms	1	+0.0%
ActivityIndicator unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
ActivityIndicator rerender	0.30ms	0.00ms	±0.48ms	2	+0.0%
ActivityIndicator size-large	0.20ms	0.00ms	±0.42ms	1	+0.0%
ActivityIndicator size-small	0.10ms	0.00ms	±0.32ms	1	+0.0%
ActivityIndicator with-color	0.20ms	0.00ms	±0.42ms	1	+0.0%
ActivityIndicator not-animating	0.20ms	0.00ms	±0.42ms	1	+0.0%
ActivityIndicator with-accessibility	0.10ms	0.00ms	±0.32ms	1	+0.0%
ActivityIndicator multiple-10	0.80ms	1.00ms	±0.41ms	1	+0.0%
ActivityIndicator multiple-50	3.80ms	4.00ms	±1.01ms	1	+0.0%
ActivityIndicator multiple-100	8.13ms	8.00ms	±1.13ms	1	+14.3%

Switch

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Switch mount	0.30ms	0.00ms	±0.48ms	1	+0.0%
Switch unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Switch rerender	0.30ms	0.00ms	±0.48ms	2	-100.0%
Switch value-true	0.30ms	0.00ms	±0.48ms	1	+0.0%
Switch disabled	0.30ms	0.00ms	±0.48ms	1	+0.0%
Switch custom-colors	0.60ms	0.00ms	±0.97ms	1	+0.0%
Switch on-value-change	0.30ms	0.00ms	±0.48ms	1	+0.0%
Switch with-accessibility	0.30ms	0.00ms	±0.48ms	1	+0.0%
Switch multiple-10	1.53ms	2.00ms	±0.52ms	1	+0.0%
Switch multiple-50	9.47ms	9.00ms	±2.80ms	1	+0.0%
Switch multiple-100	18.67ms	17.00ms	±2.85ms	1	+6.3%

Button

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Button mount	0.90ms	1.00ms	±0.32ms	1	+0.0%
Button unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Button rerender	1.60ms	2.00ms	±0.97ms	2	+100.0%
Button disabled	0.80ms	1.00ms	±0.42ms	1	+0.0%
Button with-color	1.10ms	1.00ms	±0.32ms	1	+100.0%
Button with-accessibility	1.00ms	1.00ms	±0.00ms	1	+0.0%
Button multiple-10	6.07ms	6.00ms	±0.96ms	1	+0.0%
Button multiple-50	21.40ms	25.00ms	±9.00ms	1	-7.4%
Button multiple-100	16.27ms	16.00ms	±2.05ms	1	-15.8%

TextInput

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TextInput mount	0.10ms	0.00ms	±0.32ms	1	+0.0%
TextInput unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
TextInput rerender	0.50ms	0.50ms	±0.53ms	2	+Infinity%
TextInput multiline	0.20ms	0.00ms	±0.42ms	1	+0.0%
TextInput with-value	0.20ms	0.00ms	±0.42ms	1	+0.0%
TextInput styled	0.10ms	0.00ms	±0.32ms	1	+0.0%
TextInput multiple-100	7.87ms	8.00ms	±1.51ms	1	+14.3%

View

Scenario	Mean	Median	StdDev	Renders	vs Baseline
View mount	0.00ms	0.00ms	±0.00ms	1	+0.0%
View unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
View rerender	0.20ms	0.00ms	±0.42ms	2	+0.0%
View nested-50	3.67ms	4.00ms	±0.49ms	1	+33.3%
View nested-100	8.07ms	8.00ms	±1.33ms	1	+14.3%
View shadow	0.10ms	0.00ms	±0.32ms	1	+0.0%
View border-radius	0.20ms	0.00ms	±0.42ms	1	+0.0%
View nested-500	16.93ms	10.00ms	±12.98ms	1	+0.0%

Text

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Text mount	0.10ms	0.00ms	±0.32ms	1	+0.0%
Text unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Text rerender	0.30ms	0.00ms	±0.48ms	2	+0.0%
Text long-1000	0.20ms	0.00ms	±0.42ms	1	+0.0%
Text nested	0.30ms	0.00ms	±0.48ms	1	+0.0%
Text styled	0.10ms	0.00ms	±0.32ms	1	+0.0%
Text multiple-100	8.80ms	8.00ms	±1.57ms	1	+14.3%

SectionList.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
SectionList native mount	4.37ms	4.13ms	±0.47ms	1	-36.5%

FlatList.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
FlatList native mount	4.46ms	4.36ms	±0.62ms	1	-52.8%

TouchableHighlight.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableHighlight native mount	1.37ms	1.29ms	±0.20ms	1	-38.1%

TouchableOpacity.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableOpacity native mount	1.52ms	1.47ms	±0.13ms	1	-53.3%

Pressable.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Pressable native mount	1.39ms	1.32ms	±0.24ms	1	-47.5%

ScrollView.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ScrollView native mount	2.89ms	2.78ms	±0.21ms	1	-31.5%

ActivityIndicator.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ActivityIndicator native mount	1.17ms	1.12ms	±0.18ms	1	-55.0%

TextInput.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TextInput native mount	1.97ms	1.79ms	±0.54ms	1	-56.1%

Switch.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Switch native mount	1.07ms	1.01ms	±0.17ms	1	-41.6%

Button.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Button native mount	1.69ms	1.58ms	±0.28ms	1	-39.1%

Modal.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Modal native mount	0.95ms	0.88ms	±0.14ms	1	-27.8%

Image.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Image native mount	1.95ms	1.75ms	±0.68ms	1	-22.4%

View.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
View native mount	1.05ms	0.98ms	±0.21ms	1	-31.4%

Text.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Text native mount	1.32ms	1.18ms	±0.28ms	1	-32.1%