From 5e14714360aca5d3f7605f19a3761ff3c0eb0072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 26 Jun 2024 18:34:05 +0200
Subject: [PATCH] Remove createMount test util

---
 packages/mui-base/src/Badge/Badge.test.tsx    |   4 +-
 packages/mui-base/src/Button/Button.test.tsx  |   4 +-
 .../src/FormControl/FormControl.test.tsx      |   4 +-
 packages/mui-base/src/Input/Input.test.tsx    |   4 +-
 packages/mui-base/src/Menu/Menu.test.tsx      |   8 -
 .../src/MenuButton/MenuButton.test.tsx        |   9 +-
 .../mui-base/src/MenuItem/MenuItem.test.tsx   |   7 +-
 packages/mui-base/src/Modal/Modal.test.tsx    |   4 +-
 packages/mui-base/src/Option/Option.test.tsx  |  19 +-
 .../src/OptionGroup/OptionGroup.test.tsx      |   4 +-
 packages/mui-base/src/Popper/Popper.test.tsx  |   4 +-
 packages/mui-base/src/Select/Select.test.tsx  |   3 -
 packages/mui-base/src/Slider/Slider.test.tsx  |   4 +-
 .../mui-base/src/Snackbar/Snackbar.test.tsx   |   5 +-
 packages/mui-base/src/Switch/Switch.test.tsx  |   4 +-
 packages/mui-base/src/Tab/Tab.test.tsx        |  19 +-
 .../mui-base/src/TabPanel/TabPanel.test.tsx   |   7 +-
 .../TablePagination/TablePagination.test.tsx  |  13 +-
 packages/mui-base/src/Tabs/Tabs.test.tsx      |   4 +-
 .../mui-base/src/TabsList/TabsList.test.tsx   |  19 +-
 .../TextareaAutosize.test.tsx                 |  11 +-
 .../Unstable_NumberInput/NumberInput.test.tsx |   4 +-
 .../src/Unstable_Popup/Popup.test.tsx         |   4 +-
 packages/mui-joy/src/Table/Table.test.tsx     |   1 -
 packages/mui-material/src/Menu/Menu.test.js   |  36 ++-
 .../mui-material/src/Popover/Popover.test.js  |  61 +++--
 .../src/StylesProvider/StylesProvider.test.js |  53 +++--
 .../src/makeStyles/makeStyles.test.js         | 215 +++++++++---------
 packages/test-utils/src/createMount.tsx       | 136 -----------
 .../src/findOutermostIntrinsic.test.js        |  68 ------
 .../test-utils/src/findOutermostIntrinsic.ts  |  19 --
 packages/test-utils/src/index.ts              |   2 -
 32 files changed, 202 insertions(+), 557 deletions(-)
 delete mode 100644 packages/test-utils/src/createMount.tsx
 delete mode 100644 packages/test-utils/src/findOutermostIntrinsic.test.js
 delete mode 100644 packages/test-utils/src/findOutermostIntrinsic.ts

diff --git a/packages/mui-base/src/Badge/Badge.test.tsx b/packages/mui-base/src/Badge/Badge.test.tsx
index 141121f541adf1..8da064ca4ac42b 100644
--- a/packages/mui-base/src/Badge/Badge.test.tsx
+++ b/packages/mui-base/src/Badge/Badge.test.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { createRenderer, createMount } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import { Badge, badgeClasses as classes } from '@mui/base/Badge';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<Badge />', () => {
   const { render } = createRenderer();
-  const mount = createMount();
 
   describeConformanceUnstyled(
     <Badge>
@@ -15,7 +14,6 @@ describe('<Badge />', () => {
       classes,
       inheritComponent: 'span',
       render,
-      mount,
       refInstanceof: window.HTMLSpanElement,
       testComponentPropWith: 'div',
       slots: {
diff --git a/packages/mui-base/src/Button/Button.test.tsx b/packages/mui-base/src/Button/Button.test.tsx
index 2fabf5e4a81cb7..deeedfa34b9a73 100644
--- a/packages/mui-base/src/Button/Button.test.tsx
+++ b/packages/mui-base/src/Button/Button.test.tsx
@@ -1,18 +1,16 @@
 import * as React from 'react';
-import { act, createMount, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { Button, buttonClasses } from '@mui/base/Button';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<Button />', () => {
-  const mount = createMount();
   const { render, renderToString } = createRenderer();
 
   describeConformanceUnstyled(<Button />, () => ({
     inheritComponent: 'button',
     render,
-    mount,
     refInstanceof: window.HTMLButtonElement,
     testComponentPropWith: 'span',
     slots: {
diff --git a/packages/mui-base/src/FormControl/FormControl.test.tsx b/packages/mui-base/src/FormControl/FormControl.test.tsx
index 5556594730bd10..f1caadb2519856 100644
--- a/packages/mui-base/src/FormControl/FormControl.test.tsx
+++ b/packages/mui-base/src/FormControl/FormControl.test.tsx
@@ -1,18 +1,16 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createMount, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui-internal/test-utils';
 import { FormControl, formControlClasses, useFormControlContext } from '@mui/base/FormControl';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<FormControl />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   describeConformanceUnstyled(<FormControl />, () => ({
     inheritComponent: 'div',
     render,
-    mount,
     refInstanceof: window.HTMLDivElement,
     testComponentPropWith: 'div',
     slots: {
diff --git a/packages/mui-base/src/Input/Input.test.tsx b/packages/mui-base/src/Input/Input.test.tsx
index 9b6ab632a816d3..be2fff11a824fd 100644
--- a/packages/mui-base/src/Input/Input.test.tsx
+++ b/packages/mui-base/src/Input/Input.test.tsx
@@ -1,19 +1,17 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { createMount, createRenderer, fireEvent, screen, act } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent, screen, act } from '@mui-internal/test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { Input, inputClasses, InputOwnerState } from '@mui/base/Input';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<Input />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   describeConformanceUnstyled(<Input />, () => ({
     inheritComponent: 'div',
     render,
-    mount,
     refInstanceof: window.HTMLDivElement,
     testComponentPropWith: 'div',
     slots: {
diff --git a/packages/mui-base/src/Menu/Menu.test.tsx b/packages/mui-base/src/Menu/Menu.test.tsx
index 98075cc60ac684..a153bc874dce18 100644
--- a/packages/mui-base/src/Menu/Menu.test.tsx
+++ b/packages/mui-base/src/Menu/Menu.test.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import {
-  createMount,
   createRenderer,
   fireEvent,
   act,
@@ -27,7 +26,6 @@ const testContext: DropdownContextValue = {
 };
 
 describe('<Menu />', () => {
-  const mount = createMount();
   const { render: internalRender } = createRenderer();
 
   async function render(
@@ -46,12 +44,6 @@ describe('<Menu />', () => {
         <DropdownContext.Provider value={testContext}>{node}</DropdownContext.Provider>,
       );
     },
-    mount: (node: React.ReactNode) => {
-      const wrapper = mount(
-        <DropdownContext.Provider value={testContext}>{node}</DropdownContext.Provider>,
-      );
-      return wrapper.childAt(0);
-    },
     refInstanceof: window.HTMLDivElement,
     slots: {
       root: {
diff --git a/packages/mui-base/src/MenuButton/MenuButton.test.tsx b/packages/mui-base/src/MenuButton/MenuButton.test.tsx
index fa1fdbf1cf676b..cf02521e17369e 100644
--- a/packages/mui-base/src/MenuButton/MenuButton.test.tsx
+++ b/packages/mui-base/src/MenuButton/MenuButton.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
-import { act, createMount, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui-internal/test-utils';
 import { MenuButton, menuButtonClasses } from '@mui/base/MenuButton';
 import { DropdownContext, DropdownContextValue, DropdownActionTypes } from '@mui/base/useDropdown';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
@@ -21,7 +21,6 @@ const testContext: DropdownContextValue = {
 };
 
 describe('<MenuButton />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   describeConformanceUnstyled(<MenuButton />, () => ({
@@ -31,12 +30,6 @@ describe('<MenuButton />', () => {
         <DropdownContext.Provider value={testContext}>{node}</DropdownContext.Provider>,
       );
     },
-    mount: (node: React.ReactNode) => {
-      const wrapper = mount(
-        <DropdownContext.Provider value={testContext}>{node}</DropdownContext.Provider>,
-      );
-      return wrapper.childAt(0);
-    },
     refInstanceof: window.HTMLButtonElement,
     slots: {
       root: {
diff --git a/packages/mui-base/src/MenuItem/MenuItem.test.tsx b/packages/mui-base/src/MenuItem/MenuItem.test.tsx
index 52498ff641935b..55d30ff1644eca 100644
--- a/packages/mui-base/src/MenuItem/MenuItem.test.tsx
+++ b/packages/mui-base/src/MenuItem/MenuItem.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import { MenuItem, menuItemClasses } from '@mui/base/MenuItem';
 import { MenuProvider } from '@mui/base/useMenu';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
@@ -23,7 +23,6 @@ const testContext = {
 };
 
 describe('<MenuItem />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   describeConformanceUnstyled(<MenuItem />, () => ({
@@ -31,10 +30,6 @@ describe('<MenuItem />', () => {
     render: (node) => {
       return render(<MenuProvider value={testContext}>{node}</MenuProvider>);
     },
-    mount: (node: React.ReactNode) => {
-      const wrapper = mount(<MenuProvider value={testContext}>{node}</MenuProvider>);
-      return wrapper.childAt(0);
-    },
     refInstanceof: window.HTMLLIElement,
     testComponentPropWith: 'span',
     slots: {
diff --git a/packages/mui-base/src/Modal/Modal.test.tsx b/packages/mui-base/src/Modal/Modal.test.tsx
index d57885194867c0..f9efde18743acb 100644
--- a/packages/mui-base/src/Modal/Modal.test.tsx
+++ b/packages/mui-base/src/Modal/Modal.test.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import { Modal, modalClasses as classes, ModalRootSlotProps } from '@mui/base/Modal';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<Modal />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
   let savedBodyStyle: CSSStyleDeclaration;
 
@@ -24,7 +23,6 @@ describe('<Modal />', () => {
     () => ({
       inheritComponent: 'div',
       render,
-      mount,
       refInstanceof: window.HTMLDivElement,
       slots: {
         root: {
diff --git a/packages/mui-base/src/Option/Option.test.tsx b/packages/mui-base/src/Option/Option.test.tsx
index 584e91f4cd44be..a66d94442f1516 100644
--- a/packages/mui-base/src/Option/Option.test.tsx
+++ b/packages/mui-base/src/Option/Option.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import { Option, optionClasses } from '@mui/base/Option';
 import { SelectProvider } from '../useSelect/SelectProvider';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
@@ -12,7 +12,6 @@ const dummyGetItemState = () => ({
 });
 
 describe('<Option />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   describeConformanceUnstyled(<Option value={42} />, () => ({
@@ -32,22 +31,6 @@ describe('<Option />', () => {
         </SelectProvider>,
       );
     },
-    mount: (node: React.ReactNode) => {
-      const wrapper = mount(
-        <SelectProvider
-          value={{
-            dispatch: () => {},
-            getItemIndex: () => 0,
-            getItemState: dummyGetItemState,
-            registerItem: () => ({ id: 0, deregister: () => {} }),
-            totalSubitemCount: 0,
-          }}
-        >
-          {node}
-        </SelectProvider>,
-      );
-      return wrapper.childAt(0);
-    },
     refInstanceof: window.HTMLLIElement,
     testComponentPropWith: 'span',
     slots: {
diff --git a/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx b/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx
index 27a8bcdcff83ce..5249565c53bc4b 100644
--- a/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx
+++ b/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx
@@ -1,16 +1,14 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import { OptionGroup, optionGroupClasses } from '@mui/base/OptionGroup';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<OptionGroup />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   describeConformanceUnstyled(<OptionGroup />, () => ({
     inheritComponent: 'li',
     render,
-    mount,
     refInstanceof: window.HTMLLIElement,
     testComponentPropWith: 'span',
     slots: {
diff --git a/packages/mui-base/src/Popper/Popper.test.tsx b/packages/mui-base/src/Popper/Popper.test.tsx
index 26160e8e82651e..78e9b8ac6bd190 100644
--- a/packages/mui-base/src/Popper/Popper.test.tsx
+++ b/packages/mui-base/src/Popper/Popper.test.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, createMount, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
 import { Popper, popperClasses } from '@mui/base/Popper';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<Popper />', () => {
   const { render } = createRenderer();
-  const mount = createMount();
 
   const defaultProps = {
     anchorEl: () => document.createElement('svg'),
@@ -17,7 +16,6 @@ describe('<Popper />', () => {
   describeConformanceUnstyled(<Popper {...defaultProps} />, () => ({
     inheritComponent: 'div',
     render,
-    mount,
     refInstanceof: window.HTMLDivElement,
     skip: [
       // https://github.com/facebook/react/issues/11565
diff --git a/packages/mui-base/src/Select/Select.test.tsx b/packages/mui-base/src/Select/Select.test.tsx
index f01024916eddf8..a550858814bd34 100644
--- a/packages/mui-base/src/Select/Select.test.tsx
+++ b/packages/mui-base/src/Select/Select.test.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import {
-  createMount,
   createRenderer,
   fireEvent,
   act,
@@ -23,7 +22,6 @@ import { describeConformanceUnstyled } from '../../test/describeConformanceUnsty
 // userEvent.setup() requires Safari 14 or up to work
 
 describe('<Select />', () => {
-  const mount = createMount();
   const { render: internalRender } = createRenderer();
 
   async function render(
@@ -46,7 +44,6 @@ describe('<Select />', () => {
   describeConformanceUnstyled(componentToTest, () => ({
     inheritComponent: 'button',
     render,
-    mount,
     refInstanceof: window.HTMLButtonElement,
     testComponentPropWith: 'span',
     slots: {
diff --git a/packages/mui-base/src/Slider/Slider.test.tsx b/packages/mui-base/src/Slider/Slider.test.tsx
index e6d70d846091f6..8a140d4185ed49 100644
--- a/packages/mui-base/src/Slider/Slider.test.tsx
+++ b/packages/mui-base/src/Slider/Slider.test.tsx
@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import * as React from 'react';
 import { spy, stub } from 'sinon';
-import { act, createRenderer, createMount, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
 import {
   Slider,
   sliderClasses as classes,
@@ -31,14 +31,12 @@ describe('<Slider />', () => {
     }
   });
 
-  const mount = createMount();
   const { render } = createRenderer();
 
   describeConformanceUnstyled(<Slider value={0} />, () => ({
     classes,
     inheritComponent: 'span',
     render,
-    mount,
     refInstanceof: window.HTMLSpanElement,
     testComponentPropWith: 'div',
     slots: {
diff --git a/packages/mui-base/src/Snackbar/Snackbar.test.tsx b/packages/mui-base/src/Snackbar/Snackbar.test.tsx
index 3cd45136355ba5..333d21f682fa33 100644
--- a/packages/mui-base/src/Snackbar/Snackbar.test.tsx
+++ b/packages/mui-base/src/Snackbar/Snackbar.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, createMount, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
 import { Snackbar, snackbarClasses as classes } from '@mui/base/Snackbar';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
@@ -23,8 +23,6 @@ describe('<Snackbar />', () => {
     return result;
   }
 
-  const mount = createMount();
-
   describeConformanceUnstyled(
     <Snackbar open>
       <div />
@@ -33,7 +31,6 @@ describe('<Snackbar />', () => {
       classes,
       inheritComponent: 'div',
       render,
-      mount,
       refInstanceof: window.HTMLDivElement,
       slots: {
         root: {
diff --git a/packages/mui-base/src/Switch/Switch.test.tsx b/packages/mui-base/src/Switch/Switch.test.tsx
index e70c5ee78cf0a5..67f31aae0a5f93 100644
--- a/packages/mui-base/src/Switch/Switch.test.tsx
+++ b/packages/mui-base/src/Switch/Switch.test.tsx
@@ -1,17 +1,15 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import { expect } from 'chai';
 import { Switch, SwitchOwnerState, switchClasses } from '@mui/base/Switch';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<Switch />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   describeConformanceUnstyled(<Switch />, () => ({
     inheritComponent: 'span',
     render,
-    mount,
     refInstanceof: window.HTMLSpanElement,
     testComponentPropWith: 'span',
     slots: {
diff --git a/packages/mui-base/src/Tab/Tab.test.tsx b/packages/mui-base/src/Tab/Tab.test.tsx
index 77fde46c3d4087..347946682421d6 100644
--- a/packages/mui-base/src/Tab/Tab.test.tsx
+++ b/packages/mui-base/src/Tab/Tab.test.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import { Tab, tabClasses } from '@mui/base/Tab';
 import { TabsListProvider, TabsListProviderValue } from '../useTabsList';
 import { TabsContext } from '../Tabs';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<Tab />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   const testTabsListContext: TabsListProviderValue = {
@@ -38,22 +37,6 @@ describe('<Tab />', () => {
 
       return { container, ...other };
     },
-    mount: (node: any) => {
-      const wrapper = mount(
-        <TabsContext.Provider
-          value={{
-            value: 0,
-            onSelected() {},
-            registerTabIdLookup() {},
-            getTabId: () => '',
-            getTabPanelId: () => '',
-          }}
-        >
-          <TabsListProvider value={testTabsListContext}>{node}</TabsListProvider>
-        </TabsContext.Provider>,
-      );
-      return wrapper.childAt(0);
-    },
     refInstanceof: window.HTMLButtonElement,
     testComponentPropWith: 'div',
     slots: {
diff --git a/packages/mui-base/src/TabPanel/TabPanel.test.tsx b/packages/mui-base/src/TabPanel/TabPanel.test.tsx
index f9b0b5e97d3b9b..52890d47df0f06 100644
--- a/packages/mui-base/src/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-base/src/TabPanel/TabPanel.test.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import { TabPanel, tabPanelClasses } from '@mui/base/TabPanel';
 import { TabsProvider, TabsProviderValue } from '../useTabs';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<TabPanel />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   const tabsProviderDefaultValue: TabsProviderValue = {
@@ -31,10 +30,6 @@ describe('<TabPanel />', () => {
 
       return { container, ...other };
     },
-    mount: (node: any) => {
-      const wrapper = mount(<TabsProvider value={tabsProviderDefaultValue}>{node}</TabsProvider>);
-      return wrapper.childAt(0);
-    },
     refInstanceof: window.HTMLDivElement,
     testComponentPropWith: 'div',
     slots: {
diff --git a/packages/mui-base/src/TablePagination/TablePagination.test.tsx b/packages/mui-base/src/TablePagination/TablePagination.test.tsx
index dda030295d5824..b21b29aa085e38 100644
--- a/packages/mui-base/src/TablePagination/TablePagination.test.tsx
+++ b/packages/mui-base/src/TablePagination/TablePagination.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import PropTypes from 'prop-types';
-import { fireEvent, createRenderer, createMount } from '@mui-internal/test-utils';
+import { fireEvent, createRenderer } from '@mui-internal/test-utils';
 import {
   TablePagination,
   tablePaginationClasses as classes,
@@ -17,7 +17,6 @@ interface WithClassName {
 describe('<TablePagination />', () => {
   const noop = () => {};
   const { render } = createRenderer();
-  const mount = createMount();
 
   const CustomRootComponent = React.forwardRef(
     ({ className }: WithClassName, ref: React.Ref<any>) => (
@@ -42,16 +41,6 @@ describe('<TablePagination />', () => {
           ...other,
         };
       },
-      mount: (node: any) => {
-        const wrapper = mount(
-          <table>
-            <tbody>
-              <tr>{node}</tr>
-            </tbody>
-          </table>,
-        );
-        return wrapper.find('tr').childAt(0);
-      },
       refInstanceof: window.HTMLTableCellElement,
       testComponentPropWith: 'th',
       slots: {
diff --git a/packages/mui-base/src/Tabs/Tabs.test.tsx b/packages/mui-base/src/Tabs/Tabs.test.tsx
index 82db18b887ec6b..97bd20c7ffeadb 100644
--- a/packages/mui-base/src/Tabs/Tabs.test.tsx
+++ b/packages/mui-base/src/Tabs/Tabs.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen, createMount } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
 import { Tab } from '@mui/base/Tab';
 import { Tabs, tabsClasses as classes, TabsProps } from '@mui/base/Tabs';
 import { TabsList } from '@mui/base/TabsList';
@@ -9,7 +9,6 @@ import { TabPanel } from '@mui/base/TabPanel';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
 describe('<Tabs />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   before(function beforeHook() {
@@ -28,7 +27,6 @@ describe('<Tabs />', () => {
     classes,
     inheritComponent: 'div',
     render,
-    mount,
     refInstanceof: window.HTMLDivElement,
     testComponentPropWith: 'header',
     slots: {
diff --git a/packages/mui-base/src/TabsList/TabsList.test.tsx b/packages/mui-base/src/TabsList/TabsList.test.tsx
index 698dc7ce033cd1..b76066d3a85cfe 100644
--- a/packages/mui-base/src/TabsList/TabsList.test.tsx
+++ b/packages/mui-base/src/TabsList/TabsList.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { act, createMount, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui-internal/test-utils';
 import { Tab } from '@mui/base/Tab';
 import { Tabs, TabsContext } from '@mui/base/Tabs';
 import { TabsList, tabsListClasses } from '@mui/base/TabsList';
@@ -8,7 +8,6 @@ import { describeConformanceUnstyled } from '../../test/describeConformanceUnsty
 
 describe('<TabsList />', () => {
   const { render } = createRenderer();
-  const mount = createMount();
 
   describeConformanceUnstyled(<TabsList />, () => ({
     inheritComponent: 'div',
@@ -29,22 +28,6 @@ describe('<TabsList />', () => {
 
       return { container, ...other };
     },
-    mount: (node: any) => {
-      const wrapper = mount(
-        <TabsContext.Provider
-          value={{
-            value: '1',
-            onSelected: () => {},
-            registerTabIdLookup() {},
-            getTabId: () => '',
-            getTabPanelId: () => '',
-          }}
-        >
-          {node}
-        </TabsContext.Provider>,
-      );
-      return wrapper.childAt(0);
-    },
     refInstanceof: window.HTMLDivElement,
     testComponentPropWith: 'div',
     slots: {
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
index 418d35795d263d..ddfd63abc18ffd 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
@@ -1,14 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import sinon, { spy, stub } from 'sinon';
-import {
-  act,
-  screen,
-  waitFor,
-  createMount,
-  createRenderer,
-  fireEvent,
-} from '@mui-internal/test-utils';
+import { act, screen, waitFor, createRenderer, fireEvent } from '@mui-internal/test-utils';
 import { TextareaAutosize } from '@mui/base/TextareaAutosize';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
@@ -41,11 +34,9 @@ async function raf() {
 
 describe('<TextareaAutosize />', () => {
   const { clock, render } = createRenderer();
-  const mount = createMount();
 
   describeConformanceUnstyled(<TextareaAutosize />, () => ({
     render,
-    mount,
     inheritComponent: 'textarea',
     refInstanceof: window.HTMLTextAreaElement,
     slots: {},
diff --git a/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx b/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
index 223ff1661faae2..f5d38af3cb5ddd 100644
--- a/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
+++ b/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
-import { act, createMount, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
 import {
   Unstable_NumberInput as NumberInput,
   numberInputClasses,
@@ -17,13 +17,11 @@ import { describeConformanceUnstyled } from '../../test/describeConformanceUnsty
 // userEvent.setup() requires Safari 14 or up to work
 
 describe('<NumberInput />', () => {
-  const mount = createMount();
   const { render } = createRenderer();
 
   describeConformanceUnstyled(<NumberInput />, () => ({
     inheritComponent: 'div',
     render,
-    mount,
     refInstanceof: window.HTMLDivElement,
     testComponentPropWith: 'div',
     slots: {
diff --git a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
index 03ae6a31d9195d..82cd1e26851a74 100644
--- a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
+++ b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, createMount, screen, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
 import { Unstable_Popup as Popup, popupClasses, PopupProps } from '@mui/base/Unstable_Popup';
 import { PopupContext } from './PopupContext';
 import { useTransitionStateManager } from '../useTransition';
@@ -34,7 +34,6 @@ function FakeTransition(props: React.PropsWithChildren<{}>) {
 
 describe('<Popup />', () => {
   const { clock, render } = createRenderer();
-  const mount = createMount();
 
   // https://floating-ui.com/docs/react#testing
   async function waitForPosition() {
@@ -58,7 +57,6 @@ describe('<Popup />', () => {
 
       return result;
     },
-    mount,
     refInstanceof: window.HTMLDivElement,
     skip: [
       // https://github.com/facebook/react/issues/11565
diff --git a/packages/mui-joy/src/Table/Table.test.tsx b/packages/mui-joy/src/Table/Table.test.tsx
index 6be49bb54cb8a8..681ad7dbbdeecf 100644
--- a/packages/mui-joy/src/Table/Table.test.tsx
+++ b/packages/mui-joy/src/Table/Table.test.tsx
@@ -22,7 +22,6 @@ describe('<Table />', () => {
     skip: [
       'classesRoot',
       'componentsProp',
-      // Emotion `compat` is not set with `createMount` for these tests
       'componentProp',
       'mergeClassName',
       'propsSpread',
diff --git a/packages/mui-material/src/Menu/Menu.test.js b/packages/mui-material/src/Menu/Menu.test.js
index 1a882da0ac7b66..97009b28e5d85b 100644
--- a/packages/mui-material/src/Menu/Menu.test.js
+++ b/packages/mui-material/src/Menu/Menu.test.js
@@ -3,7 +3,6 @@ import { spy } from 'sinon';
 import { expect } from 'chai';
 import {
   createRenderer,
-  createMount,
   screen,
   fireEvent,
   strictModeDoubleLoggingSuppressed,
@@ -11,12 +10,11 @@ import {
 import Menu, { menuClasses as classes } from '@mui/material/Menu';
 import Popover from '@mui/material/Popover';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { MenuPaper } from './Menu';
 import describeConformance from '../../test/describeConformance';
+import { paperClasses } from '../Paper';
 
 describe('<Menu />', () => {
   const { render } = createRenderer({ clock: 'fake' });
-  const mount = createMount();
 
   describeConformance(<Menu anchorEl={() => document.createElement('div')} open />, () => ({
     classes,
@@ -141,8 +139,9 @@ describe('<Menu />', () => {
   describe('prop: PaperProps', () => {
     it('should be passed to the paper component', () => {
       const customElevation = 12;
-      const customClasses = { rounded: { borderRadius: 12 } };
-      const wrapper = mount(
+      const customClasses = { rounded: 'custom-rounded' };
+
+      render(
         <Menu
           anchorEl={document.createElement('div')}
           open
@@ -154,8 +153,8 @@ describe('<Menu />', () => {
         />,
       );
 
-      expect(wrapper.find(MenuPaper).props().elevation).to.equal(customElevation);
-      expect(wrapper.find(MenuPaper).props().classes).to.contain(customClasses);
+      expect(screen.getByTestId('paper')).to.have.class(paperClasses.elevation12);
+      expect(screen.getByTestId('paper')).to.have.class(customClasses.rounded);
     });
   });
 
@@ -381,27 +380,20 @@ describe('<Menu />', () => {
     });
   });
 
-  describe('paper', () => {
-    it('should use MenuPaper component', () => {
-      const wrapper = mount(
-        <Menu anchorEl={document.createElement('div')} open>
-          <div />
-        </Menu>,
-      );
-
-      expect(wrapper.find(MenuPaper)).to.have.length(1);
-    });
-  });
-
   describe('slots', () => {
     it('should merge slots with existing values', () => {
-      const wrapper = mount(
-        <Menu slots={{ root: 'span' }} anchorEl={document.createElement('div')} open>
+      render(
+        <Menu
+          slots={{ root: 'span' }}
+          slotProps={{ paper: { 'data-testid': 'paper' } }}
+          anchorEl={document.createElement('div')}
+          open
+        >
           <div />
         </Menu>,
       );
 
-      expect(wrapper.find(MenuPaper)).to.have.length(1);
+      expect(screen.getByTestId('paper')).to.have.length(1);
     });
   });
 });
diff --git a/packages/mui-material/src/Popover/Popover.test.js b/packages/mui-material/src/Popover/Popover.test.js
index 656e70e2b1919b..80ac6e450e5971 100644
--- a/packages/mui-material/src/Popover/Popover.test.js
+++ b/packages/mui-material/src/Popover/Popover.test.js
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub, match } from 'sinon';
-import { act, createMount, createRenderer, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, screen } from '@mui-internal/test-utils';
 import PropTypes from 'prop-types';
-import Grow from '@mui/material/Grow';
 import Modal from '@mui/material/Modal';
-import Paper from '@mui/material/Paper';
+import Paper, { paperClasses } from '@mui/material/Paper';
 import Popover, { popoverClasses as classes, PopoverPaper } from '@mui/material/Popover';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { getOffsetLeft, getOffsetTop } from './Popover';
@@ -46,7 +45,6 @@ const ReplacementPaper = styled(Paper, {
 
 describe('<Popover />', () => {
   const { clock, render } = createRenderer({ clock: 'fake' });
-  const mount = createMount();
 
   describeConformance(<Popover anchorEl={() => document.createElement('div')} open />, () => ({
     classes,
@@ -317,8 +315,8 @@ describe('<Popover />', () => {
   });
 
   describe('paper', () => {
-    it('should have PopoverPaper as a child of Transition', () => {
-      const wrapper = mount(
+    it('should have the paper class', () => {
+      render(
         <Popover
           anchorEl={document.createElement('div')}
           open
@@ -328,12 +326,11 @@ describe('<Popover />', () => {
         </Popover>,
       );
 
-      expect(wrapper.find(PopoverPaper)).to.have.lengthOf(1);
-      expect(screen.getByTestId('paper')).not.to.equal(null);
+      expect(screen.getByTestId('paper')).to.have.class(classes.paper);
     });
 
-    it('should have the paper class', () => {
-      render(
+    it('should have a elevation prop passed down', () => {
+      const { setProps } = render(
         <Popover
           anchorEl={document.createElement('div')}
           open
@@ -343,20 +340,11 @@ describe('<Popover />', () => {
         </Popover>,
       );
 
-      expect(screen.getByTestId('paper')).to.have.class(classes.paper);
-    });
+      expect(screen.getByTestId('paper')).to.have.class(paperClasses.elevation8);
 
-    it('should have a elevation prop passed down', () => {
-      const wrapper = mount(
-        <Popover anchorEl={document.createElement('div')} open>
-          <div />
-        </Popover>,
-      );
-
-      expect(wrapper.find(PopoverPaper).props().elevation).to.equal(8);
+      setProps({ slotProps: { paper: { 'data-testid': 'paper', elevation: 16 } } });
 
-      wrapper.setProps({ elevation: 16 });
-      expect(wrapper.find(PopoverPaper).props().elevation).to.equal(16);
+      expect(screen.getByTestId('paper')).to.have.class(paperClasses.elevation16);
     });
   });
 
@@ -425,20 +413,19 @@ describe('<Popover />', () => {
       it('should have opacity 1 only after onEntering has been called', () => {
         const onEnteringSpy = spy();
         const paperRenderSpy = spy(PopoverPaper, 'render');
-
-        const wrapper = mount(
+        const { setProps } = render(
           <Popover
             anchorEl={document.createElement('div')}
-            open={false}
             TransitionProps={{
               onEntering: onEnteringSpy,
             }}
+            open={false}
           >
             <div />
           </Popover>,
         );
 
-        wrapper.setProps({ open: true });
+        setProps({ open: true });
 
         expect(
           paperRenderSpy
@@ -999,12 +986,20 @@ describe('<Popover />', () => {
 
   describe('prop: transitionDuration', () => {
     it('should apply the auto prop if supported', () => {
-      const wrapper = mount(
-        <Popover anchorEl={document.createElement('div')} open>
+      const TransitionComponent = React.forwardRef((props, ref) => (
+        <div data-testid="transition" data-timeout={props.timeout} ref={ref} tabIndex={-1} />
+      ));
+      TransitionComponent.muiSupportAuto = true;
+      render(
+        <Popover
+          anchorEl={document.createElement('div')}
+          open
+          TransitionComponent={TransitionComponent}
+        >
           <div />
         </Popover>,
       );
-      expect(wrapper.find(Grow).props().timeout).to.equal('auto');
+      expect(screen.getByTestId('transition')).to.have.attribute('data-timeout').equals('auto');
     });
 
     it('should not apply the auto prop if not supported', () => {
@@ -1054,19 +1049,21 @@ describe('<Popover />', () => {
         const slotPropsElevation = 12;
         const paperPropsElevation = 14;
 
-        const wrapper = mount(
+        render(
           <Popover
             anchorEl={document.createElement('div')}
             open
             PaperProps={{ elevation: paperPropsElevation }}
-            slotProps={{ paper: { elevation: slotPropsElevation } }}
+            slotProps={{ paper: { elevation: slotPropsElevation, 'data-testid': 'paper' } }}
           >
             <div />
           </Popover>,
         );
 
         expect(slotPropsElevation).not.to.equal(paperPropsElevation);
-        expect(wrapper.find(PopoverPaper).props().elevation).to.equal(slotPropsElevation);
+        expect(screen.getByTestId('paper')).to.have.class(
+          `${paperClasses[`elevation${slotPropsElevation}`]}`,
+        );
       });
 
       it('should position popover correctly when ref is provided', () => {
diff --git a/packages/mui-styles/src/StylesProvider/StylesProvider.test.js b/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
index 0c9945949a95ce..9b391dc283c9bd 100644
--- a/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
+++ b/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
@@ -1,56 +1,65 @@
 import * as React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import { expect } from 'chai';
+import { spy, match } from 'sinon';
 import { create, SheetsRegistry } from 'jss';
-import { createMount, strictModeDoubleLoggingSuppressed } from '@mui-internal/test-utils';
+import { createRenderer, strictModeDoubleLoggingSuppressed } from '@mui-internal/test-utils';
 import StylesProvider, { StylesContext } from './StylesProvider';
 import makeStyles from '../makeStyles';
 import createGenerateClassName from '../createGenerateClassName';
 
-function Test() {
-  const options = React.useContext(StylesContext);
-  return <span data-options={options} />;
-}
-
-function getOptions(wrapper) {
-  return wrapper.find('span').props()['data-options'];
-}
-
 describe('StylesProvider', () => {
-  const mount = createMount();
+  const { render } = createRenderer();
   let generateClassName;
+  let getContext;
+
+  function Test() {
+    const context = React.useContext(StylesContext);
+
+    React.useEffect(() => {
+      getContext(context);
+    }, [context]);
+
+    return null;
+  }
 
   beforeEach(() => {
     generateClassName = createGenerateClassName();
+    getContext = spy();
   });
 
-  it('should provide the options', () => {
-    const wrapper = mount(
+  it('should provide the context', () => {
+    render(
       <StylesProvider disableGeneration>
         <Test />
       </StylesProvider>,
     );
-    expect(getOptions(wrapper).disableGeneration).to.equal(true);
+
+    expect(getContext.alwaysCalledWith(match({ disableGeneration: true }))).to.equal(true);
   });
 
   it('should merge the themes', () => {
-    const wrapper = mount(
+    render(
       <StylesProvider>
         <StylesProvider disableGeneration>
           <Test />
         </StylesProvider>
       </StylesProvider>,
     );
-    expect(getOptions(wrapper).disableGeneration).to.equal(true);
+
+    expect(getContext.alwaysCalledWith(match({ disableGeneration: true }))).to.equal(true);
   });
 
   it('should handle injectFirst', () => {
-    const wrapper = mount(
+    render(
       <StylesProvider injectFirst>
         <Test />
       </StylesProvider>,
     );
-    expect(getOptions(wrapper).jss.options.insertionPoint.nodeType).to.equal(8);
+
+    expect(
+      getContext.alwaysCalledWith(match({ jss: { options: { insertionPoint: { nodeType: 8 } } } })),
+    ).to.equal(true);
   });
 
   describe('server-side', () => {
@@ -128,20 +137,20 @@ describe('StylesProvider', () => {
 
   it('should accept a custom JSS instance', () => {
     const jss = create();
-    const wrapper = mount(
+    render(
       <StylesProvider jss={jss}>
         <Test />
       </StylesProvider>,
     );
-    expect(getOptions(wrapper).jss).to.equal(jss);
+
+    expect(getContext.alwaysCalledWith(match({ jss }))).to.equal(true);
   });
 
   describe('warnings', () => {
     it('should support invalid input', () => {
       const jss = create();
-
       expect(() => {
-        mount(
+        render(
           <StylesProvider injectFirst jss={jss}>
             <Test />
           </StylesProvider>,
diff --git a/packages/mui-styles/src/makeStyles/makeStyles.test.js b/packages/mui-styles/src/makeStyles/makeStyles.test.js
index 7cddc8825c46d3..e5721335d8c460 100644
--- a/packages/mui-styles/src/makeStyles/makeStyles.test.js
+++ b/packages/mui-styles/src/makeStyles/makeStyles.test.js
@@ -2,8 +2,7 @@ import { expect } from 'chai';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SheetsRegistry } from 'jss';
-import { act } from 'react-dom/test-utils';
-import { createMount } from '@mui-internal/test-utils';
+import { createRenderer, screen, renderHook, fireEvent } from '@mui-internal/test-utils';
 import { createTheme } from '@mui/material/styles';
 import createGenerateClassName from '../createGenerateClassName';
 import makeStyles from './makeStyles';
@@ -13,28 +12,7 @@ import ThemeProvider from '../ThemeProvider';
 
 describe('makeStyles', () => {
   // StrictModeViolation: uses `useSynchronousEffect`
-  const mount = createMount({ strict: null });
-
-  /**
-   * returns a function that given the props for the styles object will return
-   * the css classes
-   * @param {object} styles argument for `makeStyles`
-   */
-  function createGetClasses(styles) {
-    const useStyles = makeStyles(styles);
-    const output = {};
-
-    function TestComponent(props) {
-      output.classes = useStyles(props);
-      return <div />;
-    }
-
-    return function mountWithProps(props) {
-      const wrapper = mount(<TestComponent {...props} />);
-      output.wrapper = wrapper;
-      return output;
-    };
-  }
+  const { render } = createRenderer({ strict: false });
 
   let generateClassName;
 
@@ -44,72 +22,73 @@ describe('makeStyles', () => {
 
   it('should accept a classes prop', () => {
     const styles = { root: {} };
-    const mountWithProps = createGetClasses(styles);
-    const output = mountWithProps();
-    const baseClasses = output.classes;
-    output.wrapper.setProps({
-      classes: { root: 'h1' },
-    });
-    const extendedClasses = output.classes;
+    const useStyles = makeStyles(styles);
+
+    const { result, rerender } = renderHook((props) => useStyles(props));
+    const baseClasses = result.current;
+    rerender({ classes: { root: 'h1' } });
+    const extendedClasses = result.current;
+
     expect(extendedClasses.root).to.equal(`${baseClasses.root} h1`);
   });
 
   it('should ignore undefined prop', () => {
     const styles = { root: {} };
-    const mountWithProps = createGetClasses(styles);
-    const output = mountWithProps();
-    const baseClasses = output.classes;
-    output.wrapper.setProps({
-      classes: { root: undefined },
-    });
-    const extendedClasses = output.classes;
+    const useStyles = makeStyles(styles);
+
+    const { result, rerender } = renderHook((props) => useStyles(props));
+    const baseClasses = result.current;
+    rerender({ classes: { root: undefined } });
+    const extendedClasses = result.current;
+
     expect(extendedClasses.root).to.equal(baseClasses.root);
   });
 
   describe('warnings', () => {
-    const mountWithProps = createGetClasses({ root: {} });
+    const useStyles = makeStyles({ root: {} });
 
     it('should warn if providing a unknown key', () => {
-      const output = mountWithProps();
+      let baseClasses;
+      let extendedClasses;
 
       expect(() => {
-        output.wrapper.setProps({ classes: { bar: 'foo' } });
+        const { result } = renderHook(() => useStyles({ classes: { bar: 'foo' } }));
+        baseClasses = result.current;
+        extendedClasses = result.current;
       }).toErrorDev('MUI: The key `bar` provided to the classes prop is not implemented');
-
-      const baseClasses = output.classes;
-      const extendedClasses = output.classes;
       expect(extendedClasses).to.deep.equal({ root: baseClasses.root, bar: 'undefined foo' });
     });
 
     it('should warn if providing a string', () => {
-      const output = mountWithProps();
-
       expect(() => {
-        output.wrapper.setProps({ classes: 'foo' });
+        renderHook(() => useStyles({ classes: 'foo' }));
       }).toErrorDev(['You might want to use the className prop instead']);
     });
 
     it('should warn if providing a non string', () => {
-      const output = mountWithProps();
-      const baseClasses = output.classes;
+      const { result, rerender } = renderHook((props) => useStyles(props));
+      const baseClasses = result.current;
 
       expect(() => {
-        output.wrapper.setProps({ classes: { root: {} } });
+        rerender({ classes: { root: {} } });
       }).toErrorDev('MUI: The key `root` provided to the classes prop is not valid');
 
-      const extendedClasses = output.classes;
+      const extendedClasses = result.current;
+
       expect(extendedClasses).to.deep.equal({ root: `${baseClasses.root} [object Object]` });
     });
 
     it('should warn if missing theme', () => {
-      const styles = (theme) => ({ root: { padding: theme.spacing(2) } });
-      const mountWithProps2 = createGetClasses(styles);
+      const useStyles2 = makeStyles((theme) => ({ root: { padding: theme.spacing(2) } }));
 
       expect(() => {
         expect(() => {
-          mountWithProps2({});
+          renderHook(() => useStyles2({}));
         }).to.throw('theme.spacing is not a function');
       }).toErrorDev([
+        'MUI: The `styles` argument provided is invalid.\nYou are providing a function without a theme in the context.',
+        'MUI: The `styles` argument provided is invalid.\nYou are providing a function without a theme in the context.',
+        'Uncaught [TypeError: theme.spacing is not a function',
         'MUI: The `styles` argument provided is invalid.\nYou are providing a function without a theme in the context.',
         'MUI: The `styles` argument provided is invalid.\nYou are providing a function without a theme in the context.',
         'Uncaught [TypeError: theme.spacing is not a function',
@@ -118,16 +97,15 @@ describe('makeStyles', () => {
     });
 
     it('should warn but not throw if providing an invalid styles type', () => {
-      let mountWithProps2;
+      let useStyles2;
 
       expect(() => {
-        mountWithProps2 = createGetClasses(undefined);
+        useStyles2 = makeStyles(undefined);
       }).toErrorDev(
         'MUI: The `styles` argument provided is invalid.\nYou need to provide a function generating the styles or a styles object.',
       );
-
       expect(() => {
-        mountWithProps2({});
+        renderHook(() => useStyles2({}));
       }).not.to.throw();
     });
 
@@ -143,15 +121,14 @@ describe('makeStyles', () => {
           },
         },
       };
-
-      const useStyles = makeStyles({ root: { margin: 5, padding: 3 } }, { name: 'Test' });
+      const useStyles2 = makeStyles({ root: { margin: 5, padding: 3 } }, { name: 'Test' });
       function Test() {
-        const classes = useStyles();
+        const classes = useStyles2();
         return <div className={classes.root} />;
       }
 
       expect(() => {
-        mount(
+        render(
           <ThemeProvider theme={theme}>
             <Test />
           </ThemeProvider>,
@@ -164,45 +141,47 @@ describe('makeStyles', () => {
   });
 
   describe('classes memoization', () => {
-    let mountWithProps;
+    let useStyles;
 
     before(() => {
       const styles = { root: {} };
-      mountWithProps = createGetClasses(styles);
+      useStyles = makeStyles(styles);
     });
 
     it('should recycle with no classes prop', () => {
-      const output = mountWithProps();
-      const classes1 = output.classes;
-      output.wrapper.update();
-      const classes2 = output.classes;
+      const { result, rerender } = renderHook(() => useStyles());
+      const classes1 = result.current;
+      rerender();
+      const classes2 = result.current;
+
       expect(classes1).to.equal(classes2);
     });
 
     it('should recycle even when a classes prop is provided', () => {
       const inputClasses = { root: 'foo' };
-      const output = mountWithProps({ classes: inputClasses });
-      const classes1 = output.classes;
-      output.wrapper.setProps({
-        classes: inputClasses,
-      });
-      const classes2 = output.classes;
+      const { result, rerender } = renderHook(() => useStyles({ classes: inputClasses }));
+      const classes1 = result.current;
+      rerender();
+      const classes2 = result.current;
+
       expect(classes1).to.equal(classes2);
     });
 
     it('should invalidate the cache', () => {
-      const output = mountWithProps();
-      const classes = output.classes;
-      output.wrapper.setProps({ classes: { root: 'foo' } });
-      const classes1 = output.classes;
+      const { result, rerender } = renderHook((props) => useStyles(props));
+      const classes = result.current;
+      rerender({ classes: { root: 'foo' } });
+      const classes1 = result.current;
+
       expect(classes1).to.deep.equal({
         root: `${classes.root} foo`,
       });
 
-      output.wrapper.setProps({
+      rerender({
         classes: { root: 'bar' },
       });
-      const classes2 = output.classes;
+      const classes2 = result.current;
+
       expect(classes1).not.to.equal(classes2);
       expect(classes2).to.deep.equal({
         root: `${classes.root} bar`,
@@ -219,13 +198,14 @@ describe('makeStyles', () => {
 
     it('should run lifecycles with no theme', () => {
       const useStyles = makeStyles({ root: { display: 'flex' } });
+      const initialTheme = createTheme();
       function StyledComponent() {
         useStyles();
         return <div />;
       }
 
-      const wrapper = mount(
-        <ThemeProvider theme={createTheme()}>
+      const { setProps, unmount } = render(
+        <ThemeProvider theme={initialTheme}>
           <StylesProvider
             sheetsRegistry={sheetsRegistry}
             sheetsCache={new Map()}
@@ -235,16 +215,22 @@ describe('makeStyles', () => {
           </StylesProvider>
         </ThemeProvider>,
       );
+
       expect(sheetsRegistry.registry.length).to.equal(1);
       expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'makeStyles-root-1' });
-      wrapper.update();
+
+      setProps();
+
       expect(sheetsRegistry.registry.length).to.equal(1);
       expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'makeStyles-root-1' });
-      wrapper.setProps({ theme: createTheme() });
+
+      setProps({ theme: createTheme() });
+
       expect(sheetsRegistry.registry.length).to.equal(1);
       expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'makeStyles-root-2' });
 
-      wrapper.unmount();
+      unmount();
+
       expect(sheetsRegistry.registry.length).to.equal(0);
     });
 
@@ -257,7 +243,7 @@ describe('makeStyles', () => {
         return <div />;
       }
 
-      const wrapper = mount(
+      const { setProps } = render(
         <ThemeProvider theme={createTheme()}>
           <StylesProvider
             sheetsRegistry={sheetsRegistry}
@@ -268,10 +254,12 @@ describe('makeStyles', () => {
           </StylesProvider>
         </ThemeProvider>,
       );
+
       expect(sheetsRegistry.registry.length).to.equal(1);
       expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'MuiTextField-root' });
 
-      wrapper.setProps({ theme: createTheme({ foo: 'bar' }) });
+      setProps({ theme: createTheme({ foo: 'bar' }) });
+
       expect(sheetsRegistry.registry.length).to.equal(1);
       expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'MuiTextField-root' });
     });
@@ -294,7 +282,7 @@ describe('makeStyles', () => {
           return <div />;
         }
 
-        mount(
+        render(
           <ThemeProvider
             theme={createTheme({
               components: {
@@ -314,6 +302,7 @@ describe('makeStyles', () => {
             </StylesProvider>
           </ThemeProvider>,
         );
+
         expect(sheetsRegistry.registry.length).to.equal(1);
         expect(sheetsRegistry.registry[0].rules.raw).to.deep.equal({
           root: { padding: 9, margin: [2, 2, 3] },
@@ -332,14 +321,13 @@ describe('makeStyles', () => {
             },
           },
         };
-
         const useStyles = makeStyles({ root: { margin: 5, padding: 3 } }, { name: 'Test' });
         function Test() {
           const classes = useStyles();
           return <div className={classes.root} />;
         }
 
-        mount(
+        render(
           <ThemeProvider theme={theme}>
             <StylesProvider sheetsRegistry={sheetsRegistry} sheetsCache={new Map()}>
               <Test />
@@ -354,7 +342,7 @@ describe('makeStyles', () => {
       });
     });
 
-    it('should handle dynamic props', () => {
+    it('should handle dynamic props', async () => {
       const useStyles = makeStyles({
         root: (props) => ({ margin: 8, padding: props.padding || 8 }),
       });
@@ -362,7 +350,6 @@ describe('makeStyles', () => {
         const classes = useStyles(props);
         return <div className={classes.root} />;
       }
-
       function Test(props) {
         return (
           <StylesProvider
@@ -375,7 +362,8 @@ describe('makeStyles', () => {
         );
       }
 
-      const wrapper = mount(<Test />);
+      const { setProps } = render(<Test />);
+
       expect(sheetsRegistry.registry.length).to.equal(2);
       expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'makeStyles-root-1' });
       expect(sheetsRegistry.registry[1].classes).to.deep.equal({ root: 'makeStyles-root-2' });
@@ -384,7 +372,8 @@ describe('makeStyles', () => {
         padding: '8px',
       });
 
-      wrapper.setProps({ padding: 4 });
+      setProps({ padding: 4 });
+
       expect(sheetsRegistry.registry.length).to.equal(2);
       expect(sheetsRegistry.registry[0].classes).to.deep.equal({ root: 'makeStyles-root-1' });
       expect(sheetsRegistry.registry[1].classes).to.deep.equal({ root: 'makeStyles-root-2' });
@@ -398,23 +387,30 @@ describe('makeStyles', () => {
   describe('options: disableGeneration', () => {
     it('should not generate the styles', () => {
       const sheetsRegistry = new SheetsRegistry();
-      function Empty() {
+      const useStyles = makeStyles({ root: { padding: 8 } });
+      let classes;
+      function Empty(props) {
+        React.useEffect(() => {
+          classes = props.classes;
+        }, [props.classes]);
         return <div />;
       }
-      const useStyles = makeStyles({ root: { padding: 8 } });
       function StyledComponent() {
-        const classes = useStyles();
-        return <Empty classes={classes} />;
+        const classes2 = useStyles();
+        return <Empty classes={classes2} />;
       }
 
-      const wrapper = mount(
+      const { unmount } = render(
         <StylesProvider sheetsRegistry={sheetsRegistry} disableGeneration sheetsCache={new Map()}>
           <StyledComponent />
         </StylesProvider>,
       );
+
       expect(sheetsRegistry.registry.length).to.equal(0);
-      expect(wrapper.find(Empty).props().classes).to.deep.equal({});
-      wrapper.unmount();
+      expect(classes).to.deep.equal({});
+
+      unmount();
+
       expect(sheetsRegistry.registry.length).to.equal(0);
     });
   });
@@ -439,12 +435,13 @@ describe('makeStyles', () => {
         return <div />;
       }
 
-      mount(
+      render(
         <StylesProvider sheetsRegistry={sheetsRegistry} sheetsCache={new Map()}>
           <StyledComponent1 />
           <StyledComponent2 />
         </StylesProvider>,
       );
+
       expect(sheetsRegistry.registry[0].options.classNamePrefix).to.equal('makeStyles');
       expect(sheetsRegistry.registry[0].options.name).to.equal(undefined);
       expect(sheetsRegistry.registry[1].options.classNamePrefix).to.equal('Fooo');
@@ -522,7 +519,7 @@ describe('makeStyles', () => {
     it('should update like expected', () => {
       const sheetsRegistry = new SheetsRegistry();
 
-      const wrapper = mount(
+      render(
         <StylesProvider
           sheetsRegistry={sheetsRegistry}
           sheetsCache={new Map()}
@@ -531,24 +528,26 @@ describe('makeStyles', () => {
           <StressTest />
         </StylesProvider>,
       );
+
       expect(sheetsRegistry.registry.length).to.equal(2);
       expect(sheetsRegistry.toString()).to.equal(`.makeStyles-root-2 {
   color: white;
   background-color: black;
 }`);
 
-      act(() => {
-        wrapper.find('#color').simulate('change', { target: { value: 'blue' } });
-      });
+      fireEvent.change(screen.getByLabelText('color'), { target: { value: 'blue' } });
+
       expect(sheetsRegistry.toString()).to.equal(
         `.makeStyles-root-4 {
   color: blue;
   background-color: black;
 }`,
       );
-      act(() => {
-        wrapper.find('#background-color').simulate('change', { target: { value: 'green' } });
+
+      fireEvent.change(screen.getByLabelText('background-color'), {
+        target: { value: 'green' },
       });
+
       expect(sheetsRegistry.toString()).to.equal(
         `.makeStyles-root-4 {
   color: blue;
diff --git a/packages/test-utils/src/createMount.tsx b/packages/test-utils/src/createMount.tsx
deleted file mode 100644
index 03f0d273d08bff..00000000000000
--- a/packages/test-utils/src/createMount.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/* eslint-env mocha */
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import * as ReactDOMTestUtils from 'react-dom/test-utils';
-import { Test, Suite } from 'mocha';
-import { mount as enzymeMount, MountRendererProps } from 'enzyme';
-
-interface ModeProps {
-  /**
-   * this is essentially children. However, we can't use children because then
-   * using `wrapper.setProps({ children })` would work differently if this component
-   * would be the root.
-   */
-  __element: React.ReactElement;
-  __strict: boolean;
-}
-
-/**
- * Can't just mount <React.Fragment>{node}</React.Fragment>
- * because that swallows wrapper.setProps
- *
- * why class component:
- * https://github.com/airbnb/enzyme/issues/2043
- */
-// eslint-disable-next-line react/prefer-stateless-function
-class Mode extends React.Component<ModeProps> {
-  render() {
-    // Excess props will come from e.g. enzyme setProps
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { __element, __strict, ...other } = this.props;
-    const Component = __strict ? React.StrictMode : React.Fragment;
-
-    return <Component>{React.cloneElement(__element, other)}</Component>;
-  }
-}
-
-interface CreateMountOptions extends MountRendererProps {
-  mount?: typeof enzymeMount;
-  strict?: boolean;
-}
-// Generate an enhanced mount function.
-export default function createMount(options: CreateMountOptions = {}) {
-  const { mount = enzymeMount, strict: globalStrict = true, ...globalEnzymeOptions } = options;
-
-  let container: HTMLElement | null = null;
-
-  function computeTestName(test: Test | undefined) {
-    let current: Test | Suite | undefined = test;
-    const titles: string[] = [];
-    while (current != null) {
-      titles.push(current.title);
-      current = current.parent;
-    }
-
-    return titles.filter(Boolean).reverse().join(' -> ');
-  }
-
-  // save stack to re-use in test-hooks
-  const { stack: createMountStack } = new Error();
-
-  /**
-   * Flag whether `createMount` was called in a suite i.e. describe() block.
-   * For legacy reasons `createMount` might accidentally be called in a before(Each) hook.
-   */
-  let wasCalledInSuite = false;
-  before(() => {
-    wasCalledInSuite = true;
-  });
-
-  beforeEach(() => {
-    if (!wasCalledInSuite) {
-      const error = new Error(
-        'Unable to run `before` hook for `createMount`. This usually indicates that `createMount` was called in a `before` hook instead of in a `describe()` block.',
-      );
-      error.stack = createMountStack;
-      throw error;
-    }
-  });
-
-  beforeEach(function beforeEachMountTest() {
-    container = document.createElement('div');
-    container.setAttribute('data-test', computeTestName(this.currentTest));
-    document.body.insertBefore(container, document.body.firstChild);
-  });
-
-  afterEach(() => {
-    ReactDOMTestUtils.act(() => {
-      // eslint-disable-next-line react/no-deprecated
-      ReactDOM.unmountComponentAtNode(container!);
-    });
-    container!.parentElement!.removeChild(container!);
-    container = null;
-  });
-
-  const mountWithContext = function mountWithContext(
-    node: React.ReactElement,
-    localOptions: Omit<CreateMountOptions, 'mount'> = {},
-  ) {
-    const { strict = globalStrict, ...localEnzymeOptions } = localOptions;
-
-    if (container === null) {
-      throw new Error(
-        `Tried to mount without setup. Mounting inside before() is not allowed. Try mounting in beforeEach or better: in each test`,
-      );
-    }
-    ReactDOMTestUtils.act(() => {
-      // eslint-disable-next-line react/no-deprecated
-      ReactDOM.unmountComponentAtNode(container!);
-    });
-
-    // some tests require that no other components are in the tree
-    // for example when doing .instance(), .state() etc.
-    const wrapper = mount(
-      strict == null ? node : <Mode __element={node} __strict={Boolean(strict)} />,
-      {
-        attachTo: container,
-        ...globalEnzymeOptions,
-        ...localEnzymeOptions,
-      },
-    );
-    const originalUnmount = wrapper.unmount;
-
-    wrapper.unmount = () => {
-      // flush effect cleanup functions
-      ReactDOMTestUtils.act(() => {
-        originalUnmount.call(wrapper);
-      });
-
-      return wrapper;
-    };
-
-    return wrapper;
-  };
-
-  return mountWithContext;
-}
diff --git a/packages/test-utils/src/findOutermostIntrinsic.test.js b/packages/test-utils/src/findOutermostIntrinsic.test.js
deleted file mode 100644
index f5d9b21e4c6cb6..00000000000000
--- a/packages/test-utils/src/findOutermostIntrinsic.test.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { expect } from 'chai';
-import createMount from './createMount';
-import findOutermostIntrinsic from './findOutermostIntrinsic';
-
-describe('findOutermostIntrinsic', () => {
-  const mount = createMount({ strict: null });
-  const expectIntrinsic = (node, expected) => {
-    const wrapper = mount(node);
-    const outermostIntrinsic = findOutermostIntrinsic(wrapper);
-
-    if (expected === null) {
-      expect(outermostIntrinsic.exists()).to.equal(false);
-    } else {
-      expect(outermostIntrinsic.type()).to.equal(expected);
-      expect(outermostIntrinsic.type()).to.equal(
-        outermostIntrinsic.getDOMNode().nodeName.toLowerCase(),
-      );
-    }
-  };
-  const Headless = ({ children }) => children;
-
-  it('returns immediate DOM nodes', () => {
-    expectIntrinsic(<div>Hello, World!</div>, 'div');
-  });
-
-  it('only returns the outermost', () => {
-    expectIntrinsic(
-      <span>
-        <div>Hello, World!</div>
-      </span>,
-      'span',
-    );
-  });
-
-  it('ignores components', () => {
-    expectIntrinsic(
-      <Headless>
-        <div>Hello, World!</div>
-      </Headless>,
-      'div',
-    );
-    expectIntrinsic(
-      <Headless>
-        <Headless>
-          <div>Hello, World!</div>
-        </Headless>
-      </Headless>,
-      'div',
-    );
-    expectIntrinsic(
-      <Headless>
-        <Headless>
-          <div>
-            <Headless>
-              <span>Hello, World!</span>
-            </Headless>
-          </div>
-        </Headless>
-      </Headless>,
-      'div',
-    );
-  });
-
-  it('can handle that no DOM node is rendered', () => {
-    expectIntrinsic(<Headless>{false && <Headless />}</Headless>, null);
-  });
-});
diff --git a/packages/test-utils/src/findOutermostIntrinsic.ts b/packages/test-utils/src/findOutermostIntrinsic.ts
deleted file mode 100644
index ed1c1372d9bd39..00000000000000
--- a/packages/test-utils/src/findOutermostIntrinsic.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ReactWrapper } from 'enzyme';
-
-/**
- * checks if a given react wrapper wraps an intrinsic element i.e. a DOM node
- * @param {import('enzyme').ReactWrapper} reactWrapper
- * @returns {boolean} true if the given reactWrapper wraps an intrinsic element
- */
-export function wrapsIntrinsicElement(reactWrapper: ReactWrapper): boolean {
-  return typeof reactWrapper.type() === 'string';
-}
-
-/**
- * like ReactWrapper#getDOMNode() but returns a ReactWrapper
- * @param {import('enzyme').ReactWrapper} reactWrapper
- * @returns {import('enzyme').ReactWrapper} the wrapper for the outermost DOM node
- */
-export default function findOutermostIntrinsic(reactWrapper: ReactWrapper): ReactWrapper {
-  return reactWrapper.findWhere((n) => n.exists() && wrapsIntrinsicElement(n)).first();
-}
diff --git a/packages/test-utils/src/index.ts b/packages/test-utils/src/index.ts
index 6f0e1527448056..e80fc539833170 100644
--- a/packages/test-utils/src/index.ts
+++ b/packages/test-utils/src/index.ts
@@ -5,8 +5,6 @@ export { default as describeConformance } from './describeConformance';
 export * from './describeConformance';
 export { default as createDescribe } from './createDescribe';
 export * from './createRenderer';
-export { default as createMount } from './createMount';
-export { default as findOutermostIntrinsic, wrapsIntrinsicElement } from './findOutermostIntrinsic';
 export {
   default as focusVisible,
   simulatePointerDevice,