Remove Enzyme usage in places it's not needed #22437

ecraig12345 · 2022-04-08T23:09:23Z

Current Behavior

We're trying to move away from Enzyme, but it's still used in a lot of packages. Each of these packages will need to be updated to use a different enzyme adapter when we update to React 17.

Some of the packages that configure enzyme in their jest setup don't actually use it at all, or only have very minimal usage.

New Behavior

Remove enzyme setup from a few packages where enzyme isn't used at all
In 2 packages with very simple tests (react-icon-provider and react-window-provider), remove enzyme setup and port to testing-library
Add some comments and types in the jest setup code and helpers

This was part of the React 17 upgrade attempt (#22326) but can be merged now, and will simplify the actual upgrade PR a bit.

Related Issue(s)

Part of #21663

codesandbox-ci · 2022-04-08T23:14:41Z

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 8a84c8b:

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

fabricteam · 2022-04-08T23:24:23Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1254	1288	5000
Button	mount	776	779	5000
FluentProvider	mount	2259	2164	5000
FluentProviderWithTheme	mount	355	381	10
FluentProviderWithTheme	virtual-rerender	379	342	10
FluentProviderWithTheme	virtual-rerender-with-unmount	418	452	10
MakeStyles	mount	1961	1990	50000

size-auditor · 2022-04-08T23:24:53Z

Asset size changes

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

Baseline commit: 69bcdf2f52fe6a8bf7d5f7ca71be74d753202356 (build)

fabricteam · 2022-04-08T23:31:59Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`priority-overflow` createOverflowManager	`2.836 kB` `1.209 kB`
`react-accordion` Accordion (including children components)	`74.792 kB` `22.516 kB`
`react-avatar` Avatar	`45.142 kB` `13.111 kB`
`react-badge` Badge	`20.895 kB` `6.567 kB`
`react-badge` CounterBadge	`21.848 kB` `6.883 kB`
`react-badge` PresenceBadge	`21.951 kB` `6.565 kB`
`react-button` Button	`28.013 kB` `8.059 kB`
`react-button` CompoundButton	`33.508 kB` `9.092 kB`
`react-button` MenuButton	`29.796 kB` `8.665 kB`
`react-button` SplitButton	`36.268 kB` `9.863 kB`
`react-button` ToggleButton	`37.395 kB` `8.68 kB`
`react-card` Card - All	`53.619 kB` `15.372 kB`
`react-card` Card	`48.904 kB` `14.089 kB`
`react-card` CardFooter	`7.686 kB` `3.264 kB`
`react-card` CardHeader	`9.251 kB` `3.78 kB`
`react-card` CardPreview	`7.658 kB` `3.291 kB`
`react-combobox` Combobox	`54.566 kB` `18.884 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`176.089 kB` `49.113 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.601 kB` `10.668 kB`
`react-divider` Divider	`15.385 kB` `5.539 kB`
`react-image` Image	`10.109 kB` `3.958 kB`
`react-input` Input	`21.661 kB` `7.18 kB`
`react-label` Label	`8.371 kB` `3.504 kB`
`react-link` Link	`11.106 kB` `4.507 kB`
`react-menu` Menu (including children components)	`105.852 kB` `32.433 kB`
`react-menu` Menu (including selectable components)	`109.031 kB` `32.897 kB`
`react-popover` Popover	`96.787 kB` `29.559 kB`
`react-portal` Portal	`6.272 kB` `2.17 kB`
`react-positioning` usePopper	`23.21 kB` `8.084 kB`
`react-priority-overflow` hooks only	`10.606 kB` `4.087 kB`
`react-provider` FluentProvider	`14.009 kB` `5.25 kB`
`react-select` Select	`16.562 kB` `6.264 kB`
`react-slider` Slider	`25.549 kB` `8.25 kB`
`react-spinner` Spinner	`16.459 kB` `5.549 kB`
`react-switch` Switch	`24.279 kB` `8.001 kB`
`react-text` Text - Default	`10.797 kB` `4.233 kB`
`react-text` Text - Wrappers	`14.113 kB` `4.576 kB`
`react-textarea` Textarea	`20.602 kB` `7.033 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.676 kB` `6.604 kB`
`react-theme` Teams: Light theme	`18.492 kB` `5.296 kB`
`react-tooltip` Tooltip	`42.837 kB` `14.727 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 69bcdf2f52fe6a8bf7d5f7ca71be74d753202356}

fabricteam · 2022-04-08T23:33:09Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	125	102	1.23:1
ButtonOverridesMissPerf.default	1321	1098	1.2:1
GridMinimalPerf.default	282	236	1.19:1
DividerMinimalPerf.default	294	254	1.16:1
LayoutMinimalPerf.default	297	261	1.14:1
BoxMinimalPerf.default	270	242	1.12:1
CarouselMinimalPerf.default	394	353	1.12:1
RefMinimalPerf.default	217	194	1.12:1
ImageMinimalPerf.default	295	265	1.11:1
AttachmentSlotsPerf.default	934	862	1.08:1
PopupMinimalPerf.default	561	519	1.08:1
VideoMinimalPerf.default	574	532	1.08:1
TooltipMinimalPerf.default	844	791	1.07:1
ButtonMinimalPerf.default	143	135	1.06:1
LabelMinimalPerf.default	325	308	1.06:1
PortalMinimalPerf.default	150	141	1.06:1
ProviderMergeThemesPerf.default	1099	1037	1.06:1
ToolbarMinimalPerf.default	806	763	1.06:1
ButtonSlotsPerf.default	463	441	1.05:1
CheckboxMinimalPerf.default	2171	2072	1.05:1
IconMinimalPerf.default	533	507	1.05:1
AlertMinimalPerf.default	218	210	1.04:1
LoaderMinimalPerf.default	530	511	1.04:1
AnimationMinimalPerf.default	465	451	1.03:1
DatepickerMinimalPerf.default	4650	4579	1.02:1
RadioGroupMinimalPerf.default	371	365	1.02:1
TextMinimalPerf.default	280	275	1.02:1
TreeMinimalPerf.default	674	658	1.02:1
CardMinimalPerf.default	413	408	1.01:1
FlexMinimalPerf.default	232	229	1.01:1
ChatDuplicateMessagesPerf.default	250	251	1:1
DropdownManyItemsPerf.default	510	510	1:1
HeaderSlotsPerf.default	557	559	1:1
MenuMinimalPerf.default	694	692	1:1
ReactionMinimalPerf.default	304	305	1:1
SkeletonMinimalPerf.default	288	287	1:1
StatusMinimalPerf.default	518	518	1:1
TextAreaMinimalPerf.default	405	404	1:1
TreeWith60ListItems.default	146	146	1:1
AttachmentMinimalPerf.default	106	107	0.99:1
DropdownMinimalPerf.default	2443	2468	0.99:1
FormMinimalPerf.default	322	324	0.99:1
ChatMinimalPerf.default	564	576	0.98:1
ItemLayoutMinimalPerf.default	939	958	0.98:1
MenuButtonMinimalPerf.default	1384	1406	0.98:1
ListCommonPerf.default	495	510	0.97:1
SplitButtonMinimalPerf.default	3497	3608	0.97:1
TableManyItemsPerf.default	1471	1519	0.97:1
AvatarMinimalPerf.default	147	153	0.96:1
EmbedMinimalPerf.default	3273	3401	0.96:1
InputMinimalPerf.default	976	1012	0.96:1
ListNestedPerf.default	432	448	0.96:1
CustomToolbarPrototype.default	2123	2202	0.96:1
DialogMinimalPerf.default	566	594	0.95:1
HeaderMinimalPerf.default	287	306	0.94:1
SegmentMinimalPerf.default	256	275	0.93:1
ChatWithPopoverPerf.default	289	315	0.92:1
RosterPerf.default	861	934	0.92:1
ListMinimalPerf.default	385	423	0.91:1
ListWith60ListItems.default	486	543	0.9:1
ProviderMinimalPerf.default	295	327	0.9:1
SliderMinimalPerf.default	1263	1420	0.89:1
TableMinimalPerf.default	285	320	0.89:1

fabricteam · 2022-04-08T23:39:46Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
TeachingBubble	mount	45713	79812	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	787	717	5000
Breadcrumb	mount	2126	2141	1000
Checkbox	mount	1291	1173	5000
CheckboxBase	mount	964	953	5000
ChoiceGroup	mount	3658	3812	5000
ComboBox	mount	856	869	1000
CommandBar	mount	8465	8359	1000
ContextualMenu	mount	10020	10292	1000
DefaultButton	mount	964	896	5000
DetailsRow	mount	3163	3074	5000
DetailsRowFast	mount	3066	3208	5000
DetailsRowNoStyles	mount	2838	2940	5000
Dialog	mount	1939	1881	1000
DocumentCardTitle	mount	137	140	1000
Dropdown	mount	2583	2738	5000
FocusTrapZone	mount	1394	1400	5000
FocusZone	mount	1371	1387	5000
IconButton	mount	1396	1506	5000
Label	mount	294	262	5000
Layer	mount	2401	2389	5000
Link	mount	360	440	5000
MenuButton	mount	1194	1220	5000
MessageBar	mount	1587	1716	5000
Nav	mount	2563	2572	1000
OverflowSet	mount	951	950	5000
Panel	mount	1767	1776	1000
Persona	mount	852	878	1000
Pivot	mount	1246	1104	1000
PrimaryButton	mount	1062	1086	5000
Rating	mount	6313	6047	5000
SearchBox	mount	981	1036	5000
Shimmer	mount	2097	1922	5000
Slider	mount	1543	1672	5000
SpinButton	mount	4157	3964	5000
Spinner	mount	385	327	5000
SplitButton	mount	2477	2620	5000
Stack	mount	399	397	5000
StackWithIntrinsicChildren	mount	1957	1919	5000
StackWithTextChildren	mount	4067	4177	5000
SwatchColorPicker	mount	9577	9217	5000
TagPicker	mount	2101	2329	5000
TeachingBubble	mount	45713	79812	5000	Possible regression
Text	mount	318	370	5000
TextField	mount	1149	1112	5000
ThemeProvider	mount	969	1002	5000
ThemeProvider	virtual-rerender	483	499	5000
ThemeProvider	virtual-rerender-with-unmount	1451	1525	5000
Toggle	mount	647	700	5000
buttonNative	mount	108	125	5000

ecraig12345 · 2022-04-09T00:23:35Z

/azp run

azure-pipelines · 2022-04-09T00:23:53Z

Azure Pipelines successfully started running 3 pipeline(s).

ecraig12345 added 3 commits April 8, 2022 16:03

remove unneeded enzyme setup

832ae72

remove redundant requestAnimationFrame mock

e463ca2

comments/types for jest config helpers

8a84c8b

ecraig12345 requested review from a team, dzearing and khmakoto as code owners April 8, 2022 23:09

msft-fluent-ui-bot assigned Hotell Apr 8, 2022

ecraig12345 added Area: Testing Area: Build System labels Apr 8, 2022

ecraig12345 mentioned this pull request Apr 8, 2022

[Epic]: Migrate from enzyme to testing-library #21663

Closed

12 tasks

ecraig12345 mentioned this pull request Apr 8, 2022

TESTING ONLY - update to React 17 #22326

Closed

layershifter approved these changes Apr 9, 2022

View reviewed changes

Hotell removed their assignment Apr 11, 2022

Hotell approved these changes Apr 11, 2022

View reviewed changes

TristanWatanabe approved these changes Apr 11, 2022

View reviewed changes

khmakoto approved these changes Apr 11, 2022

View reviewed changes

ecraig12345 merged commit 4bd9ec6 into microsoft:master Apr 11, 2022

ecraig12345 deleted the jest-setup branch April 11, 2022 19:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove Enzyme usage in places it's not needed #22437

Remove Enzyme usage in places it's not needed #22437

ecraig12345 commented Apr 8, 2022

codesandbox-ci bot commented Apr 8, 2022

fabricteam commented Apr 8, 2022 •

edited

Loading

size-auditor bot commented Apr 8, 2022 •

edited

Loading

fabricteam commented Apr 8, 2022 •

edited

Loading

fabricteam commented Apr 8, 2022 •

edited

Loading

fabricteam commented Apr 8, 2022 •

edited

Loading

ecraig12345 commented Apr 9, 2022

azure-pipelines bot commented Apr 9, 2022

Remove Enzyme usage in places it's not needed #22437

Remove Enzyme usage in places it's not needed #22437

Conversation

ecraig12345 commented Apr 8, 2022

Current Behavior

New Behavior

Related Issue(s)

codesandbox-ci bot commented Apr 8, 2022

fabricteam commented Apr 8, 2022 • edited Loading

Perf Analysis (@fluentui/react-components)

size-auditor bot commented Apr 8, 2022 • edited Loading

Asset size changes

fabricteam commented Apr 8, 2022 • edited Loading

📊 Bundle size report

fabricteam commented Apr 8, 2022 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Apr 8, 2022 • edited Loading

Perf Analysis (@fluentui/react)

ecraig12345 commented Apr 9, 2022

azure-pipelines bot commented Apr 9, 2022

fabricteam commented Apr 8, 2022 •

edited

Loading

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

size-auditor bot commented Apr 8, 2022 •

edited

Loading

fabricteam commented Apr 8, 2022 •

edited

Loading

fabricteam commented Apr 8, 2022 •

edited

Loading

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

fabricteam commented Apr 8, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)