chore: migrate v9 and tools projects to @swc/jest #32106

Hotell · 2024-07-25T08:26:48Z

Previous Behavior

New Behavior

NOTE: all the migrations have been done with nx generator and AST transforms ( local machine only )

unifies transpilation tooling for production and testing in all v9 projects
fixes mocks that were failing after migration
bumps dedent which was using invalid type definitions that forced us to use invalid ESM imports -> exposed thanks to swc

Perf

command - `nx run-many -t test -p tag:vNext`	time (ts-jest)	time (swc-jest)
current (default settings)	7m 15s	5m 20s / 𝚫 26% FASTER
runInBand (maxWorkers=1) / PR	4m 25s	4m 20s / 𝚫 2% FASTER

command - `nx run-many -t test -p 'scripts/*'`	time (ts-jest)	time (swc-jest)
current	18s	15s / 𝚫 16% FASTER

Related Issue(s)

Follows chore: improve jest speed on both local and CI #32096

fabricteam · 2024-07-25T08:38:43Z

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

fabricteam · 2024-07-25T08:41:35Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2024-07-25T08:42:36Z

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
ButtonMinimalPerf.default	88	85	1.04:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
RefMinimalPerf.default	130	111	1.17:1
ImageMinimalPerf.default	254	225	1.13:1
PortalMinimalPerf.default	93	82	1.13:1
RadioGroupMinimalPerf.default	293	262	1.12:1
AttachmentMinimalPerf.default	86	80	1.08:1
FlexMinimalPerf.default	170	158	1.08:1
LayoutMinimalPerf.default	210	194	1.08:1
LoaderMinimalPerf.default	194	181	1.07:1
TableMinimalPerf.default	245	229	1.07:1
AlertMinimalPerf.default	165	156	1.06:1
ChatDuplicateMessagesPerf.default	159	150	1.06:1
ChatMinimalPerf.default	475	448	1.06:1
CheckboxMinimalPerf.default	1185	1119	1.06:1
TextMinimalPerf.default	207	196	1.06:1
SegmentMinimalPerf.default	206	196	1.05:1
SliderMinimalPerf.default	775	735	1.05:1
ListMinimalPerf.default	325	312	1.04:1
TooltipMinimalPerf.default	1360	1309	1.04:1
AnimationMinimalPerf.default	310	300	1.03:1
ButtonSlotsPerf.default	331	322	1.03:1
ChatWithPopoverPerf.default	216	209	1.03:1
DropdownMinimalPerf.default	1475	1430	1.03:1
GridMinimalPerf.default	197	192	1.03:1
HeaderMinimalPerf.default	222	215	1.03:1
LabelMinimalPerf.default	229	223	1.03:1
SkeletonMinimalPerf.default	206	200	1.03:1
ToolbarMinimalPerf.default	555	538	1.03:1
DatepickerMinimalPerf.default	3932	3864	1.02:1
DividerMinimalPerf.default	210	205	1.02:1
ItemLayoutMinimalPerf.default	722	709	1.02:1
ProviderMergeThemesPerf.default	659	644	1.02:1
ProviderMinimalPerf.default	212	207	1.02:1
TreeWith60ListItems.default	93	91	1.02:1
CardMinimalPerf.default	314	311	1.01:1
CarouselMinimalPerf.default	262	259	1.01:1
TextAreaMinimalPerf.default	298	296	1.01:1
TreeMinimalPerf.default	492	487	1.01:1
AttachmentSlotsPerf.default	655	658	1:1
AvatarMinimalPerf.default	108	108	1:1
EmbedMinimalPerf.default	1900	1903	1:1
FormMinimalPerf.default	232	233	1:1
HeaderSlotsPerf.default	467	467	1:1
InputMinimalPerf.default	552	551	1:1
ListCommonPerf.default	405	405	1:1
IconMinimalPerf.default	392	393	1:1
CustomToolbarPrototype.default	1497	1502	1:1
DialogMinimalPerf.default	448	451	0.99:1
MenuButtonMinimalPerf.default	976	987	0.99:1
PopupMinimalPerf.default	362	365	0.99:1
SplitButtonMinimalPerf.default	2305	2321	0.99:1
TableManyItemsPerf.default	1122	1130	0.99:1
MenuMinimalPerf.default	521	532	0.98:1
ReactionMinimalPerf.default	215	220	0.98:1
DropdownManyItemsPerf.default	395	408	0.97:1
ListNestedPerf.default	324	333	0.97:1
ListWith60ListItems.default	375	385	0.97:1
RosterPerf.default	1570	1614	0.97:1
ButtonOverridesMissPerf.default	670	695	0.96:1
StatusMinimalPerf.default	396	413	0.96:1
VideoMinimalPerf.default	449	467	0.96:1
BoxMinimalPerf.default	190	200	0.95:1
AccordionMinimalPerf.default	81	87	0.93:1

fabricteam · 2024-07-25T08:43:17Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	33	37	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	640	646	5000
Button	mount	310	318	5000
Field	mount	1132	1135	5000
FluentProvider	mount	704	721	5000
FluentProviderWithTheme	mount	79	86	10
FluentProviderWithTheme	virtual-rerender	33	37	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	73	81	10
MakeStyles	mount	869	877	50000
Persona	mount	1801	1730	5000
SpinButton	mount	1439	1362	5000
SwatchPicker	mount	1641	1657	5000

fabricteam · 2024-07-25T08:43:41Z

📊 Bundle size report

✅ No changes found

fabricteam · 2024-07-25T08:43:51Z

🕵 FluentUIV0 No visual regressions between this PR and main

apps/react-18-tests-v9/jest.config.js

fabricteam · 2024-07-25T08:55:14Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	618	623	5000
Breadcrumb	mount	1659	1684	1000
Checkbox	mount	1690	1690	5000
CheckboxBase	mount	1495	1474	5000
ChoiceGroup	mount	3001	2925	5000
ComboBox	mount	670	664	1000
CommandBar	mount	6589	6567	1000
ContextualMenu	mount	13386	12253	1000
DefaultButton	mount	800	789	5000
DetailsRow	mount	2251	2219	5000
DetailsRowFast	mount	2202	2203	5000
DetailsRowNoStyles	mount	2037	2016	5000
Dialog	mount	2694	2755	1000
DocumentCardTitle	mount	232	230	1000
Dropdown	mount	1967	1976	5000
FocusTrapZone	mount	1148	1158	5000
FocusZone	mount	1113	1094	5000
GroupedList	mount	41935	41712	2
GroupedList	virtual-rerender	20004	20075	2
GroupedList	virtual-rerender-with-unmount	52247	51612	2
GroupedListV2	mount	234	229	2
GroupedListV2	virtual-rerender	212	215	2
GroupedListV2	virtual-rerender-with-unmount	255	233	2
IconButton	mount	1150	1139	5000
Label	mount	346	346	5000
Layer	mount	2793	2744	5000
Link	mount	395	389	5000
MenuButton	mount	958	957	5000
MessageBar	mount	21538	21454	5000
Nav	mount	1991	2022	1000
OverflowSet	mount	801	780	5000
Panel	mount	1841	1846	1000
Persona	mount	753	742	1000
Pivot	mount	891	868	1000
PrimaryButton	mount	934	920	5000
Rating	mount	4595	4624	5000
SearchBox	mount	907	913	5000
Shimmer	mount	1898	1899	5000
Slider	mount	1324	1338	5000
SpinButton	mount	2918	2986	5000
Spinner	mount	385	394	5000
SplitButton	mount	1847	1839	5000
Stack	mount	419	412	5000
StackWithIntrinsicChildren	mount	887	867	5000
StackWithTextChildren	mount	2759	2742	5000
SwatchColorPicker	mount	6313	6420	5000
TagPicker	mount	1468	1435	5000
Text	mount	405	384	5000
TextField	mount	946	951	5000
ThemeProvider	mount	854	843	5000
ThemeProvider	virtual-rerender	592	583	5000
ThemeProvider	virtual-rerender-with-unmount	1301	1338	5000
Toggle	mount	602	617	5000
buttonNative	mount	191	195	5000

…n with swc

…se valid .d.ts imports

…c and use valid .d.ts imports

packages/react-components/babel-preset-global-context/jest.config.js

Hotell added 4 commits July 25, 2024 10:23

chore: add tag to theme-designer app

87dafba

chore: migrate v9 projects to @swc/jest

04d5c61

chore: add @swc/jest to monorepo

2392c6d

test: fix failing test mock after migrating to swc

4299a9a

github-actions bot added this to the July Project Cycle Q3 2024 milestone Jul 25, 2024

Hotell changed the title ~~Dx/jest/migrate to swc~~ chore: migrate v9 projects to @swc/jest Jul 25, 2024

Hotell added Area: Testing Area: Build System Fluent UI react-components (v9) CI labels Jul 25, 2024

Hotell changed the title ~~chore: migrate v9 projects to @swc/jest~~ chore: migrate v9 and tools projects to @swc/jest Jul 25, 2024

chore: migrate tools projects to @swc/jest

930749a

fabricteam reviewed Jul 25, 2024

View reviewed changes

apps/react-18-tests-v9/jest.config.js Show resolved Hide resolved

Hotell added 5 commits July 25, 2024 11:06

fixup! test: fix failing test mock after migrating to swc

45185ce

chore: bumpt @types/dedent

e40e5d4

chore(addon-export-to-sandbox): enable esModuleInterop for TS to alig…

44dd009

…n with swc

chore: migrate to dedupe 1.x in order to properly transpile swc and u…

f9ebe44

…se valid .d.ts imports

fixup! chore: migrate to dedupe 1.x in order to properly transpile sw…

e115b28

…c and use valid .d.ts imports

Hotell marked this pull request as ready for review July 25, 2024 12:04

Hotell requested review from a team and Mitch-At-Work as code owners July 25, 2024 12:04

Hotell requested review from marcosmoura, a team and ms-acalzaretto as code owners July 25, 2024 12:04

marcosmoura reviewed Jul 25, 2024

View reviewed changes

packages/react-components/babel-preset-global-context/jest.config.js Show resolved Hide resolved

layershifter approved these changes Jul 25, 2024

View reviewed changes

marcosmoura approved these changes Jul 25, 2024

View reviewed changes

spmonahan approved these changes Jul 25, 2024

View reviewed changes

Hotell merged commit 35b98cf into microsoft:master Jul 26, 2024
23 checks passed

Hotell deleted the dx/jest/migrate-to-swc branch July 26, 2024 07:27

Hotell mentioned this pull request Jul 26, 2024

feat(workspace-plugin): update react-library generator jest config to use swc #32122

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: migrate v9 and tools projects to @swc/jest #32106

chore: migrate v9 and tools projects to @swc/jest #32106

Hotell commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

chore: migrate v9 and tools projects to @swc/jest #32106

chore: migrate v9 and tools projects to @swc/jest #32106

Conversation

Hotell commented Jul 25, 2024 • edited Loading

Previous Behavior

New Behavior

Related Issue(s)

fabricteam commented Jul 25, 2024 • edited Loading

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

fabricteam commented Jul 25, 2024 • edited Loading

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam commented Jul 25, 2024 • edited Loading

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

fabricteam commented Jul 25, 2024 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Jul 25, 2024 • edited Loading

📊 Bundle size report

fabricteam commented Jul 25, 2024 • edited Loading

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam commented Jul 25, 2024 • edited Loading

Perf Analysis (@fluentui/react)

Hotell commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

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

fabricteam commented Jul 25, 2024 •

edited

Loading

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

fabricteam commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

fabricteam commented Jul 25, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)