chore: migrate monorepo to jest 28 #26958

Hotell · 2023-02-24T13:40:14Z

Previous Behavior

we use jest 27

New Behavior

we now follow CDA 100% regarding jest support 🫡
jest 28 announcement https://jestjs.io/blog/2022/04/25/jest-28
migration notes https://jestjs.io/docs/28.x/upgrading-to-jest28
some v8 packages tsconfig.json now have ES2015.Collection as part of their lib. This is necessary because we don't use solution configs besides v9 and jest 28 types contain ES2015++ types. Without this build will fail
react/utilities/test-utilities - refactor to properly expose public API and follow standards for imports. This issue was exposed thanks to jest 28 and export maps support 🙌

Related Issue(s)

Fixes partially Roadmap: v-build 22/23 #25488

fabricteam · 2023-02-24T13:59:20Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`3.194 kB` `1.314 kB`
`react-accordion` Accordion (including children components)	`85.876 kB` `26.019 kB`
`react-alert` Alert	`87.465 kB` `21.569 kB`
`react-avatar` Avatar	`51.192 kB` `14.043 kB`
`react-avatar` AvatarGroup	`15.42 kB` `6.167 kB`
`react-avatar` AvatarGroupItem	`67.414 kB` `18.551 kB`
`react-badge` Badge	`23.113 kB` `7.069 kB`
`react-badge` CounterBadge	`24.002 kB` `7.374 kB`
`react-badge` PresenceBadge	`25.438 kB` `7.254 kB`
`react-button` Button	`36.888 kB` `9.412 kB`
`react-button` CompoundButton	`44.063 kB` `10.885 kB`
`react-button` MenuButton	`41.568 kB` `10.742 kB`
`react-button` SplitButton	`49.997 kB` `12.321 kB`
`react-button` ToggleButton	`55.252 kB` `11.331 kB`
`react-card` Card - All	`83.548 kB` `23.894 kB`
`react-card` Card	`78.317 kB` `22.433 kB`
`react-card` CardFooter	`9.045 kB` `3.806 kB`
`react-card` CardHeader	`10.984 kB` `4.509 kB`
`react-card` CardPreview	`9.852 kB` `4.159 kB`
`react-checkbox` Checkbox	`33.091 kB` `10.319 kB`
`react-checkbox` CheckboxField	`39.996 kB` `12.206 kB`
`react-combobox` Combobox (including child components)	`85.289 kB` `27.363 kB`
`react-combobox` ComboboxField	`81.706 kB` `27.152 kB`
`react-combobox` Dropdown (including child components)	`83.976 kB` `27.116 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`64.09 kB` `17.544 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`201.998 kB` `56.27 kB`
`react-components` react-components: FluentProvider & webLightTheme	`35.049 kB` `11.533 kB`
`react-dialog` Dialog (including children components)	`89.719 kB` `26.685 kB`
`react-divider` Divider	`17.11 kB` `6.18 kB`
`react-field` Field	`17.673 kB` `6.543 kB`
`react-image` Image	`11.259 kB` `4.473 kB`
`react-infobutton` InfoButton	`127.204 kB` `38.739 kB`
`react-input` Input	`22.94 kB` `7.214 kB`
`react-input` InputField	`32.819 kB` `10.111 kB`
`react-label` Label	`9.822 kB` `4.066 kB`
`react-link` Link	`12.306 kB` `5.073 kB`
`react-menu` Menu (including children components)	`126.535 kB` `38.735 kB`
`react-menu` Menu (including selectable components)	`129.604 kB` `39.248 kB`
`react-overflow` hooks only	`11.214 kB` `4.271 kB`
`react-persona` Persona	`58.207 kB` `15.986 kB`
`react-popover` Popover	`114.277 kB` `35.179 kB`
`react-portal` Portal	`11.377 kB` `4.179 kB`
`react-portal-compat` PortalCompatProvider	`6.324 kB` `2.129 kB`
`react-positioning` usePositioning	`22.985 kB` `8.528 kB`
`react-progress` ProgressBar	`13.59 kB` `5.24 kB`
`react-progress` ProgressField	`23.885 kB` `8.385 kB`
`react-provider` FluentProvider	`17.116 kB` `6.332 kB`
`react-radio` Radio	`32.676 kB` `10.616 kB`
`react-radio` RadioGroup	`14.885 kB` `5.933 kB`
`react-radio` RadioGroupField	`24.963 kB` `9.07 kB`
`react-select` Select	`24.145 kB` `8.271 kB`
`react-select` SelectField	`33.384 kB` `10.779 kB`
`react-slider` Slider	`33.091 kB` `10.555 kB`
`react-slider` SliderField	`42.922 kB` `13.465 kB`
`react-spinbutton` SpinButton	`32.83 kB` `9.864 kB`
`react-spinbutton` SpinButtonField	`41.766 kB` `12.254 kB`
`react-spinner` Spinner	`20.62 kB` `6.682 kB`
`react-switch` Switch	`28.225 kB` `8.755 kB`
`react-switch` SwitchField	`35.01 kB` `10.655 kB`
`react-table` DataGrid	`143.646 kB` `39.157 kB`
`react-table` Table (Primitives only)	`43.776 kB` `12.063 kB`
`react-table` Table as DataGrid	`134.4 kB` `34.514 kB`
`react-table` Table (Selection only)	`82.316 kB` `20.576 kB`
`react-table` Table (Sort only)	`81.637 kB` `20.386 kB`
`react-text` Text - Default	`12.261 kB` `4.819 kB`
`react-text` Text - Wrappers	`15.571 kB` `5.23 kB`
`react-textarea` Textarea	`26.336 kB` `8.585 kB`
`react-textarea` TextareaField	`36.537 kB` `11.504 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`30.908 kB` `6.714 kB`
`react-theme` Teams: Light theme	`17.776 kB` `5.141 kB`
`react-tooltip` Tooltip	`46.095 kB` `16.14 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against d0ed2a639c67c59beba2225f7894376718f4c167}

size-auditor · 2023-02-24T14:05:44Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: d0ed2a639c67c59beba2225f7894376718f4c167 (build)

codesandbox-ci · 2023-02-24T14:07:40Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0368cfa:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2023-02-24T14:09:59Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1326	1307	5000
Button	mount	934	949	5000
Field	mount	2090	2005	5000
FluentProvider	mount	1603	1637	5000
FluentProviderWithTheme	mount	623	639	10
FluentProviderWithTheme	virtual-rerender	604	597	10
FluentProviderWithTheme	virtual-rerender-with-unmount	617	630	10
InfoButton	mount	564	568	5000
MakeStyles	mount	1936	1928	50000
Persona	mount	3049	3012	5000
SpinButton	mount	2414	2469	5000

fabricteam · 2023-02-24T14:18:14Z

Perf Analysis (`@fluentui/react-northstar`)

⚠️ No perf measurements available

fabricteam · 2023-02-24T14:45:39Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1183	1195	5000
Breadcrumb	mount	2948	2946	1000
Checkbox	mount	2632	2657	5000
CheckboxBase	mount	2338	2360	5000
ChoiceGroup	mount	4405	4459	5000
ComboBox	mount	1249	1235	1000
CommandBar	mount	9450	9501	1000
ContextualMenu	mount	13526	13515	1000
DefaultButton	mount	1374	1402	5000
DetailsRow	mount	3423	3448	5000
DetailsRowFast	mount	3507	3450	5000
DetailsRowNoStyles	mount	3330	3277	5000
Dialog	mount	3072	3101	1000
DocumentCardTitle	mount	574	579	1000
Dropdown	mount	3204	3212	5000
FocusTrapZone	mount	1961	1966	5000
FocusZone	mount	1956	1954	5000
GroupedList	mount	50944	57691	2
GroupedList	virtual-rerender	23737	24198	2
GroupedList	virtual-rerender-with-unmount	92112	92841	2
GroupedListV2	mount	549	567	2
GroupedListV2	virtual-rerender	550	530	2
GroupedListV2	virtual-rerender-with-unmount	547	556	2
IconButton	mount	1882	1891	5000
Label	mount	722	724	5000
Layer	mount	4275	4331	5000
Link	mount	837	853	5000
MenuButton	mount	1689	1697	5000
MessageBar	mount	2270	2261	5000
Nav	mount	3226	3253	1000
OverflowSet	mount	1375	1363	5000
Panel	mount	2542	2543	1000
Persona	mount	1319	1297	1000
Pivot	mount	1637	1621	1000
PrimaryButton	mount	1519	1528	5000
Rating	mount	6918	6904	5000
SearchBox	mount	1545	1517	5000
Shimmer	mount	2854	2894	5000
Slider	mount	2107	2072	5000
SpinButton	mount	4611	4607	5000
Spinner	mount	790	780	5000
SplitButton	mount	3059	3094	5000
Stack	mount	819	820	5000
StackWithIntrinsicChildren	mount	2279	2319	5000
StackWithTextChildren	mount	4772	4728	5000
SwatchColorPicker	mount	10234	10252	5000
TagPicker	mount	2621	2565	5000
TeachingBubble	mount	82308	82197	5000
Text	mount	786	792	5000
TextField	mount	1586	1597	5000
ThemeProvider	mount	1491	1535	5000
ThemeProvider	virtual-rerender	1073	1090	5000
ThemeProvider	virtual-rerender-with-unmount	2147	2134	5000
Toggle	mount	1090	1117	5000
buttonNative	mount	547	529	5000

fabricteam · 2023-02-24T14:53:42Z

🕵 fluentuiv9 No visual regressions between this PR and main

change/@fluentui-cra-template-f10eef6a-1b73-419f-a2e7-7dc197717334.json

…ge to make test pass with jest 28

fabricteam · 2023-02-28T07:32:37Z

🕵 fluentuiv8 No visual regressions between this PR and main

change/@fluentui-cra-template-f10eef6a-1b73-419f-a2e7-7dc197717334.json

msft-fluent-ui-bot assigned Hotell Feb 24, 2023

github-actions bot added this to the February Project Cycle Q1 2023 milestone Feb 24, 2023

Hotell mentioned this pull request Feb 24, 2023

ci: use nx for task orchestration for build/test/lint/type-check #26928

Draft

3 tasks

Hotell force-pushed the hotell/jest/28 branch from c6cf9f9 to 79ce5ce Compare February 24, 2023 13:48

Hotell changed the title ~~Hotell/jest/28~~ chore: migrate monorepo to jest 28 Feb 24, 2023

Hotell added the Area: Build System label Feb 24, 2023

Hotell mentioned this pull request Feb 24, 2023

Roadmap: v-build 22/23 #25488

Open

28 tasks

Hotell marked this pull request as ready for review February 24, 2023 15:22

Hotell requested review from a team, khmakoto, behowell, dzearing and sopranopillow as code owners February 24, 2023 15:23

khmakoto approved these changes Feb 24, 2023

View reviewed changes

change/@fluentui-cra-template-f10eef6a-1b73-419f-a2e7-7dc197717334.json Show resolved Hide resolved

layershifter approved these changes Feb 27, 2023

View reviewed changes

TristanWatanabe approved these changes Feb 27, 2023

View reviewed changes

Hotell added 4 commits February 28, 2023 08:06

chore: migrate monorepo to jest 28

c0ebcf4

feat(test-utilities): move private test/ helpers from utilities packa…

2b6f248

…ge to make test pass with jest 28

generate changefiles

aa3bee4

chore: bump/dedupe babel family of packages

0368cfa

Hotell force-pushed the hotell/jest/28 branch from ccbe0b1 to 0368cfa Compare February 28, 2023 07:07

fabricteam reviewed Feb 28, 2023

View reviewed changes

change/@fluentui-cra-template-f10eef6a-1b73-419f-a2e7-7dc197717334.json Show resolved Hide resolved

ling1726 approved these changes Feb 28, 2023

View reviewed changes

Hotell merged commit dd0f5b7 into microsoft:master Feb 28, 2023

Hotell deleted the hotell/jest/28 branch February 28, 2023 15:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: migrate monorepo to jest 28 #26958

chore: migrate monorepo to jest 28 #26958

Hotell commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

size-auditor bot commented Feb 24, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023

fabricteam commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 28, 2023

chore: migrate monorepo to jest 28 #26958

chore: migrate monorepo to jest 28 #26958

Conversation

Hotell commented Feb 24, 2023 • edited Loading

Previous Behavior

New Behavior

Related Issue(s)

fabricteam commented Feb 24, 2023 • edited Loading

📊 Bundle size report

size-auditor bot commented Feb 24, 2023 • edited Loading

Asset size changes

codesandbox-ci bot commented Feb 24, 2023 • edited Loading

fabricteam commented Feb 24, 2023 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Feb 24, 2023

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Feb 24, 2023 • edited Loading

Perf Analysis (@fluentui/react)

fabricteam commented Feb 24, 2023 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam commented Feb 28, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

Hotell commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

size-auditor bot commented Feb 24, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 24, 2023 •

edited

Loading

fabricteam commented Feb 24, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Feb 24, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Feb 24, 2023 •

edited

Loading