diff --git a/.eslintrc.js b/.eslintrc.js
index 7c853bec85784d..08aa7d7d987f86 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -276,6 +276,21 @@ module.exports = {
         'react/no-unused-prop-types': 'off',
       },
     },
+    {
+      files: [
+        // matching the pattern of the test runner
+        '*.test.mjs',
+        '*.test.js',
+        '*.test.ts',
+        '*.test.tsx',
+      ],
+      excludedFiles: ['packages/markdown/**/*', 'test/e2e/**/*', 'test/regressions/**/*'],
+      extends: ['plugin:testing-library/react'],
+      rules: {
+        'testing-library/no-container': 'off',
+        'testing-library/prefer-screen-queries': 'off',
+      },
+    },
     {
       files: ['docs/src/modules/components/**/*.js'],
       rules: {
diff --git a/package.json b/package.json
index 3a168cb26c50cf..fde932d4e5e83f 100644
--- a/package.json
+++ b/package.json
@@ -154,6 +154,7 @@
     "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-compiler": "0.0.0-experimental-0998c1e-20240625",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^6.2.2",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "globby": "^14.0.2",
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..5803f9410dac6e 100644
--- a/packages/mui-base/src/Button/Button.test.tsx
+++ b/packages/mui-base/src/Button/Button.test.tsx
@@ -67,6 +67,7 @@ describe('<Button />', () => {
         const { getByRole } = render(<Button focusableWhenDisabled disabled />);
 
         const button = getByRole('button');
+
         act(() => {
           button.focus();
         });
@@ -83,14 +84,12 @@ describe('<Button />', () => {
         const button = getByRole('button');
         act(() => {
           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);
       });
     });
@@ -129,14 +128,12 @@ describe('<Button />', () => {
         const button = getByRole('button');
         act(() => {
           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..56517509de7632 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(() => {
         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..1f9f932426f969 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();
     });
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/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',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5bf2e8703c697e..9758083bd1ea29 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -216,6 +216,9 @@ importers:
       eslint-plugin-react-hooks:
         specifier: ^4.6.2
         version: 4.6.2(eslint@8.57.0)
+      eslint-plugin-testing-library:
+        specifier: ^6.2.2
+        version: 6.2.2(eslint@8.57.0)(typescript@5.4.5)
       fast-glob:
         specifier: ^3.3.2
         version: 3.3.2
@@ -5314,6 +5317,10 @@ packages:
       typescript:
         optional: true
 
+  '@typescript-eslint/scope-manager@5.62.0':
+    resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   '@typescript-eslint/scope-manager@6.21.0':
     resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -5328,10 +5335,23 @@ packages:
       typescript:
         optional: true
 
+  '@typescript-eslint/types@5.62.0':
+    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   '@typescript-eslint/types@6.21.0':
     resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
+  '@typescript-eslint/typescript-estree@5.62.0':
+    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@typescript-eslint/typescript-estree@6.21.0':
     resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -5341,12 +5361,22 @@ packages:
       typescript:
         optional: true
 
+  '@typescript-eslint/utils@5.62.0':
+    resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+
   '@typescript-eslint/utils@6.21.0':
     resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
 
+  '@typescript-eslint/visitor-keys@5.62.0':
+    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   '@typescript-eslint/visitor-keys@6.21.0':
     resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -7162,6 +7192,12 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
 
+  eslint-plugin-testing-library@6.2.2:
+    resolution: {integrity: sha512-1E94YOTUDnOjSLyvOwmbVDzQi/WkKm3WVrMXu6SmBr6DN95xTGZmI6HJ/eOkSXh/DlheRsxaPsJvZByDBhWLVQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0, npm: '>=6'}
+    peerDependencies:
+      eslint: ^7.5.0 || ^8.0.0
+
   eslint-rule-composer@0.3.0:
     resolution: {integrity: sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==}
     engines: {node: '>=4.0.0'}
@@ -11508,6 +11544,9 @@ packages:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
 
+  tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+
   tslib@2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
 
@@ -11518,6 +11557,12 @@ packages:
     resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
     engines: {node: '>=0.6.x'}
 
+  tsutils@3.21.0:
+    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+    engines: {node: '>= 6'}
+    peerDependencies:
+      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+
   tsx@4.15.7:
     resolution: {integrity: sha512-u3H0iSFDZM3za+VxkZ1kywdCeHCn+8/qHQS1MNoO2sONDgD95HlWtt8aB23OzeTmFP9IU4/8bZUdg58Uu5J4cg==}
     engines: {node: '>=18.0.0'}
@@ -15943,6 +15988,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/scope-manager@5.62.0':
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+
   '@typescript-eslint/scope-manager@6.21.0':
     dependencies:
       '@typescript-eslint/types': 6.21.0
@@ -15960,8 +16010,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/types@5.62.0': {}
+
   '@typescript-eslint/types@6.21.0': {}
 
+  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.4.5)':
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+      debug: 4.3.5(supports-color@8.1.1)
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.6.0
+      tsutils: 3.21.0(typescript@5.4.5)
+    optionalDependencies:
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.5)':
     dependencies:
       '@typescript-eslint/types': 6.21.0
@@ -15977,6 +16043,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.4.5)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@types/json-schema': 7.0.12
+      '@types/semver': 7.5.0
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.5)
+      eslint: 8.57.0
+      eslint-scope: 5.1.1
+      semver: 7.6.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
@@ -15991,6 +16072,11 @@ snapshots:
       - supports-color
       - typescript
 
+  '@typescript-eslint/visitor-keys@5.62.0':
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      eslint-visitor-keys: 3.4.3
+
   '@typescript-eslint/visitor-keys@6.21.0':
     dependencies:
       '@typescript-eslint/types': 6.21.0
@@ -18209,6 +18295,14 @@ snapshots:
       string.prototype.matchall: 4.0.11
       string.prototype.repeat: 1.0.0
 
+  eslint-plugin-testing-library@6.2.2(eslint@8.57.0)(typescript@5.4.5):
+    dependencies:
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.4.5)
+      eslint: 8.57.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   eslint-rule-composer@0.3.0: {}
 
   eslint-scope@5.1.1:
@@ -23545,12 +23639,19 @@ snapshots:
       minimist: 1.2.6
       strip-bom: 3.0.0
 
+  tslib@1.14.1: {}
+
   tslib@2.4.0: {}
 
   tslib@2.6.2: {}
 
   tsscmp@1.0.6: {}
 
+  tsutils@3.21.0(typescript@5.4.5):
+    dependencies:
+      tslib: 1.14.1
+      typescript: 5.4.5
+
   tsx@4.15.7:
     dependencies:
       esbuild: 0.21.5