From b9c14fc8e479fae25eaa4ad914918aba6acaaef4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 16 Jul 2024 14:04:30 +0200
Subject: [PATCH] Fix errors

---
 .../test-utils/src/mochaHooks.test.js         |   1 +
 packages/mui-base/src/Button/Button.test.tsx  |  32 ++---
 .../ClickAwayListener.test.js                 |   1 +
 .../mui-base/src/Dropdown/Dropdown.test.tsx   |   1 +
 packages/mui-base/src/Menu/Menu.test.tsx      |   1 +
 .../src/MenuButton/MenuButton.test.tsx        |   2 +-
 packages/mui-base/src/Select/Select.test.tsx  |  24 ++--
 .../mui-base/src/Snackbar/Snackbar.test.tsx   |   1 +
 .../Unstable_NumberInput/NumberInput.test.tsx |  20 ++-
 .../src/Unstable_Popup/Popup.test.tsx         |   1 +
 .../useNumberInput.test.tsx                   |  12 +-
 .../useAutocomplete/useAutocomplete.test.js   |   8 +-
 .../mui-joy/src/Accordion/Accordion.test.tsx  |   4 +-
 .../src/Autocomplete/Autocomplete.test.tsx    |   8 +-
 .../mui-joy/src/Checkbox/Checkbox.test.tsx    |   6 +-
 .../ListItemButton/ListItemButton.test.tsx    |   3 +-
 packages/mui-joy/src/Radio/Radio.test.tsx     |   2 +-
 packages/mui-joy/src/Select/Select.test.tsx   |  10 +-
 .../mui-joy/src/Snackbar/Snackbar.test.tsx    |   1 +
 packages/mui-joy/src/Switch/Switch.test.tsx   |   6 +-
 .../mui-lab/src/TabContext/TabContext.test.js |   1 +
 .../src/Accordion/Accordion.test.js           |   4 +-
 .../AccordionSummary/AccordionSummary.test.js |   6 +-
 .../src/Autocomplete/Autocomplete.test.js     | 128 +++++++++++-------
 .../src/ButtonBase/ButtonBase.test.js         |   1 +
 .../src/CardHeader/CardHeader.test.js         |  15 +-
 packages/mui-material/src/Chip/Chip.test.js   |   4 +-
 .../ClickAwayListener.test.js                 |   1 +
 .../src/Collapse/Collapse.test.js             |  31 +++--
 .../mui-material/src/Dialog/Dialog.test.js    |  11 +-
 .../src/ListItem/ListItem.test.js             |   3 +-
 .../src/MenuItem/MenuItem.test.js             |   8 +-
 .../mui-material/src/Slider/Slider.test.js    |   3 +-
 .../src/Snackbar/Snackbar.test.js             |   4 +-
 .../src/StepButton/StepButton.test.js         |   3 +-
 .../SwipeableDrawer/SwipeableDrawer.test.js   |   4 +-
 .../mui-material/src/Switch/Switch.test.js    |   3 +-
 packages/mui-material/src/Tabs/Tabs.test.js   |   8 ++
 .../useAutocomplete/useAutocomplete.test.js   |   3 +-
 .../src/StylesProvider/StylesProvider.test.js |   3 +
 packages/mui-styles/src/styled/styled.test.js |  22 +--
 packages/mui-system/src/Box/Box.test.js       |  38 +++---
 42 files changed, 251 insertions(+), 197 deletions(-)

diff --git a/packages-internal/test-utils/src/mochaHooks.test.js b/packages-internal/test-utils/src/mochaHooks.test.js
index 2628a7a0543d68..eb99a562d19d46 100644
--- a/packages-internal/test-utils/src/mochaHooks.test.js
+++ b/packages-internal/test-utils/src/mochaHooks.test.js
@@ -83,6 +83,7 @@ describe('mochaHooks', () => {
         // not wrapped in act()
         unsafeSetState(1);
         // make sure effects are flushed
+        // eslint-disable-next-line testing-library/no-unnecessary-act
         act(() => {});
       });
 
diff --git a/packages/mui-base/src/Button/Button.test.tsx b/packages/mui-base/src/Button/Button.test.tsx
index 95a89a1d7d7d08..33e70679df54a6 100644
--- a/packages/mui-base/src/Button/Button.test.tsx
+++ b/packages/mui-base/src/Button/Button.test.tsx
@@ -63,46 +63,44 @@ describe('<Button />', () => {
         expect(button).not.to.have.attribute('disabled');
       });
 
-      it('can receive focus when focusableWhenDisabled is set', () => {
+      it('can receive focus when focusableWhenDisabled is set', async () => {
         const { getByRole } = render(<Button focusableWhenDisabled disabled />);
 
         const button = getByRole('button');
-        act(() => {
+        await act(async () => {
           button.focus();
         });
 
         expect(document.activeElement).to.equal(button);
       });
 
-      it('does not respond to user actions when disabled and focused', () => {
+      it('does not respond to user actions when disabled and focused', async () => {
         const handleClick = spy();
         const { getByRole } = render(
           <Button focusableWhenDisabled disabled onClick={handleClick} />,
         );
 
         const button = getByRole('button');
-        act(() => {
+        await act(async () => {
           button.focus();
-        });
-
-        act(() => {
           button.click();
-          fireEvent.keyDown(button, { key: 'Enter' });
-          fireEvent.keyUp(button, { key: ' ' });
         });
 
+        fireEvent.keyDown(button, { key: 'Enter' });
+        fireEvent.keyUp(button, { key: ' ' });
+
         expect(handleClick.callCount).to.equal(0);
       });
     });
 
     describe('as non-button element', () => {
-      it('can receive focus when focusableWhenDisabled is set', () => {
+      it('can receive focus when focusableWhenDisabled is set', async () => {
         const { getByRole } = render(
           <Button slots={{ root: 'span' }} focusableWhenDisabled disabled />,
         );
 
         const button = getByRole('button');
-        act(() => {
+        await act(async () => {
           button.focus();
         });
 
@@ -120,23 +118,21 @@ describe('<Button />', () => {
         expect(button).to.have.attribute('tabindex', '0');
       });
 
-      it('does not respond to user actions when disabled and focused', () => {
+      it('does not respond to user actions when disabled and focused', async () => {
         const handleClick = spy();
         const { getByRole } = render(
           <Button slots={{ root: 'span' }} focusableWhenDisabled disabled onClick={handleClick} />,
         );
 
         const button = getByRole('button');
-        act(() => {
+        await act(async () => {
           button.focus();
-        });
-
-        act(() => {
           button.click();
-          fireEvent.keyDown(button, { key: 'Enter' });
-          fireEvent.keyUp(button, { key: ' ' });
         });
 
+        fireEvent.keyDown(button, { key: 'Enter' });
+        fireEvent.keyUp(button, { key: ' ' });
+
         expect(handleClick.callCount).to.equal(0);
       });
     });
diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js
index 1cbd6e67d15e50..56093a648394ce 100644
--- a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js
+++ b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js
@@ -25,6 +25,7 @@ describe('<ClickAwayListener />', () => {
    * React bug: https://github.com/facebook/react/issues/20074
    */
   function render(...args) {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const result = clientRender(...args);
     clock.tick(0);
     return result;
diff --git a/packages/mui-base/src/Dropdown/Dropdown.test.tsx b/packages/mui-base/src/Dropdown/Dropdown.test.tsx
index dde3e91b3c4bbc..e3cc1b8f6bd31a 100644
--- a/packages/mui-base/src/Dropdown/Dropdown.test.tsx
+++ b/packages/mui-base/src/Dropdown/Dropdown.test.tsx
@@ -22,6 +22,7 @@ describe('<Dropdown />', () => {
     element: React.ReactElement<any, string | React.JSXElementConstructor<any>>,
     options?: RenderOptions,
   ): Promise<MuiRenderResult> {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const rendered = internalRender(element, options);
     await flushMicrotasks();
     return rendered;
diff --git a/packages/mui-base/src/Menu/Menu.test.tsx b/packages/mui-base/src/Menu/Menu.test.tsx
index 5f6ebbe141c311..7dbec0667f5fb1 100644
--- a/packages/mui-base/src/Menu/Menu.test.tsx
+++ b/packages/mui-base/src/Menu/Menu.test.tsx
@@ -32,6 +32,7 @@ describe('<Menu />', () => {
     element: React.ReactElement<any, string | React.JSXElementConstructor<any>>,
     options?: RenderOptions,
   ): Promise<MuiRenderResult> {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const rendered = internalRender(element, options);
     await flushMicrotasks();
     return rendered;
diff --git a/packages/mui-base/src/MenuButton/MenuButton.test.tsx b/packages/mui-base/src/MenuButton/MenuButton.test.tsx
index ee213658e70dd2..d2a5d48eec3a8a 100644
--- a/packages/mui-base/src/MenuButton/MenuButton.test.tsx
+++ b/packages/mui-base/src/MenuButton/MenuButton.test.tsx
@@ -98,7 +98,7 @@ describe('<MenuButton />', () => {
         button.focus();
       });
 
-      expect(document.activeElement).to.equal(button);
+      expect(button).toHaveFocus();
     });
   });
 
diff --git a/packages/mui-base/src/Select/Select.test.tsx b/packages/mui-base/src/Select/Select.test.tsx
index 538706b5cd5dab..ad1c7798cebb0d 100644
--- a/packages/mui-base/src/Select/Select.test.tsx
+++ b/packages/mui-base/src/Select/Select.test.tsx
@@ -9,6 +9,7 @@ import {
   MuiRenderResult,
   RenderOptions,
   flushMicrotasks,
+  within,
 } from '@mui/internal-test-utils';
 import userEvent from '@testing-library/user-event';
 import { Select, SelectListboxSlotProps, selectClasses } from '@mui/base/Select';
@@ -28,6 +29,7 @@ describe('<Select />', () => {
     element: React.ReactElement<any, string | React.JSXElementConstructor<any>>,
     options?: RenderOptions,
   ): Promise<MuiRenderResult> {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const rendered = internalRender(element, options);
     await flushMicrotasks();
     return rendered;
@@ -918,15 +920,15 @@ describe('<Select />', () => {
     });
 
     it('renders a zero-width space when there is no selected value nor placeholder and renderValue is not provided', async () => {
-      const { getByRole } = await render(
+      await render(
         <Select>
           <Option value={1}>One</Option>
           <Option value={2}>Two</Option>
         </Select>,
       );
 
-      const select = getByRole('combobox');
-      const zws = select.querySelector('.notranslate');
+      const select = screen.getByRole('combobox');
+      const zws = within(select).getByText('​'); // zero-width space
 
       expect(zws).not.to.equal(null);
     });
@@ -1160,7 +1162,7 @@ describe('<Select />', () => {
       );
 
       const input = getAllByRole('textbox')[0];
-      expect(document.activeElement).to.equal(input);
+      expect(input).toHaveFocus();
     });
 
     it('scrolls to initially highlighted option after opening', async function test() {
@@ -1219,7 +1221,7 @@ describe('<Select />', () => {
       );
 
       const select = getByRole('combobox');
-      expect(document.activeElement).to.equal(select);
+      expect(select).toHaveFocus();
     });
   });
 
@@ -1346,7 +1348,7 @@ describe('<Select />', () => {
   describe('browser autofill', () => {
     it('sets value and calls external onChange when browser autofills', async () => {
       const onChangeHandler = spy();
-      const { container } = await render(
+      await render(
         <Select onChange={onChangeHandler} defaultValue="germany" autoComplete="country">
           <Option value="france">France</Option>
           <Option value="germany">Germany</Option>
@@ -1354,7 +1356,7 @@ describe('<Select />', () => {
         </Select>,
       );
 
-      const hiddenInput = container.querySelector('[autocomplete="country"]');
+      const hiddenInput = screen.getByRole('textbox', { hidden: true });
 
       expect(hiddenInput).not.to.eq(null);
       expect(hiddenInput).to.have.value('germany');
@@ -1372,7 +1374,7 @@ describe('<Select />', () => {
 
     it('does not set value when browser autofills invalid value', async () => {
       const onChangeHandler = spy();
-      const { container } = await render(
+      await render(
         <Select onChange={onChangeHandler} defaultValue="germany" autoComplete="country">
           <Option value="france">France</Option>
           <Option value="germany">Germany</Option>
@@ -1380,7 +1382,7 @@ describe('<Select />', () => {
         </Select>,
       );
 
-      const hiddenInput = container.querySelector('[autocomplete="country"]');
+      const hiddenInput = screen.getByRole('textbox', { hidden: true });
 
       expect(hiddenInput).not.to.eq(null);
       expect(hiddenInput).to.have.value('germany');
@@ -1397,7 +1399,7 @@ describe('<Select />', () => {
 
     it('clears value and calls external onChange when browser clears autofill', async () => {
       const onChangeHandler = spy();
-      const { container } = await render(
+      await render(
         <Select onChange={onChangeHandler} defaultValue="germany" autoComplete="country">
           <Option value="france">France</Option>
           <Option value="germany">Germany</Option>
@@ -1405,7 +1407,7 @@ describe('<Select />', () => {
         </Select>,
       );
 
-      const hiddenInput = container.querySelector('[autocomplete="country"]');
+      const hiddenInput = screen.getByRole('textbox', { hidden: true });
 
       expect(hiddenInput).not.to.eq(null);
       expect(hiddenInput).to.have.value('germany');
diff --git a/packages/mui-base/src/Snackbar/Snackbar.test.tsx b/packages/mui-base/src/Snackbar/Snackbar.test.tsx
index 30746b3d31ded9..e749259827ebac 100644
--- a/packages/mui-base/src/Snackbar/Snackbar.test.tsx
+++ b/packages/mui-base/src/Snackbar/Snackbar.test.tsx
@@ -18,6 +18,7 @@ describe('<Snackbar />', () => {
    * React bug: https://github.com/facebook/react/issues/20074
    */
   function render(...args: [React.ReactElement<any>]) {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const result = clientRender(...args);
     clock.tick(0);
     return result;
diff --git a/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx b/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
index 5f3b0fc32b4604..da7f16d2b2661d 100644
--- a/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
+++ b/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
@@ -357,21 +357,21 @@ describe('<NumberInput />', () => {
       const incrementButton = getByTestId('increment-btn');
       const decrementButton = getByTestId('decrement-btn');
 
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.body).toHaveFocus();
 
       await userEvent.click(incrementButton);
 
-      expect(document.activeElement).to.equal(input);
+      expect(input).toHaveFocus();
 
-      act(() => {
+      await act(async () => {
         input.blur();
       });
 
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.body).toHaveFocus();
 
       await userEvent.click(decrementButton);
 
-      expect(document.activeElement).to.equal(input);
+      expect(input).toHaveFocus();
     });
   });
 
@@ -554,13 +554,13 @@ describe('<NumberInput />', () => {
       const { getByRole } = render(<NumberInput />);
 
       const input = getByRole('textbox') as HTMLInputElement;
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.body).toHaveFocus();
 
       await userEvent.keyboard('[Tab]');
-      expect(document.activeElement).to.equal(input);
+      expect(input).toHaveFocus();
 
       await userEvent.keyboard('[Tab]');
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.body).toHaveFocus();
     });
   });
 
@@ -600,9 +600,7 @@ describe('<NumberInput />', () => {
     const input = getByRole('textbox') as HTMLInputElement;
     const button = getByTestId('button') as HTMLButtonElement;
 
-    act(() => {
-      fireEvent.click(button);
-    });
+    fireEvent.click(button);
 
     await userEvent.click(input);
     expect(input.value).to.equal('20');
diff --git a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
index 6239c136638c5e..9c6c4fbcb03829 100644
--- a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
+++ b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
@@ -52,6 +52,7 @@ describe('<Popup />', () => {
   describeConformanceUnstyled(<Popup {...defaultProps} />, () => ({
     inheritComponent: 'div',
     render: async (...renderArgs) => {
+      // eslint-disable-next-line testing-library/render-result-naming-convention
       const result = render(...renderArgs);
       await waitForPosition();
 
diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx
index 0b2a628606db49..7bc5b82d0119a5 100644
--- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx
+++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx
@@ -132,7 +132,7 @@ describe('useNumberInput', () => {
       expect(handleChange.callCount).to.equal(0);
 
       await userEvent.keyboard('[Tab]');
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.body).toHaveFocus();
 
       expect(handleChange.callCount).to.equal(1);
       expect(handleChange.args[0][1]).to.equal(34);
@@ -180,7 +180,7 @@ describe('useNumberInput', () => {
       await userEvent.keyboard('9');
 
       await userEvent.keyboard('[Tab]');
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.body).toHaveFocus();
 
       expect(handleChange.args[0][1]).to.equal(5);
     });
@@ -204,7 +204,7 @@ describe('useNumberInput', () => {
       await userEvent.keyboard('-9');
 
       await userEvent.keyboard('[Tab]');
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.body).toHaveFocus();
 
       expect(handleChange.args[0][1]).to.equal(5);
     });
@@ -229,7 +229,7 @@ describe('useNumberInput', () => {
       await userEvent.keyboard('4');
 
       await userEvent.keyboard('[Tab]');
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.body).toHaveFocus();
 
       expect(handleChange.args[0][1]).to.equal(5);
     });
@@ -254,7 +254,7 @@ describe('useNumberInput', () => {
       expect(input.value).to.equal('');
 
       await userEvent.keyboard('[Tab]');
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.body).toHaveFocus();
 
       expect(handleChange.callCount).to.equal(1);
       expect(handleChange.args[0][1]).to.equal(null);
@@ -280,7 +280,7 @@ describe('useNumberInput', () => {
       expect(input.value).to.equal('-');
 
       await userEvent.keyboard('[Tab]');
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.body).toHaveFocus();
 
       expect(handleChange.callCount).to.equal(1);
       expect(handleChange.args[0][1]).to.equal(null);
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
index 72ac62297340d0..ae3b709a2e4d48 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen, ErrorBoundary, act, fireEvent } from '@mui/internal-test-utils';
+import { createRenderer, screen, ErrorBoundary, fireEvent } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { useAutocomplete, createFilterOptions } from '@mui/base/useAutocomplete';
 
@@ -319,10 +319,8 @@ describe('useAutocomplete', () => {
       render(<Test options={['foo', 'bar']} />);
       const input = screen.getByRole('combobox');
 
-      act(() => {
-        fireEvent.change(input, { target: { value: 'free' } });
-        input.blur();
-      });
+      fireEvent.change(input, { target: { value: 'free' } });
+      fireEvent.blur(input);
 
       expect(input.value).to.equal('free');
     });
diff --git a/packages/mui-joy/src/Accordion/Accordion.test.tsx b/packages/mui-joy/src/Accordion/Accordion.test.tsx
index aebd710821c6b7..8b877b1b5767a8 100644
--- a/packages/mui-joy/src/Accordion/Accordion.test.tsx
+++ b/packages/mui-joy/src/Accordion/Accordion.test.tsx
@@ -121,13 +121,13 @@ describe('<Accordion />', () => {
   });
 
   it('should warn when switching from controlled to uncontrolled', () => {
-    const wrapper = render(
+    const { setProps } = render(
       <Accordion expanded>
         <AccordionSummary>Header</AccordionSummary>
       </Accordion>,
     );
 
-    expect(() => wrapper.setProps({ expanded: undefined })).to.toErrorDev(
+    expect(() => setProps({ expanded: undefined })).to.toErrorDev(
       'MUI: A component is changing the controlled expanded state of Accordion to be uncontrolled.',
     );
   });
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
index 0faa8ba03dc113..478e19cb023479 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -102,9 +102,10 @@ describe('Joy <Autocomplete />', () => {
 
       act(() => {
         input.focus();
-        fireEvent.change(document.activeElement!, { target: { value: 'a' } });
       });
 
+      fireEvent.change(document.activeElement!, { target: { value: 'a' } });
+
       expect(input.value).to.equal('a');
 
       act(() => {
@@ -344,9 +345,10 @@ describe('Joy <Autocomplete />', () => {
       );
       const textbox = screen.getByRole('combobox');
 
+      fireEvent.change(textbox, { target: { value: 't' } });
+      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+
       act(() => {
-        fireEvent.change(textbox, { target: { value: 't' } });
-        fireEvent.keyDown(textbox, { key: 'ArrowDown' });
         textbox.blur();
       });
 
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.test.tsx b/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
index f2a5636cd49926..c8e4302e026516 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
@@ -90,10 +90,8 @@ describe('<Checkbox />', () => {
     const { getByRole } = render(<Checkbox defaultChecked />);
 
     // how a user would trigger it
-    act(() => {
-      getByRole('checkbox').click();
-      fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
-    });
+    fireEvent.click(getByRole('checkbox'));
+    fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
 
     expect(getByRole('checkbox')).to.have.property('checked', false);
   });
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
index 08f3eb26a2c20d..b2f526165c54ee 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
@@ -65,8 +65,9 @@ describe('Joy <ListItemButton />', () => {
       const { getByRole } = render(<ListItemButton />);
       const button = getByRole('button');
 
+      fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
+
       act(() => {
-        fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
         button.focus();
       });
 
diff --git a/packages/mui-joy/src/Radio/Radio.test.tsx b/packages/mui-joy/src/Radio/Radio.test.tsx
index fdb63ce9459b5c..0aaa8ba51c34ae 100644
--- a/packages/mui-joy/src/Radio/Radio.test.tsx
+++ b/packages/mui-joy/src/Radio/Radio.test.tsx
@@ -104,8 +104,8 @@ describe('<Radio />', () => {
     // how a user would trigger it
     act(() => {
       getByRole('radio').click();
-      fireEvent.change(getByRole('radio'), { target: { checked: '' } });
     });
+    fireEvent.change(getByRole('radio'), { target: { checked: '' } });
 
     expect(getByRole('radio')).to.have.property('checked', false);
   });
diff --git a/packages/mui-joy/src/Select/Select.test.tsx b/packages/mui-joy/src/Select/Select.test.tsx
index bfe89587c6bdbf..9364d24586b11f 100644
--- a/packages/mui-joy/src/Select/Select.test.tsx
+++ b/packages/mui-joy/src/Select/Select.test.tsx
@@ -616,17 +616,15 @@ describe('Joy <Select />', () => {
         <Option value="1">Eric</Option>
       </Select>,
     );
+
     // Fire Click of the avatar
-    act(() => {
-      fireEvent.click(getByTestId('test-element'));
-    });
+    fireEvent.click(getByTestId('test-element'));
 
     expect(getByRole('combobox', { hidden: true })).to.have.attribute('aria-expanded', 'true');
 
     // click again should close
-    act(() => {
-      fireEvent.click(getByTestId('test-element'));
-    });
+    fireEvent.click(getByTestId('test-element'));
+
     expect(getByRole('combobox', { hidden: true })).to.have.attribute('aria-expanded', 'false');
   });
 
diff --git a/packages/mui-joy/src/Snackbar/Snackbar.test.tsx b/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
index af55c7aa4e5d98..1095f4c521c4dd 100644
--- a/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
+++ b/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
@@ -20,6 +20,7 @@ describe('Joy <Snackbar />', () => {
    * React bug: https://github.com/facebook/react/issues/20074
    */
   function render(...args: [React.ReactElement<any>]) {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const result = clientRender(...args);
     clock.tick(0);
     return result;
diff --git a/packages/mui-joy/src/Switch/Switch.test.tsx b/packages/mui-joy/src/Switch/Switch.test.tsx
index d14a52403e2db0..c3b03bcc933afd 100644
--- a/packages/mui-joy/src/Switch/Switch.test.tsx
+++ b/packages/mui-joy/src/Switch/Switch.test.tsx
@@ -97,8 +97,8 @@ describe('<Switch />', () => {
     // how a user would trigger it
     act(() => {
       getByRole('switch').click();
-      fireEvent.change(getByRole('switch'), { target: { checked: '' } });
     });
+    fireEvent.change(getByRole('switch'), { target: { checked: '' } });
 
     expect(getByRole('switch')).to.have.property('checked', false);
   });
@@ -126,8 +126,8 @@ describe('<Switch />', () => {
       // how a user would trigger it
       act(() => {
         getByRole('switch').click();
-        fireEvent.change(getByRole('switch'), { target: { checked: '' } });
       });
+      fireEvent.change(getByRole('switch'), { target: { checked: '' } });
 
       expect(getByText('On')).toBeVisible();
     });
@@ -142,8 +142,8 @@ describe('<Switch />', () => {
       // how a user would trigger it
       act(() => {
         getByRole('switch').click();
-        fireEvent.change(getByRole('switch'), { target: { checked: '' } });
       });
+      fireEvent.change(getByRole('switch'), { target: { checked: '' } });
 
       expect(getByText('On')).toBeVisible();
     });
diff --git a/packages/mui-lab/src/TabContext/TabContext.test.js b/packages/mui-lab/src/TabContext/TabContext.test.js
index 664124493a6c70..71515aa4f1ae24 100644
--- a/packages/mui-lab/src/TabContext/TabContext.test.js
+++ b/packages/mui-lab/src/TabContext/TabContext.test.js
@@ -75,6 +75,7 @@ describe('<TabContext />', () => {
       );
     }
 
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const markup = ReactDOMServer.renderToStaticMarkup(
       <TabContext value="0">
         <Tabs value="0" />
diff --git a/packages/mui-material/src/Accordion/Accordion.test.js b/packages/mui-material/src/Accordion/Accordion.test.js
index c1d8f3889c73d8..56ce5c8e989adb 100644
--- a/packages/mui-material/src/Accordion/Accordion.test.js
+++ b/packages/mui-material/src/Accordion/Accordion.test.js
@@ -196,13 +196,13 @@ describe('<Accordion />', () => {
   });
 
   it('should warn when switching from controlled to uncontrolled', () => {
-    const wrapper = render(
+    const { setProps } = render(
       <Accordion expanded TransitionComponent={NoTransition}>
         {minimalChildren}
       </Accordion>,
     );
 
-    expect(() => wrapper.setProps({ expanded: undefined })).to.toErrorDev(
+    expect(() => setProps({ expanded: undefined })).to.toErrorDev(
       'MUI: A component is changing the controlled expanded state of Accordion to be uncontrolled.',
     );
   });
diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
index a8d1cf1aaa510d..821368e4d378d0 100644
--- a/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
+++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
@@ -64,9 +64,9 @@ describe('<AccordionSummary />', () => {
   it('should fire onBlur when the button blurs', () => {
     const handleBlur = spy();
     const { getByRole } = render(<AccordionSummary onBlur={handleBlur} />);
+    const button = getByRole('button');
 
     act(() => {
-      const button = getByRole('button');
       button.focus();
       button.blur();
     });
@@ -111,9 +111,7 @@ describe('<AccordionSummary />', () => {
 
     // this doesn't actually apply focus like in the browser. we need to move focus manually
     fireEvent.keyDown(document.body, { key: 'Tab' });
-    act(() => {
-      getByRole('button').focus();
-    });
+    fireEvent.focus(getByRole('button'));
 
     expect(handleFocusVisible.callCount).to.equal(1);
   });
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 7fda0169707e28..51f51d71e5f5e4 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -7,6 +7,7 @@ import {
   fireEvent,
   screen,
   strictModeDoubleLoggingSuppressed,
+  within,
 } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
@@ -25,6 +26,7 @@ import Tooltip from '@mui/material/Tooltip';
 import describeConformance from '../../test/describeConformance';
 
 function checkHighlightIs(listbox, expected) {
+  // eslint-disable-next-line testing-library/no-node-access
   const focused = listbox.querySelector(`.${classes.focused}`);
 
   if (expected) {
@@ -106,7 +108,7 @@ describe('<Autocomplete />', () => {
     }),
   );
 
-  it('should be customizable in the theme', () => {
+  it('should be customizable in the theme', async () => {
     const theme = createTheme({
       components: {
         MuiAutocomplete: {
@@ -124,6 +126,7 @@ describe('<Autocomplete />', () => {
         <Autocomplete options={[]} open renderInput={(params) => <TextField {...params} />} />
       </ThemeProvider>,
     );
+    // eslint-disable-next-line testing-library/no-node-access
     expect(document.querySelector(`.${classes.paper}`)).to.toHaveComputedStyle({
       mixBlendMode: 'darken',
     });
@@ -138,13 +141,14 @@ describe('<Autocomplete />', () => {
 
       act(() => {
         input.focus();
-        fireEvent.change(document.activeElement, { target: { value: 'a' } });
       });
 
+      fireEvent.change(input, { target: { value: 'a' } });
+
       expect(input.value).to.equal('a');
 
       act(() => {
-        document.activeElement.blur();
+        input.blur();
       });
       expect(input.value).to.equal('');
     });
@@ -157,7 +161,9 @@ describe('<Autocomplete />', () => {
           renderInput={(params) => <TextField {...params} />}
         />,
       );
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasClearIcon);
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
     });
   });
@@ -173,6 +179,7 @@ describe('<Autocomplete />', () => {
         />,
       );
       fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
+      // eslint-disable-next-line testing-library/no-node-access
       expect(document.querySelector(`.${classes.paper}`).textContent).to.equal('Loading…');
     });
 
@@ -186,11 +193,13 @@ describe('<Autocomplete />', () => {
       );
 
       fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
+      // eslint-disable-next-line testing-library/no-node-access
       expect(document.querySelector(`.${classes.paper}`).textContent).not.to.equal('Loading…');
 
       const listbox = screen.getByRole('listbox');
-      const htmlOptions = listbox.querySelectorAll('li');
-      expect(htmlOptions[0].innerHTML).to.equal('one');
+      const firstOption = within(listbox).getByRole('option', { name: 'one' });
+
+      expect(firstOption).to.not.equal(null);
     });
   });
 
@@ -208,8 +217,8 @@ describe('<Autocomplete />', () => {
       );
 
       checkHighlightIs(getByRole('listbox'), 'one');
-      fireEvent.change(document.activeElement, { target: { value: 'oo' } });
-      fireEvent.change(document.activeElement, { target: { value: 'o' } });
+      fireEvent.change(getByRole('combobox'), { target: { value: 'oo' } });
+      fireEvent.change(getByRole('combobox'), { target: { value: 'o' } });
       checkHighlightIs(getByRole('listbox'), 'one');
     });
 
@@ -226,7 +235,7 @@ describe('<Autocomplete />', () => {
       );
 
       checkHighlightIs(getByRole('listbox'), 'one');
-      fireEvent.change(document.activeElement, { target: { value: 'two' } });
+      fireEvent.change(getByRole('combobox'), { target: { value: 'two' } });
       checkHighlightIs(getByRole('listbox'), 'two');
     });
 
@@ -481,17 +490,15 @@ describe('<Autocomplete />', () => {
       );
       const textbox = screen.getByRole('combobox');
 
-      act(() => {
-        fireEvent.change(textbox, { target: { value: 't' } });
-        fireEvent.keyDown(textbox, { key: 'ArrowDown' });
-        textbox.blur();
-      });
+      fireEvent.change(textbox, { target: { value: 't' } });
+      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+      fireEvent.blur(textbox);
 
       expect(handleChange.callCount).to.equal(1);
       expect(handleChange.args[0][1]).to.deep.equal(options);
     });
 
-    it('should add new value when autoSelect & multiple & freeSolo on blur', () => {
+    it('should add new value when autoSelect & multiple & freeSolo on blur', async () => {
       const handleChange = spy();
       render(
         <Autocomplete
@@ -504,9 +511,9 @@ describe('<Autocomplete />', () => {
         />,
       );
 
-      fireEvent.change(document.activeElement, { target: { value: 'a' } });
+      fireEvent.change(screen.getByRole('combobox'), { target: { value: 'a' } });
       act(() => {
-        document.activeElement.blur();
+        screen.getByRole('combobox').blur();
       });
 
       expect(handleChange.callCount).to.equal(1);
@@ -528,7 +535,7 @@ describe('<Autocomplete />', () => {
 
       act(() => {
         input.focus();
-        document.activeElement.blur();
+        input.blur();
         input.focus();
       });
     });
@@ -1056,7 +1063,7 @@ describe('<Autocomplete />', () => {
     it('does not open on clear', () => {
       const handleOpen = spy();
       const handleChange = spy();
-      const { container } = render(
+      render(
         <Autocomplete
           onOpen={handleOpen}
           onChange={handleChange}
@@ -1067,7 +1074,7 @@ describe('<Autocomplete />', () => {
         />,
       );
 
-      const clear = container.querySelector('button');
+      const clear = screen.getByLabelText('Clear');
       fireEvent.click(clear);
 
       expect(handleOpen.callCount).to.equal(0);
@@ -1162,7 +1169,7 @@ describe('<Autocomplete />', () => {
       );
       const textbox = screen.getByRole('combobox');
       fireEvent.change(textbox, { target: { value: 'test' } });
-      expect(document.activeElement.value).to.equal('test');
+      expect(textbox.value).to.equal('test');
       act(() => {
         textbox.blur();
       });
@@ -1179,7 +1186,7 @@ describe('<Autocomplete />', () => {
       );
       const textbox = screen.getByRole('combobox');
       fireEvent.change(textbox, { target: { value: 'test' } });
-      expect(document.activeElement.value).to.equal('test');
+      expect(textbox.value).to.equal('test');
       act(() => {
         textbox.blur();
       });
@@ -1198,7 +1205,7 @@ describe('<Autocomplete />', () => {
       );
       const textbox = screen.getByRole('combobox');
       fireEvent.change(textbox, { target: { value: 'test' } });
-      expect(document.activeElement.value).to.equal('test');
+      expect(textbox.value).to.equal('test');
       act(() => {
         textbox.blur();
       });
@@ -1329,7 +1336,7 @@ describe('<Autocomplete />', () => {
       expect(textbox).to.have.attribute('aria-expanded', 'false');
 
       act(() => {
-        document.activeElement.blur();
+        textbox.blur();
       });
 
       expect(textbox).to.have.attribute('aria-expanded', 'false');
@@ -1560,6 +1567,7 @@ describe('<Autocomplete />', () => {
 
       // userEvent will fail at releasing MouseLeft if we target the
       // <button> since it has "pointer-events: none"
+      // eslint-disable-next-line testing-library/no-node-access
       const popupIndicator = container.querySelector(`.${classes.endAdornment}`);
 
       const user = userEvent.setup();
@@ -1597,7 +1605,9 @@ describe('<Autocomplete />', () => {
           renderInput={(params) => <TextField {...params} />}
         />,
       );
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelector(`.${classes.root}`)).not.to.have.class(classes.hasClearIcon);
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
     });
 
@@ -1647,7 +1657,9 @@ describe('<Autocomplete />', () => {
         />,
       );
       expect(queryByTitle('Clear')).to.equal(null);
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelector(`.${classes.root}`)).not.to.have.class(classes.hasClearIcon);
     });
   });
@@ -1957,7 +1969,7 @@ describe('<Autocomplete />', () => {
       fireEvent.click(input);
 
       const listbox = getByRole('listbox');
-      const firstOption = listbox.querySelector('li');
+      const firstOption = within(listbox).getByRole('option', { name: 'one' });
       fireEvent.click(firstOption);
 
       expect(handleChange.args[0][1]).to.equal('one');
@@ -1983,9 +1995,9 @@ describe('<Autocomplete />', () => {
       fireEvent.click(input);
 
       const listbox = getByRole('listbox');
-      const htmlOptions = listbox.querySelectorAll('li');
+      const firstOption = within(listbox).getByRole('option', { name: 'one' });
 
-      expect(htmlOptions[0].innerHTML).to.equal('one');
+      expect(firstOption).to.not.equal(null);
     });
 
     it("should display a 'no options' message if no options are available", () => {
@@ -1997,6 +2009,7 @@ describe('<Autocomplete />', () => {
       expect(textbox).to.have.attribute('aria-expanded', 'false');
       expect(textbox).not.to.have.attribute('aria-owns');
       expect(textbox).not.to.have.attribute('aria-controls');
+      // eslint-disable-next-line testing-library/no-node-access
       expect(document.querySelector(`.${classes.paper}`)).to.have.text('No options');
     });
   });
@@ -2059,21 +2072,21 @@ describe('<Autocomplete />', () => {
       );
       const textbox = screen.getByRole('combobox');
 
-      fireEvent.change(document.activeElement, { target: { value: 'O' } });
+      fireEvent.change(textbox, { target: { value: 'O' } });
 
-      expect(document.activeElement.value).to.equal('O');
+      expect(textbox.value).to.equal('O');
 
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
 
-      expect(document.activeElement.value).to.equal('one');
-      expect(document.activeElement.selectionStart).to.equal(1);
-      expect(document.activeElement.selectionEnd).to.equal(3);
+      expect(textbox.value).to.equal('one');
+      expect(textbox.selectionStart).to.equal(1);
+      expect(textbox.selectionEnd).to.equal(3);
 
       fireEvent.keyDown(textbox, { key: 'Enter' });
 
-      expect(document.activeElement.value).to.equal('one');
-      expect(document.activeElement.selectionStart).to.equal(3);
-      expect(document.activeElement.selectionEnd).to.equal(3);
+      expect(textbox.value).to.equal('one');
+      expect(textbox.selectionStart).to.equal(3);
+      expect(textbox.selectionEnd).to.equal(3);
     });
   });
 
@@ -2192,9 +2205,7 @@ describe('<Autocomplete />', () => {
       const textbox = getByRole('combobox');
       const tooltip = getByText('tooltip');
 
-      act(() => {
-        fireEvent.click(tooltip);
-      });
+      fireEvent.click(tooltip);
 
       expect(textbox).not.toHaveFocus();
     });
@@ -2222,10 +2233,10 @@ describe('<Autocomplete />', () => {
       render(<MyComponent />);
 
       expect(handleChange.callCount).to.equal(0);
-      fireEvent.change(document.activeElement, { target: { value: 'a' } });
+      fireEvent.change(screen.getByRole('combobox'), { target: { value: 'a' } });
       expect(handleChange.callCount).to.equal(1);
       expect(handleChange.args[0][0]).to.equal('a');
-      expect(document.activeElement.value).to.equal('');
+      expect(screen.getByRole('combobox').value).to.equal('');
     });
 
     it('should fire the input change event before the change event', () => {
@@ -2251,7 +2262,7 @@ describe('<Autocomplete />', () => {
 
   describe('prop: filterOptions', () => {
     it('should ignore object keys by default', () => {
-      const { queryAllByRole } = render(
+      const { queryAllByRole, getByRole } = render(
         <Autocomplete
           open
           options={[
@@ -2272,11 +2283,11 @@ describe('<Autocomplete />', () => {
       options = queryAllByRole('option');
       expect(options.length).to.equal(2);
 
-      fireEvent.change(document.activeElement, { target: { value: 'value' } });
+      fireEvent.change(getByRole('combobox'), { target: { value: 'value' } });
       options = queryAllByRole('option');
       expect(options.length).to.equal(0);
 
-      fireEvent.change(document.activeElement, { target: { value: 'one' } });
+      fireEvent.change(getByRole('combobox'), { target: { value: 'one' } });
       options = queryAllByRole('option');
       expect(options.length).to.equal(1);
     });
@@ -2353,11 +2364,13 @@ describe('<Autocomplete />', () => {
       fireEvent.change(textbox, { target: { value: 'three' } });
       fireEvent.keyDown(textbox, { key: 'Enter' });
 
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelectorAll('[class*="MuiChip-root"]')).to.have.length(3);
 
       fireEvent.change(textbox, { target: { value: 'three' } });
       fireEvent.keyDown(textbox, { key: 'Enter' });
 
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelectorAll('[class*="MuiChip-root"]')).to.have.length(3);
     });
 
@@ -2390,6 +2403,7 @@ describe('<Autocomplete />', () => {
         <Autocomplete freeSolo options={[]} renderInput={(params) => <TextField {...params} />} />,
       );
 
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelector(`.${classes.endAdornment}`)).to.equal(null);
     });
 
@@ -2505,7 +2519,7 @@ describe('<Autocomplete />', () => {
     it('provides a reason and details on clear', () => {
       const handleChange = spy();
       const options = ['one', 'two', 'three'];
-      const { container } = render(
+      render(
         <Autocomplete
           multiple
           value={options}
@@ -2515,7 +2529,7 @@ describe('<Autocomplete />', () => {
         />,
       );
 
-      const button = container.querySelector('button');
+      const button = screen.getByTitle('Clear');
       fireEvent.click(button);
       expect(handleChange.callCount).to.equal(1);
       expect(handleChange.args[0][1]).to.deep.equal([]);
@@ -2537,6 +2551,7 @@ describe('<Autocomplete />', () => {
         />,
       );
 
+      // eslint-disable-next-line testing-library/no-node-access
       await user.type(document.activeElement, 'a');
 
       expect(handleInputChange.callCount).to.equal(1);
@@ -2815,7 +2830,7 @@ describe('<Autocomplete />', () => {
   });
 
   it('should specify option key for duplicate options', () => {
-    const { getAllByRole } = render(
+    const { getAllByRole, getByRole } = render(
       <Autocomplete
         open
         options={[
@@ -2830,7 +2845,7 @@ describe('<Autocomplete />', () => {
       />,
     );
 
-    fireEvent.change(document.activeElement, { target: { value: 'th' } });
+    fireEvent.change(getByRole('combobox'), { target: { value: 'th' } });
     const options = getAllByRole('option');
     expect(options.length).to.equal(2);
   });
@@ -2846,6 +2861,7 @@ describe('<Autocomplete />', () => {
         />,
       );
 
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.fullWidth);
     });
   });
@@ -2974,7 +2990,7 @@ describe('<Autocomplete />', () => {
       );
       const textbox = screen.getByRole('combobox');
 
-      fireEvent.change(document.activeElement, { target: { value: 'one' } });
+      fireEvent.change(textbox, { target: { value: 'one' } });
       expect(screen.getAllByRole('option').length).to.equal(2);
 
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
@@ -3198,7 +3214,9 @@ describe('<Autocomplete />', () => {
           renderInput={(params) => <TextField {...params} />}
         />,
       );
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelector(`.${classes.root}`)).not.to.have.class(classes.hasClearIcon);
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon);
     });
 
@@ -3248,6 +3266,7 @@ describe('<Autocomplete />', () => {
         />,
       );
 
+      // eslint-disable-next-line testing-library/no-node-access
       const chip = container.querySelector(`.${chipClasses.root}`);
       expect(chip).not.to.have.class(chipClasses.deletable);
 
@@ -3255,8 +3274,10 @@ describe('<Autocomplete />', () => {
       act(() => {
         textbox.focus();
       });
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelectorAll(`.${chipClasses.root}`)).to.have.length(2);
       fireEvent.keyDown(textbox, { key: 'Backspace' });
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelectorAll(`.${chipClasses.root}`)).to.have.length(2);
     });
   });
@@ -3282,9 +3303,11 @@ describe('<Autocomplete />', () => {
 
       fireEvent.keyDown(textbox, { key: 'ArrowDown' }); // highlight another option
 
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelectorAll(`.${chipClasses.root}`)).to.have.length(1);
 
       fireEvent.keyDown(textbox, { key: 'Backspace' });
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelectorAll(`.${chipClasses.root}`)).to.have.length(0);
     });
 
@@ -3307,9 +3330,11 @@ describe('<Autocomplete />', () => {
 
       fireEvent.keyDown(textbox, { key: 'ArrowDown' }); // highlight another option
 
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelectorAll(`.${chipClasses.root}`)).to.have.length(1);
 
       fireEvent.keyDown(textbox, { key: 'Backspace' });
+      // eslint-disable-next-line testing-library/no-node-access
       expect(container.querySelectorAll(`.${chipClasses.root}`)).to.have.length(0);
     });
   });
@@ -3323,6 +3348,7 @@ describe('<Autocomplete />', () => {
         />,
       );
 
+      // eslint-disable-next-line testing-library/no-node-access
       const root = container.querySelector(`.${classes.root}`);
 
       expect(root).not.to.have.class(classes.expanded);
@@ -3338,6 +3364,7 @@ describe('<Autocomplete />', () => {
         <Autocomplete options={[]} renderInput={(params) => <TextField {...params} autoFocus />} />,
       );
 
+      // eslint-disable-next-line testing-library/no-node-access
       const root = container.querySelector(`.${classes.root}`);
 
       expect(root).not.to.have.class(classes.expanded);
@@ -3413,12 +3440,15 @@ describe('<Autocomplete />', () => {
     expect(listbox).to.have.property('scrollTop', 0);
 
     const options = getAllByRole('option');
+
+    fireEvent.touchStart(options[1]);
+
     act(() => {
-      fireEvent.touchStart(options[1]);
       listbox.scrollBy(0, 60);
-      setProps({ options: getOptions(10) });
     });
 
+    setProps({ options: getOptions(10) });
+
     expect(listbox).to.have.property('scrollTop', 60);
   });
 });
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.test.js b/packages/mui-material/src/ButtonBase/ButtonBase.test.js
index 569b3d9b4c488e..2cba1a564754b8 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.test.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.test.js
@@ -1145,6 +1145,7 @@ describe('<ButtonBase />', () => {
         await act(async () => {
           button.focus();
         });
+        fireEvent.keyDown(button, { key: 'Enter' });
 
         fireEvent.keyDown(button, { key: 'Enter' });
 
diff --git a/packages/mui-material/src/CardHeader/CardHeader.test.js b/packages/mui-material/src/CardHeader/CardHeader.test.js
index 2c40497429048f..766573fe83fd04 100644
--- a/packages/mui-material/src/CardHeader/CardHeader.test.js
+++ b/packages/mui-material/src/CardHeader/CardHeader.test.js
@@ -49,16 +49,11 @@ describe('<CardHeader />', () => {
   });
 
   describe('with an avatar', () => {
-    let avatar;
-    let cardHeader;
-
-    beforeEach(() => {
-      avatar = <span />;
-      cardHeader = render(<CardHeader avatar={avatar} title="Title" subheader="Subhead" />)
-        .container.firstChild;
-    });
+    const avatar = <span />;
 
     it('should render the avatar inside the first child', () => {
+      const cardHeader = render(<CardHeader avatar={avatar} title="Title" subheader="Subhead" />)
+        .container.firstChild;
       const avatarWrapper = cardHeader.childNodes[0];
       expect(avatarWrapper).to.have.tagName('div');
       expect(avatarWrapper).to.have.class(classes.avatar);
@@ -66,6 +61,8 @@ describe('<CardHeader />', () => {
     });
 
     it('should render the title text inside the second child', () => {
+      const cardHeader = render(<CardHeader avatar={avatar} title="Title" subheader="Subhead" />)
+        .container.firstChild;
       const titleWrapper = cardHeader.childNodes[1];
       expect(titleWrapper).to.have.class(classes.content, 'should have the content class');
       const title = titleWrapper.childNodes[0];
@@ -74,6 +71,8 @@ describe('<CardHeader />', () => {
     });
 
     it('should render the subheader as body2 secondary text inside the second child', () => {
+      const cardHeader = render(<CardHeader avatar={avatar} title="Title" subheader="Subhead" />)
+        .container.firstChild;
       const titleWrapper = cardHeader.childNodes[1];
       expect(titleWrapper).to.have.class(classes.content, 'should have the content class');
       const subHeader = titleWrapper.childNodes[1];
diff --git a/packages/mui-material/src/Chip/Chip.test.js b/packages/mui-material/src/Chip/Chip.test.js
index e5d790ea24f0ca..cc47eb5456f2fd 100644
--- a/packages/mui-material/src/Chip/Chip.test.js
+++ b/packages/mui-material/src/Chip/Chip.test.js
@@ -188,9 +188,7 @@ describe('<Chip />', () => {
       const chip = getByTestId('chip');
 
       simulatePointerDevice();
-      act(() => {
-        fireEvent.keyDown(document.body, { key: 'Tab' });
-      });
+      fireEvent.keyDown(document.body, { key: 'Tab' });
 
       expect(chip).to.have.class(classes.root);
       expect(chip).to.have.property('tabIndex', -1);
diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js
index e0c4c3730a4a82..a2998db8fbf8fb 100644
--- a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js
+++ b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.test.js
@@ -25,6 +25,7 @@ describe('<ClickAwayListener />', () => {
    * React bug: https://github.com/facebook/react/issues/20074
    */
   function render(...args) {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const result = clientRender(...args);
     clock.tick(0);
     return result;
diff --git a/packages/mui-material/src/Collapse/Collapse.test.js b/packages/mui-material/src/Collapse/Collapse.test.js
index 420db44a9ba7c1..681c295b82eb06 100644
--- a/packages/mui-material/src/Collapse/Collapse.test.js
+++ b/packages/mui-material/src/Collapse/Collapse.test.js
@@ -48,9 +48,6 @@ describe('<Collapse />', () => {
 
   describe('transition lifecycle', () => {
     clock.withFakeTimers();
-    let setProps;
-    let collapse;
-    let container;
     let nodeEnterHeightStyle;
     let nodeEnteringHeightStyle;
     let nodeExitHeightStyle;
@@ -77,8 +74,8 @@ describe('<Collapse />', () => {
     const handleExited = spy();
     const handleAddEndListener = spy();
 
-    beforeEach(() => {
-      const renderProps = render(
+    function renderCollapse() {
+      const { container, setProps } = render(
         <Collapse
           addEndListener={handleAddEndListener}
           onEnter={handleEnterWrapper}
@@ -92,13 +89,15 @@ describe('<Collapse />', () => {
           <div />
         </Collapse>,
       );
-      container = renderProps.container;
-      setProps = renderProps.setProps;
-      collapse = container.firstChild;
+      const collapse = container.firstChild;
       stub(collapse.firstChild, 'clientHeight').get(() => 666);
-    });
+
+      return { container, setProps, collapse };
+    }
 
     it('should run in', () => {
+      const { setProps, collapse } = renderCollapse();
+
       setProps({ in: true });
       expect(nodeEnterHeightStyle).to.equal('0px');
       expect(handleEnter.args[0][0]).to.equal(collapse);
@@ -118,6 +117,8 @@ describe('<Collapse />', () => {
     });
 
     it('should run out', () => {
+      const { setProps, collapse } = renderCollapse();
+
       setProps({ in: true });
       setProps({ in: false });
 
@@ -155,12 +156,12 @@ describe('<Collapse />', () => {
           </ThemeProvider>
         );
       }
-      const renderProps1 = render(<Test />);
-      const collapse = renderProps1.container.firstChild;
+      const { container: container1, setProps: setProps1 } = render(<Test />);
+      const collapse = container1.firstChild;
       // Gets wrapper
       stub(collapse.firstChild, 'clientHeight').get(() => 10);
 
-      renderProps1.setProps({
+      setProps1({
         in: true,
       });
 
@@ -174,12 +175,12 @@ describe('<Collapse />', () => {
       expect(next1.callCount).to.equal(1);
 
       const next2 = spy();
-      const renderProps2 = render(
+      const { setProps: setProps2 } = render(
         <Collapse timeout="auto" onEntered={next2}>
           <div />
         </Collapse>,
       );
-      renderProps2.setProps({ in: true });
+      setProps2({ in: true });
 
       expect(next2.callCount).to.equal(0);
       clock.tick(0);
@@ -187,7 +188,7 @@ describe('<Collapse />', () => {
       expect(next2.callCount).to.equal(1);
     });
 
-    it('should use timeout as delay when timeout is number', () => {
+    it('should use timeout as delay when timeout is number', async () => {
       const timeout = 10;
       const next = spy();
       const { setProps } = render(
diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index a0eb5c3d8ee823..5f198fbfcab690 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -12,9 +12,9 @@ import describeConformance from '../../test/describeConformance';
  * @param {HTMLElement} element
  */
 function userClick(element) {
+  fireEvent.mouseDown(element);
+  fireEvent.mouseUp(element);
   act(() => {
-    fireEvent.mouseDown(element);
-    fireEvent.mouseUp(element);
     element.click();
   });
 }
@@ -141,11 +141,12 @@ describe('<Dialog />', () => {
 
     act(() => {
       dialog.click();
-      // keyDown is not targetted at anything specific.
-      // eslint-disable-next-line material-ui/disallow-active-element-as-key-event-target
-      fireEvent.keyDown(document.activeElement, { key: 'Esc' });
     });
 
+    // keyDown is not targetted at anything specific.
+    // eslint-disable-next-line material-ui/disallow-active-element-as-key-event-target
+    fireEvent.keyDown(document.activeElement, { key: 'Esc' });
+
     expect(onClose.callCount).to.equal(0);
 
     clickBackdrop(screen);
diff --git a/packages/mui-material/src/ListItem/ListItem.test.js b/packages/mui-material/src/ListItem/ListItem.test.js
index 9fde560ae2b03b..3fcb3ce0259b38 100644
--- a/packages/mui-material/src/ListItem/ListItem.test.js
+++ b/packages/mui-material/src/ListItem/ListItem.test.js
@@ -211,8 +211,9 @@ describe('<ListItem />', () => {
       );
       const button = getByRole('button');
 
+      fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
+
       act(() => {
-        fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
         button.focus();
       });
 
diff --git a/packages/mui-material/src/MenuItem/MenuItem.test.js b/packages/mui-material/src/MenuItem/MenuItem.test.js
index 145338a1add652..c05569479eeb53 100644
--- a/packages/mui-material/src/MenuItem/MenuItem.test.js
+++ b/packages/mui-material/src/MenuItem/MenuItem.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
+import { act, createRenderer, fireEvent, screen, waitFor } from '@mui/internal-test-utils';
 import MenuItem, { menuItemClasses as classes } from '@mui/material/MenuItem';
 import ButtonBase from '@mui/material/ButtonBase';
 import ListContext from '../List/ListContext';
@@ -64,9 +64,11 @@ describe('<MenuItem />', () => {
         const handler = spy();
         render(<MenuItem {...{ [handlerName]: handler }} />);
 
-        await act(async () => fireEvent[eventName](screen.getByRole('menuitem')));
+        fireEvent[eventName](screen.getByRole('menuitem'));
 
-        expect(handler.callCount).to.equal(1);
+        await waitFor(() => {
+          expect(handler.callCount).to.equal(1);
+        });
       });
     });
 
diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js
index 07e62bf1bd03a6..5bcbd0e85737bb 100644
--- a/packages/mui-material/src/Slider/Slider.test.js
+++ b/packages/mui-material/src/Slider/Slider.test.js
@@ -270,9 +270,10 @@ describe('<Slider />', () => {
 
       act(() => {
         slider2.focus();
-        fireEvent.change(slider2, { target: { value: '31' } });
       });
 
+      fireEvent.change(slider2, { target: { value: '31' } });
+
       expect(slider1.getAttribute('aria-valuenow')).to.equal('21');
       expect(slider2.getAttribute('aria-valuenow')).to.equal('31');
 
diff --git a/packages/mui-material/src/Snackbar/Snackbar.test.js b/packages/mui-material/src/Snackbar/Snackbar.test.js
index 9ea8e9817f24fa..3203d896c983da 100644
--- a/packages/mui-material/src/Snackbar/Snackbar.test.js
+++ b/packages/mui-material/src/Snackbar/Snackbar.test.js
@@ -19,9 +19,9 @@ describe('<Snackbar />', () => {
    * React bug: https://github.com/facebook/react/issues/20074
    */
   function render(...args) {
-    const result = clientRender(...args);
+    const utils = clientRender(...args);
     clock.tick(0);
-    return result;
+    return utils;
   }
 
   describeConformance(<Snackbar open message="message" />, () => ({
diff --git a/packages/mui-material/src/StepButton/StepButton.test.js b/packages/mui-material/src/StepButton/StepButton.test.js
index 675e5b97ce6b49..53d2a1ea423397 100644
--- a/packages/mui-material/src/StepButton/StepButton.test.js
+++ b/packages/mui-material/src/StepButton/StepButton.test.js
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui/internal-test-utils';
-import { fireEvent } from '@testing-library/dom';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import StepButton, { stepButtonClasses as classes } from '@mui/material/StepButton';
 import Step from '@mui/material/Step';
 import StepLabel, { stepLabelClasses } from '@mui/material/StepLabel';
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
index d20f83ab4fc17c..375a5aecc45f0a 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -450,7 +450,7 @@ describe('<SwipeableDrawer />', () => {
     });
 
     it('removes event listeners on unmount', () => {
-      const container = render(
+      const { unmount } = render(
         <SwipeableDrawer
           onOpen={() => {}}
           onClose={() => {}}
@@ -465,7 +465,7 @@ describe('<SwipeableDrawer />', () => {
       fireEvent.touchStart(swipeArea, {
         touches: [new Touch({ identifier: 0, target: swipeArea, pageX: 250, clientY: 0 })],
       });
-      container.unmount();
+      unmount();
       //  trigger setState warning if listeners aren't cleaned.
       fireEvent.touchMove(swipeArea, {
         touches: [new Touch({ identifier: 0, target: swipeArea, pageX: 180, clientY: 0 })],
diff --git a/packages/mui-material/src/Switch/Switch.test.js b/packages/mui-material/src/Switch/Switch.test.js
index 3f62c576b8f75d..a46ad626f9f271 100644
--- a/packages/mui-material/src/Switch/Switch.test.js
+++ b/packages/mui-material/src/Switch/Switch.test.js
@@ -96,9 +96,10 @@ describe('<Switch />', () => {
     // how a user would trigger it
     act(() => {
       getByRole('checkbox').click();
-      fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
     });
 
+    fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
+
     expect(getByRole('checkbox')).to.have.property('checked', false);
   });
 
diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
index 5324acf9245dc4..f0c7b09d4eaede 100644
--- a/packages/mui-material/src/Tabs/Tabs.test.js
+++ b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -644,6 +644,8 @@ describe('<Tabs />', () => {
 
         await waitFor(() => {
           expect(hasLeftScrollButton(container)).to.equal(true);
+        });
+        await waitFor(() => {
           expect(hasRightScrollButton(container)).to.equal(false);
         });
       });
@@ -665,6 +667,8 @@ describe('<Tabs />', () => {
 
         await waitFor(() => {
           expect(hasLeftScrollButton(container)).to.equal(false);
+        });
+        await waitFor(() => {
           expect(hasRightScrollButton(container)).to.equal(true);
         });
       });
@@ -685,6 +689,8 @@ describe('<Tabs />', () => {
 
         await waitFor(() => {
           expect(hasLeftScrollButton(container)).to.equal(true);
+        });
+        await waitFor(() => {
           expect(hasRightScrollButton(container)).to.equal(true);
         });
       });
@@ -712,6 +718,8 @@ describe('<Tabs />', () => {
 
       await waitFor(() => {
         expect(hasLeftScrollButton(container)).to.equal(true);
+      });
+      await waitFor(() => {
         expect(hasRightScrollButton(container)).to.equal(true);
       });
 
diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
index ffe5f780446fd6..af65017e54bbac 100644
--- a/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
@@ -319,8 +319,9 @@ describe('useAutocomplete', () => {
       render(<Test options={['foo', 'bar']} />);
       const input = screen.getByRole('combobox');
 
+      fireEvent.change(input, { target: { value: 'free' } });
+
       act(() => {
-        fireEvent.change(input, { target: { value: 'free' } });
         input.blur();
       });
 
diff --git a/packages/mui-styles/src/StylesProvider/StylesProvider.test.js b/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
index 52963f295fa3dd..ce1426b58b6cb0 100644
--- a/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
+++ b/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
@@ -88,6 +88,7 @@ describe('StylesProvider', () => {
     it('should be able to extract the styles', () => {
       const sheetsRegistry = new SheetsRegistry();
 
+      // eslint-disable-next-line testing-library/render-result-naming-convention
       const markup = ReactDOMServer.renderToString(
         <StylesProvider
           sheetsManager={new Map()}
@@ -105,6 +106,7 @@ describe('StylesProvider', () => {
       const sheetsCache = new Map();
 
       const sheetsRegistry1 = new SheetsRegistry();
+      // eslint-disable-next-line testing-library/render-result-naming-convention
       const markup1 = ReactDOMServer.renderToString(
         <StylesProvider
           sheetsManager={new Map()}
@@ -118,6 +120,7 @@ describe('StylesProvider', () => {
       assertRendering(markup1, sheetsRegistry1);
 
       const sheetsRegistry2 = new SheetsRegistry();
+      // eslint-disable-next-line testing-library/render-result-naming-convention
       const markup2 = ReactDOMServer.renderToString(
         <StylesProvider
           sheetsManager={new Map()}
diff --git a/packages/mui-styles/src/styled/styled.test.js b/packages/mui-styles/src/styled/styled.test.js
index 2648eb2b42f5a1..e3d6fa899d1af1 100644
--- a/packages/mui-styles/src/styled/styled.test.js
+++ b/packages/mui-styles/src/styled/styled.test.js
@@ -39,26 +39,28 @@ describe('styled', () => {
   });
 
   describe('prop: clone', () => {
-    let view;
-
-    beforeEach(() => {
-      view = render(
+    it('should be able to pass props to cloned element', () => {
+      const { container } = render(
         <StyledButton clone data-test="styled">
           <div>Styled Components</div>
         </StyledButton>,
       );
-    });
 
-    it('should be able to pass props to cloned element', () => {
-      expect(view.container.firstChild).to.have.attribute('data-test', 'styled');
+      expect(container.firstChild).to.have.attribute('data-test', 'styled');
     });
 
     it('should be able to clone the child element', () => {
-      expect(view.container.firstChild).to.have.tagName('DIV');
-      view.setProps({
+      const { container, setProps } = render(
+        <StyledButton clone data-test="styled">
+          <div>Styled Components</div>
+        </StyledButton>,
+      );
+
+      expect(container.firstChild).to.have.tagName('DIV');
+      setProps({
         clone: false,
       });
-      expect(view.container.firstChild).to.have.tagName('BUTTON');
+      expect(container.firstChild).to.have.tagName('BUTTON');
     });
   });
 
diff --git a/packages/mui-system/src/Box/Box.test.js b/packages/mui-system/src/Box/Box.test.js
index 227b6c6955e737..7c800b828eb0b4 100644
--- a/packages/mui-system/src/Box/Box.test.js
+++ b/packages/mui-system/src/Box/Box.test.js
@@ -64,9 +64,11 @@ describe('<Box />', () => {
       this.skip();
     }
 
-    const testCaseBorderColorWins = render(<Box border={1} borderColor="rgb(0, 0, 255)" />);
+    const { container: testCaseBorderColorWinsContainer } = render(
+      <Box border={1} borderColor="rgb(0, 0, 255)" />,
+    );
 
-    expect(testCaseBorderColorWins.container.firstChild).toHaveComputedStyle({
+    expect(testCaseBorderColorWinsContainer.firstChild).toHaveComputedStyle({
       borderTopWidth: '1px',
       borderRightWidth: '1px',
       borderBottomWidth: '1px',
@@ -81,9 +83,11 @@ describe('<Box />', () => {
       borderLeftColor: 'rgb(0, 0, 255)',
     });
 
-    const testCaseBorderWins = render(<Box borderColor={'rgb(0, 0, 255)'} border={1} />);
+    const { container: testCaseBorderWinsContainer } = render(
+      <Box borderColor={'rgb(0, 0, 255)'} border={1} />,
+    );
 
-    expect(testCaseBorderWins.container.firstChild).toHaveComputedStyle({
+    expect(testCaseBorderWinsContainer.firstChild).toHaveComputedStyle({
       borderTopWidth: '1px',
       borderRightWidth: '1px',
       borderBottomWidth: '1px',
@@ -106,7 +110,7 @@ describe('<Box />', () => {
       this.skip();
     }
 
-    const testCaseBorderPositionColorWins = render(
+    const { container: testCaseBorderPositionColorWinsContainer } = render(
       <Box
         borderTop={1}
         borderTopColor="rgb(0, 0, 25)"
@@ -119,7 +123,7 @@ describe('<Box />', () => {
       />,
     );
 
-    expect(testCaseBorderPositionColorWins.container.firstChild).toHaveComputedStyle({
+    expect(testCaseBorderPositionColorWinsContainer.firstChild).toHaveComputedStyle({
       borderTopWidth: '1px',
       borderRightWidth: '2px',
       borderBottomWidth: '3px',
@@ -134,7 +138,7 @@ describe('<Box />', () => {
       borderLeftColor: 'rgb(0, 0, 100)',
     });
 
-    const testCaseBorderPositionWins = render(
+    const { container: testCaseBorderPositionWinsContainer } = render(
       <Box
         borderTopColor="rgb(0, 0, 25)"
         borderTop={1}
@@ -147,7 +151,7 @@ describe('<Box />', () => {
       />,
     );
 
-    expect(testCaseBorderPositionWins.container.firstChild).toHaveComputedStyle({
+    expect(testCaseBorderPositionWinsContainer.firstChild).toHaveComputedStyle({
       borderTopWidth: '1px',
       borderRightWidth: '2px',
       borderBottomWidth: '3px',
@@ -170,11 +174,11 @@ describe('<Box />', () => {
       this.skip();
     }
 
-    const testCaseBorderColorWins = render(
+    const { container: testCaseBorderColorWinsContainer } = render(
       <Box sx={{ border: 1, borderColor: 'rgb(0, 0, 255)' }} />,
     );
 
-    expect(testCaseBorderColorWins.container.firstChild).toHaveComputedStyle({
+    expect(testCaseBorderColorWinsContainer.firstChild).toHaveComputedStyle({
       borderTopWidth: '1px',
       borderRightWidth: '1px',
       borderBottomWidth: '1px',
@@ -189,9 +193,11 @@ describe('<Box />', () => {
       borderLeftColor: 'rgb(0, 0, 255)',
     });
 
-    const testCaseBorderWins = render(<Box sx={{ borderColor: 'rgb(0, 0, 255)', border: 1 }} />);
+    const { container: testCaseBorderWinsContainer } = render(
+      <Box sx={{ borderColor: 'rgb(0, 0, 255)', border: 1 }} />,
+    );
 
-    expect(testCaseBorderWins.container.firstChild).toHaveComputedStyle({
+    expect(testCaseBorderWinsContainer.firstChild).toHaveComputedStyle({
       borderTopWidth: '1px',
       borderRightWidth: '1px',
       borderBottomWidth: '1px',
@@ -206,7 +212,7 @@ describe('<Box />', () => {
       borderLeftColor: 'rgb(0, 0, 0)',
     });
 
-    const testCaseBorderPositionColorWins = render(
+    const { container: testCaseBorderPositionColorWinsContainer } = render(
       <Box
         sx={{
           borderTop: 1,
@@ -221,7 +227,7 @@ describe('<Box />', () => {
       />,
     );
 
-    expect(testCaseBorderPositionColorWins.container.firstChild).toHaveComputedStyle({
+    expect(testCaseBorderPositionColorWinsContainer.firstChild).toHaveComputedStyle({
       borderTopWidth: '1px',
       borderRightWidth: '2px',
       borderBottomWidth: '3px',
@@ -236,7 +242,7 @@ describe('<Box />', () => {
       borderLeftColor: 'rgb(0, 0, 100)',
     });
 
-    const testCaseBorderPositionWins = render(
+    const { container: testCaseBorderPositionWinsContainer } = render(
       <Box
         sx={{
           borderTopColor: 'rgb(0, 0, 25)',
@@ -251,7 +257,7 @@ describe('<Box />', () => {
       />,
     );
 
-    expect(testCaseBorderPositionWins.container.firstChild).toHaveComputedStyle({
+    expect(testCaseBorderPositionWinsContainer.firstChild).toHaveComputedStyle({
       borderTopWidth: '1px',
       borderRightWidth: '2px',
       borderBottomWidth: '3px',