Skip to content

feat(react-17-tests-v9): bootstrap react v17 integration app #34559

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 8 commits into from
Closed

feat(react-17-tests-v9): bootstrap react v17 integration app #34559

wants to merge 8 commits into from

Conversation

Hotell
Copy link
Contributor

@Hotell Hotell commented May 30, 2025 •
edited
Loading

Previous Behavior

New Behavior

  • adds react17 integration test suite against v9
  • impolements user-land fixes for problematic patterns causing type issues caused by refs type changes

Note:

  • R17 v9 is intermittently failing on test - caused by OOM issues
  • R18 v9 is intermittently failing on e2e - caused by flaky tests

Related Issue(s)

  • Fixes #

@Hotell Hotell changed the title React 18/react 17 integration tests feat(react-17-tests-v9): bootstrap react v17 integration app May 30, 2025
@github-actions GitHub Actions
Copy link

github-actions bot commented May 30, 2025 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)		 108.02 kB
33.15 kB		 108.066 kB
33.169 kB		 46 B
19 B
react-avatar
Avatar		 49.376 kB
15.835 kB		 49.424 kB
15.845 kB		 48 B
10 B
react-avatar
AvatarGroup		 20.177 kB
7.974 kB		 20.224 kB
7.99 kB		 47 B
16 B
react-avatar
AvatarGroupItem		 63.52 kB
20.047 kB		 63.568 kB
20.059 kB		 48 B
12 B
react-badge
Badge		 26.002 kB
8.603 kB		 26.049 kB
8.623 kB		 47 B
20 B
react-badge
CounterBadge		 26.781 kB
8.882 kB		 26.829 kB
8.899 kB		 48 B
17 B
react-badge
PresenceBadge		 25.789 kB
9.472 kB		 25.835 kB
9.488 kB		 46 B
16 B
react-breadcrumb
@fluentui/react-breadcrumb - package		 115.069 kB
31.86 kB		 115.118 kB
31.877 kB		 49 B
17 B
react-button
Button		 37.648 kB
10.867 kB		 37.694 kB
10.883 kB		 46 B
16 B
react-button
CompoundButton		 44.059 kB
12.168 kB		 44.106 kB
12.184 kB		 47 B
16 B
react-button
MenuButton		 42.457 kB
12.216 kB		 42.506 kB
12.233 kB		 49 B
17 B
react-button
SplitButton		 50.527 kB
13.782 kB		 50.573 kB
13.801 kB		 46 B
19 B
react-button
ToggleButton		 53.578 kB
12.642 kB		 53.625 kB
12.655 kB		 47 B
13 B
react-card
Card - All		 102.52 kB
28.908 kB		 102.566 kB
28.937 kB		 46 B
29 B
react-card
Card		 95.162 kB
27.094 kB		 95.212 kB
27.103 kB		 50 B
9 B
react-card
CardFooter		 14.605 kB
5.885 kB		 14.651 kB
5.9 kB		 46 B
15 B
react-card
CardHeader		 17.138 kB
6.751 kB		 17.184 kB
6.764 kB		 46 B
13 B
react-card
CardPreview		 14.671 kB
6.009 kB		 14.718 kB
6.026 kB		 47 B
17 B
react-checkbox
Checkbox		 35.189 kB
12.093 kB		 35.241 kB
12.109 kB		 52 B
16 B
react-color-picker
ColorArea		 50.26 kB
17.664 kB		 50.309 kB
17.678 kB		 49 B
14 B
react-color-picker
ColorPicker		 18.893 kB
7.495 kB		 18.939 kB
7.509 kB		 46 B
14 B
react-color-picker
ColorSlider		 42.436 kB
15.715 kB		 42.482 kB
15.728 kB		 46 B
13 B
react-combobox
Combobox (including child components)		 107.617 kB
35.006 kB		 107.663 kB
35.031 kB		 46 B
25 B
react-combobox
Dropdown (including child components)		 108.241 kB
34.952 kB		 108.293 kB
34.976 kB		 52 B
24 B
react-components
react-components: Button, FluentProvider & webLightTheme		 69.732 kB
20.259 kB		 69.779 kB
20.273 kB		 47 B
14 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 227.58 kB
65.885 kB		 227.642 kB
65.911 kB		 62 B
26 B
react-components
react-components: FluentProvider & webLightTheme		 44.567 kB
14.62 kB		 44.613 kB
14.641 kB		 46 B
21 B
react-components
react-components: entire library		 1.231 MB
310.117 kB		 1.231 MB
310.185 kB		 87 B
68 B
react-datepicker-compat
DatePicker Compat		 227.319 kB
64.364 kB		 227.365 kB
64.386 kB		 46 B
22 B
react-dialog
Dialog (including children components)		 102.547 kB
30.738 kB		 102.593 kB
30.76 kB		 46 B
22 B
react-divider
Divider		 21.399 kB
7.964 kB		 21.445 kB
7.981 kB		 46 B
17 B
react-field
Field		 23.515 kB
8.917 kB		 23.561 kB
8.937 kB		 46 B
20 B
react-image
Image		 15.432 kB
6.251 kB		 15.478 kB
6.266 kB		 46 B
15 B
react-input
Input		 28.085 kB
9.456 kB		 28.137 kB
9.476 kB		 52 B
20 B
react-label
Label		 14.742 kB
6.007 kB		 14.788 kB
6.023 kB		 46 B
16 B
react-link
Link		 17.671 kB
7.155 kB		 17.717 kB
7.167 kB		 46 B
12 B
react-list
List		 89.684 kB
26.704 kB		 89.731 kB
26.718 kB		 47 B
14 B
react-list
ListItem		 113.027 kB
33.481 kB		 113.073 kB
33.501 kB		 46 B
20 B
react-menu
Menu (including children components)		 157.228 kB
47.266 kB		 157.289 kB
47.31 kB		 61 B
44 B
react-menu
Menu (including selectable components)		 160.21 kB
47.87 kB		 160.271 kB
47.909 kB		 61 B
39 B
react-message-bar
MessageBar (all components)		 24.948 kB
9.289 kB		 24.994 kB
9.303 kB		 46 B
14 B
react-persona
Persona		 56.267 kB
17.712 kB		 56.315 kB
17.724 kB		 48 B
12 B
react-popover
Popover		 132.988 kB
41.417 kB		 133.031 kB
41.442 kB		 43 B
25 B
react-progress
ProgressBar		 17.156 kB
6.9 kB		 17.202 kB
6.919 kB		 46 B
19 B
react-provider
FluentProvider		 24.743 kB
8.92 kB		 24.789 kB
8.94 kB		 46 B
20 B
react-radio
Radio		 32.743 kB
10.357 kB		 32.789 kB
10.375 kB		 46 B
18 B
react-radio
RadioGroup		 15.831 kB
6.446 kB		 15.878 kB
6.462 kB		 47 B
16 B
react-select
Select		 27.804 kB
10.14 kB		 27.856 kB
10.16 kB		 52 B
20 B
react-slider
Slider		 38.3 kB
12.836 kB		 38.346 kB
12.853 kB		 46 B
17 B
react-spinbutton
SpinButton		 35.284 kB
11.765 kB		 35.337 kB
11.785 kB		 53 B
20 B
react-spinner
Spinner		 25.317 kB
8.553 kB		 25.363 kB
8.57 kB		 46 B
17 B
react-swatch-picker
@fluentui/react-swatch-picker - package		 106.899 kB
30.866 kB		 106.945 kB
30.882 kB		 46 B
16 B
react-switch
Switch		 35.371 kB
11.336 kB		 35.418 kB
11.352 kB		 47 B
16 B
react-table
DataGrid		 161.429 kB
45.738 kB		 161.481 kB
45.756 kB		 52 B
18 B
react-table
Table (Primitives only)		 42.779 kB
13.878 kB		 42.838 kB
13.905 kB		 59 B
27 B
react-table
Table as DataGrid		 132.277 kB
36.668 kB		 132.335 kB
36.693 kB		 58 B
25 B
react-table
Table (Selection only)		 70.647 kB
20.016 kB		 70.706 kB
20.037 kB		 59 B
21 B
react-table
Table (Sort only)		 69.29 kB
19.629 kB		 69.349 kB
19.65 kB		 59 B
21 B
react-tag-picker
@fluentui/react-tag-picker - package		 188.73 kB
56.597 kB		 188.782 kB
56.623 kB		 52 B
26 B
react-tags
InteractionTag		 15.506 kB
6.232 kB		 15.552 kB
6.249 kB		 46 B
17 B
react-tags
Tag		 30.306 kB
9.905 kB		 30.353 kB
9.925 kB		 47 B
20 B
react-tags
TagGroup		 84.031 kB
24.92 kB		 84.078 kB
24.939 kB		 47 B
19 B
react-text
Text - Default		 17.133 kB
6.737 kB		 17.179 kB
6.753 kB		 46 B
16 B
react-text
Text - Wrappers		 20.293 kB
7.063 kB		 20.339 kB
7.078 kB		 46 B
15 B
react-textarea
Textarea		 26.652 kB
9.764 kB		 26.704 kB
9.784 kB		 52 B
20 B
react-timepicker-compat
TimePicker		 110.6 kB
36.56 kB		 110.646 kB
36.578 kB		 46 B
18 B
react-toast
Toast (including Toaster)		 103.062 kB
30.965 kB		 103.119 kB
30.976 kB		 57 B
11 B
react-tooltip
Tooltip		 58.64 kB
20.312 kB		 58.686 kB
20.336 kB		 46 B
24 B
react-tree
FlatTree		 148.807 kB
42.694 kB		 148.855 kB
42.71 kB		 48 B
16 B
react-tree
PersonaFlatTree		 149.559 kB
42.802 kB		 149.607 kB
42.818 kB		 48 B
16 B
react-tree
PersonaTree		 145.818 kB
41.691 kB		 145.865 kB
41.699 kB		 47 B
8 B
react-tree
Tree		 145.072 kB
41.565 kB		 145.119 kB
41.574 kB		 47 B
9 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 510 B
328 B
global-context
createContextSelector		 537 B
339 B
keyboard-key
keyboard-key package		 3.746 kB
1.928 kB
keyboard-keys
Multiple keyCodes		 50 B
70 B
keyboard-keys
Multiple keys		 87 B
94 B
keyboard-keys
Single key		 44 B
64 B
keyboard-keys
Single keyCode		 39 B
59 B
priority-overflow
createOverflowManager		 4.481 kB
1.864 kB
react
ActivityItem		 71.196 kB
23.345 kB
react
Announced		 38.466 kB
13.274 kB
react
Autofill		 15.42 kB
4.766 kB
react
Breadcrumb		 200.693 kB
59.585 kB
react
Button		 194.242 kB
55.873 kB
react
ButtonGrid		 179.13 kB
53.878 kB
react
Calendar		 121.126 kB
36.821 kB
react
Callout		 84.233 kB
27.586 kB
react
Check		 53.182 kB
17.832 kB
react
Checkbox		 59.948 kB
19.872 kB
react
ChoiceGroup		 65.458 kB
21.462 kB
react
ChoiceGroupOption		 58.745 kB
19.351 kB
react
Coachmark		 92.652 kB
29.303 kB
react
Color		 7.789 kB
3.127 kB
react
ColorPicker		 134.856 kB
42.11 kB
react
ComboBox		 250.575 kB
71.498 kB
react
CommandBar		 201.749 kB
59.376 kB
react
ContextualMenu		 154.117 kB
47.553 kB
react
DatePicker		 183.167 kB
55.873 kB
react
DateTimeUtilities		 5.244 kB
1.849 kB
react
DetailsList		 229.851 kB
65.756 kB
react
Dialog		 210.048 kB
62.348 kB
react
Divider		 19.582 kB
6.838 kB
react
DocumentCard		 215.731 kB
63.643 kB
react
DragDrop		 8.343 kB
2.724 kB
react
DraggableZone		 34.28 kB
11.488 kB
react
Dropdown		 232.997 kB
67.932 kB
react
ExtendedPicker		 96.823 kB
27.867 kB
react
Fabric		 41.722 kB
14.34 kB
react
Facepile		 209.259 kB
62.362 kB
react
FloatingPicker		 240.753 kB
68.209 kB
react
FocusTrapZone		 16.978 kB
5.889 kB
react
FocusZone		 55.1 kB
17.451 kB
react
Grid		 179.13 kB
53.878 kB
react
GroupedList		 135.012 kB
40.665 kB
react
GroupedListV2		 122.629 kB
37.753 kB
react
HoverCard		 96.718 kB
30.685 kB
react
Icon		 51.863 kB
17.261 kB
react
Icons		 66.339 kB
24.386 kB
react
Image		 46.877 kB
15.692 kB
react
Keytip		 81.241 kB
26.671 kB
react
KeytipData		 14.032 kB
4.582 kB
react
KeytipLayer		 103.029 kB
31.896 kB
react
Keytips		 105.801 kB
32.898 kB
react
Label		 38.318 kB
13.239 kB
react
Layer		 48.077 kB
16.346 kB
react
Link		 39.659 kB
13.651 kB
react
List		 39.346 kB
12.454 kB
react
MarqueeSelection		 74.484 kB
22.396 kB
react
MessageBar		 189.276 kB
56.315 kB
react
Modal		 93.678 kB
30.217 kB
react
Nav		 186.713 kB
55.706 kB
react
OverflowSet		 33.336 kB
11.279 kB
react
Overlay		 40.879 kB
14.075 kB
react
Panel		 200.215 kB
59.319 kB
react
Persona		 114.513 kB
36.43 kB
react
PersonaCoin		 114.513 kB
36.43 kB
react
PersonaPresence		 58.052 kB
19.371 kB
react
Pickers		 297.712 kB
82.962 kB
react
Pivot		 187.61 kB
56.481 kB
react
Popup		 12.294 kB
4.195 kB
react
Positioning		 22.764 kB
7.683 kB
react
PositioningContainer		 73.415 kB
23.685 kB
react
ProgressIndicator		 39.471 kB
13.526 kB
react
Rating		 82.056 kB
26.085 kB
react
Fluent UI React (entire library)		 1.019 MB
283.07 kB
react
ResizeGroup		 13.338 kB
4.377 kB
react
ResponsiveMode		 8.13 kB
2.966 kB
react
ScrollablePane		 55.535 kB
17.715 kB
react
SearchBox		 187.512 kB
55.908 kB
react
SelectableOption		 724 B
413 B
react
SelectedItemsList		 231.238 kB
67.163 kB
react
Selection		 42.418 kB
12.26 kB
react
Separator		 35.359 kB
12.13 kB
react
Shimmer		 49.237 kB
16.255 kB
react
ShimmeredDetailsList		 240.633 kB
68.511 kB
react
Slider		 57.615 kB
19.194 kB
react
SpinButton		 191.185 kB
56.991 kB
react
Spinner		 41.753 kB
14.466 kB
react
Stack		 42.03 kB
14.386 kB
react
Sticky		 32.577 kB
10.488 kB
react
Styling		 46.033 kB
15.135 kB
react
SwatchColorPicker		 189.525 kB
57.405 kB
react
TeachingBubble		 204.527 kB
60.294 kB
react
Text		 36.886 kB
12.806 kB
react
TextField		 80.768 kB
25.3 kB
react
Theme		 43.486 kB
14.168 kB
react
ThemeGenerator		 12.384 kB
4.116 kB
react
TimePicker		 240.403 kB
69.296 kB
react
Toggle		 46.189 kB
15.954 kB
react
Tooltip		 87.013 kB
28.144 kB
react
Utilities		 82.932 kB
25.149 kB
react
Viewport		 23.872 kB
7.642 kB
react
WeeklyDayPicker		 101.318 kB
31.637 kB
react
WindowProvider		 1.059 kB
541 B
react-aria
ARIA - Default		 237 B
181 B
react-calendar-compat
Calendar Compat		 149.672 kB
39.914 kB
react-jsx-runtime
Classic Pragma		 1.101 kB
550 B
react-jsx-runtime
JSX Dev Runtime		 3.815 kB
1.659 kB
react-jsx-runtime
JSX Runtime		 4.411 kB
1.901 kB
react-motion
@fluentui/react-motion - createMotionComponent()		 3.995 kB
1.755 kB
react-motion
@fluentui/react-motion - createPresenceComponent()		 4.858 kB
2.128 kB
react-motion
@fluentui/react-motion - PresenceGroup		 1.727 kB
823 B
react-northstar
Accordion		 85.349 kB
26.59 kB
react-northstar
Alert		 87.403 kB
27.007 kB
react-northstar
Animation		 55.321 kB
17.925 kB
react-northstar
Attachment		 86.798 kB
26.786 kB
react-northstar
Avatar		 80.212 kB
24.722 kB
react-northstar
Box		 75.199 kB
23.887 kB
react-northstar
Breadcrumb		 79.874 kB
24.761 kB
react-northstar
Button		 83.113 kB
26.039 kB
react-northstar
Card		 82.648 kB
25.128 kB
react-northstar
Carousel		 105.135 kB
31.991 kB
react-northstar
Chat		 154.041 kB
46.993 kB
react-northstar
Checkbox		 79.743 kB
25.178 kB
react-northstar
Datepicker		 185.911 kB
56.955 kB
react-northstar
Debug		 8.801 kB
3.595 kB
react-northstar
Design		 36.579 kB
12.169 kB
react-northstar
Dialog		 112.024 kB
33.699 kB
react-northstar
Divider		 76.552 kB
24.203 kB
react-northstar
Dropdown		 198.154 kB
60.266 kB
react-northstar
Embed		 81.434 kB
25.518 kB
react-northstar
Flex		 47.702 kB
15.515 kB
react-northstar
Form		 92.484 kB
28.981 kB
react-northstar
Grid		 70.533 kB
22.346 kB
react-northstar
Header		 74.709 kB
23.565 kB
react-northstar
Image		 73.524 kB
23.403 kB
react-northstar
Input		 88.303 kB
27.904 kB
react-northstar
ItemLayout		 78.184 kB
24.52 kB
react-northstar
Label		 77.86 kB
24.51 kB
react-northstar
Layout		 75.345 kB
23.863 kB
react-northstar
List		 88.433 kB
27.704 kB
react-northstar
Loader		 78.568 kB
24.846 kB
react-northstar
Menu		 128.544 kB
40.789 kB
react-northstar
MenuButton		 162.956 kB
49.786 kB
react-northstar
Pill		 83.676 kB
26.177 kB
react-northstar
Popup		 135.262 kB
42.303 kB
react-northstar
Portal		 58.282 kB
18.951 kB
react-northstar
Provider		 93.081 kB
29.694 kB
react-northstar
RadioGroup		 83.229 kB
26.16 kB
react-northstar
Reaction		 77.231 kB
24.226 kB
react-northstar
Segment		 76.161 kB
23.977 kB
react-northstar
Skeleton		 77.719 kB
24.278 kB
react-northstar
Slider		 84.222 kB
26.834 kB
react-northstar
SplitButton		 178.194 kB
53.593 kB
react-northstar
Status		 76.224 kB
24.159 kB
react-northstar
SvgIcon		 36.797 kB
11.774 kB
react-northstar
Table		 80.752 kB
25.246 kB
react-northstar
Text		 73.999 kB
23.623 kB
react-northstar
TextArea		 74.201 kB
23.59 kB
react-northstar
Toolbar		 174.757 kB
52.981 kB
react-northstar
Tooltip		 109.909 kB
35.316 kB
react-northstar
Tree		 87.809 kB
27.301 kB
react-northstar
Video		 75.367 kB
23.861 kB
react-overflow
hooks only		 12.832 kB
4.828 kB
react-portal
Portal		 15.259 kB
5.319 kB
react-portal-compat
PortalCompatProvider		 8.386 kB
2.624 kB
react-positioning
usePositioning		 28.865 kB
10.146 kB
react-teaching-popover
TeachingPopover		 102.747 kB
30.737 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 35.835 kB
7.512 kB
react-theme
Teams: Light theme		 19.794 kB
5.602 kB
react-utilities
SSRProvider		 180 B
160 B
🤖 This report was generated against 19a140fd14d467d133acd7527e97484eae78aaf9

@github-actions GitHub Actions
Copy link

Pull request demo site: URL

@Hotell Hotell force-pushed the react-18/react-17-integration-tests branch from 4619b6e to 1f7dd3a Compare May 30, 2025 10:30
@Hotell Hotell force-pushed the react-18/react-17-integration-tests branch from 757827e to fe18bae Compare May 30, 2025 12:47
@Hotell Hotell requested a review from dmytrokirpa May 30, 2025 14:15
@Hotell Hotell marked this pull request as ready for review May 30, 2025 14:17
@Hotell Hotell requested review from a team as code owners May 30, 2025 14:17
@Hotell Hotell mentioned this pull request Jun 2, 2025
Merged
@Hotell Hotell closed this Jun 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dmytrokirpa dmytrokirpa

Assignees
No one assigned
Labels
CI Fluent UI react-components (v9) NX: core React 17 React 18
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Hotell @dmytrokirpa