diff --git a/.eslintrc.js b/.eslintrc.js
index 7242c7ae0a17..d7b85f4b16de 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -181,6 +181,19 @@ module.exports = {
   },
   overrides: [
     ...baseline.overrides,
+    {
+      files: [
+        // matching the pattern of the test runner
+        '*.test.js',
+        '*.test.ts',
+        '*.test.tsx',
+      ],
+      excludedFiles: ['test/e2e/**/*', 'test/regressions/**/*'],
+      extends: ['plugin:testing-library/react'],
+      rules: {
+        'testing-library/no-container': 'off',
+      },
+    },
     {
       files: [
         // matching the pattern of the test runner
diff --git a/package.json b/package.json
index 4914ace3ee7a..c5afe7bcc4d5 100644
--- a/package.json
+++ b/package.json
@@ -149,6 +149,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^6.3.0",
     "fast-glob": "^3.3.2",
     "format-util": "^1.0.5",
     "fs-extra": "^11.2.0",
diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx
index 4d5e4565a271..569724f5829d 100644
--- a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx
+++ b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen, waitFor } from '@mui/internal-test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { LicenseInfo } from '@mui/x-license';
 import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier';
 import { ResponsiveChartContainerPro } from './ResponsiveChartContainerPro';
@@ -21,8 +21,6 @@ describe('<ResponsiveChartContainerPro /> - License', () => {
       render(<ResponsiveChartContainerPro series={[]} width={100} height={100} />),
     ).toErrorDev(['MUI X: Missing license key.']);
 
-    await waitFor(() => {
-      expect(screen.findAllByText('MUI X Missing license key')).not.to.equal(null);
-    });
+    expect(await screen.findAllByText('MUI X Missing license key')).not.to.equal(null);
   });
 });
diff --git a/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx b/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx
index ac69895cf5e7..29337e8d7191 100644
--- a/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx
+++ b/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils';
+import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
 import { useHighlighted } from './useHighlighted';
 import { HighlightedProvider } from './HighlightedProvider';
 import { SeriesProvider } from '../SeriesProvider';
@@ -42,7 +42,7 @@ describe('useHighlighted', () => {
   });
 
   it('should not throw an error when parent context is present', () => {
-    const { getByText } = render(
+    render(
       <PluginProvider>
         <SeriesProvider series={[]}>
           <HighlightedProvider highlightedItem={{ seriesId: 'test-id' }}>
@@ -52,6 +52,6 @@ describe('useHighlighted', () => {
       </PluginProvider>,
     );
 
-    expect(getByText('test-id')).toBeVisible();
+    expect(screen.getByText('test-id')).toBeVisible();
   });
 });
diff --git a/packages/x-charts/src/hooks/useSeries.test.tsx b/packages/x-charts/src/hooks/useSeries.test.tsx
index 7a8d6f15a8f8..4bbe16ff5cb6 100644
--- a/packages/x-charts/src/hooks/useSeries.test.tsx
+++ b/packages/x-charts/src/hooks/useSeries.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils';
+import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
 import { useSeries } from './useSeries';
 import { SeriesProvider } from '../context/SeriesProvider';
 import { PluginProvider } from '../internals';
@@ -41,7 +41,7 @@ describe('useSeries', () => {
   });
 
   it('should not throw an error when parent context is present', () => {
-    const { getByText } = render(
+    render(
       <PluginProvider>
         <SeriesProvider series={[{ type: 'bar', id: 'test-id', data: [1, 2] }]}>
           <UseSeries />
@@ -49,6 +49,6 @@ describe('useSeries', () => {
       </PluginProvider>,
     );
 
-    expect(getByText('test-id')).toBeVisible();
+    expect(screen.getByText('test-id')).toBeVisible();
   });
 });
diff --git a/packages/x-charts/src/hooks/useSvgRef.test.tsx b/packages/x-charts/src/hooks/useSvgRef.test.tsx
index a61113fa1e8d..ed345538cc14 100644
--- a/packages/x-charts/src/hooks/useSvgRef.test.tsx
+++ b/packages/x-charts/src/hooks/useSvgRef.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils';
+import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
 import { useSvgRef } from './useSvgRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 
@@ -52,11 +52,11 @@ describe('useSvgRef', () => {
       );
     }
 
-    const { findByText, forceUpdate } = render(<RenderDrawingProvider />);
+    const { forceUpdate } = render(<RenderDrawingProvider />);
 
     // Ref is not available on first render.
     forceUpdate();
 
-    expect(await findByText('test-id')).toBeVisible();
+    expect(await screen.findByText('test-id')).toBeVisible();
   });
 });
diff --git a/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx
index 43f054c2635c..ab65dab64c7d 100644
--- a/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx
@@ -1,14 +1,8 @@
 import * as React from 'react';
-import {
-  createRenderer,
-  screen,
-  userEvent,
-  within,
-  act,
-  fireEvent,
-} from '@mui/internal-test-utils';
+import { createRenderer, screen, within, act, fireEvent } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { getCell, getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { SinonSpy, spy } from 'sinon';
 import {
   DataGridPremium,
@@ -177,7 +171,7 @@ describe('<DataGridPremium /> - Aggregation', () => {
         setProps({ columns: [{ ...column, editable: true }] });
         fireEvent.doubleClick(cell);
         expect(cell.querySelector('input')).not.to.equal(null);
-        userEvent.mousePress(getCell(1, 0));
+        fireUserEvent.mousePress(getCell(1, 0));
 
         setProps({ columns: [column] });
         fireEvent.doubleClick(cell);
@@ -409,8 +403,8 @@ describe('<DataGridPremium /> - Aggregation', () => {
 
       act(() => apiRef.current.showColumnMenu('id'));
       clock.runToLast();
-      userEvent.mousePress(screen.getByLabelText('Aggregation'));
-      userEvent.mousePress(
+      fireUserEvent.mousePress(screen.getByLabelText('Aggregation'));
+      fireUserEvent.mousePress(
         within(
           screen.getByRole('listbox', {
             name: 'Aggregation',
diff --git a/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
index 15f398c262c2..09efe492a468 100644
--- a/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { stub, SinonStub } from 'sinon';
 import { expect } from 'chai';
 import { spyApi, getCell, grid } from 'test/utils/helperFn';
-import { createRenderer, fireEvent, act, userEvent, screen } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils';
 import {
   DataGridPremium,
   DataGridPremiumProps,
@@ -11,6 +11,7 @@ import {
   gridClasses,
 } from '@mui/x-data-grid-premium';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DataGridPremium /> - Cell selection', () => {
   const { render } = createRenderer();
@@ -116,9 +117,9 @@ describe('<DataGridPremium /> - Cell selection', () => {
       expect(document.querySelector('.Mui-selected')).to.equal(null);
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
-      userEvent.mousePress(getCell(2, 1), { shiftKey: true });
+      fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true });
       expect(document.querySelectorAll('.Mui-selected')).to.have.length(3 * 2); // 3 rows with 2 cells each
     });
 
@@ -128,9 +129,9 @@ describe('<DataGridPremium /> - Cell selection', () => {
 
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
-      userEvent.mousePress(getCell(2, 1), { shiftKey: true });
+      fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true });
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' });
       expect(spiedSelectCellsBetweenRange.lastCall.args[1]).to.deep.equal({
         id: 2,
@@ -142,9 +143,9 @@ describe('<DataGridPremium /> - Cell selection', () => {
       render(<TestDataGridSelection />);
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
-      userEvent.mousePress(getCell(2, 2), { shiftKey: true });
+      fireUserEvent.mousePress(getCell(2, 2), { shiftKey: true });
 
       expect(getCell(0, 0)).to.have.class(gridClasses['cell--rangeTop']);
       expect(getCell(0, 0)).to.have.class(gridClasses['cell--rangeLeft']);
@@ -167,7 +168,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       const cell = getCell(0, 0);
       cell.focus();
       expect(cell).toHaveFocus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.click(getCell(2, 1), { shiftKey: true });
       expect(cell).toHaveFocus();
     });
@@ -179,7 +180,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.keyDown(cell, { key: 'ArrowDown', shiftKey: true });
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' });
@@ -191,7 +192,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
       const cell = getCell(1, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.keyDown(cell, { key: 'ArrowUp', shiftKey: true });
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 1, field: 'id' });
@@ -203,7 +204,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
       const cell = getCell(0, 1);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.keyDown(cell, { key: 'ArrowLeft', shiftKey: true });
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({
@@ -218,7 +219,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.keyDown(cell, { key: 'ArrowRight', shiftKey: true });
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' });
@@ -232,7 +233,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       render(<TestDataGridSelection />);
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.keyDown(cell, { key: 'ArrowDown', shiftKey: true });
       expect(cell).toHaveFocus();
diff --git a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
index 12fe266dee93..6653971f3ae4 100644
--- a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
@@ -6,10 +6,11 @@ import {
   DataGridPremiumProps,
   GridColDef,
 } from '@mui/x-data-grid-premium';
-import { createRenderer, fireEvent, userEvent, waitFor } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, waitFor } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { SinonSpy, spy, stub, SinonStub } from 'sinon';
 import { getCell, getColumnValues, sleep } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
 
 describe('<DataGridPremium /> - Clipboard', () => {
@@ -72,7 +73,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
         const cell = getCell(0, 0);
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
 
         fireEvent.keyDown(cell, { key: 'Shift' });
         fireEvent.click(getCell(2, 2), { shiftKey: true });
@@ -95,7 +96,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.click(getCell(0, 2), { shiftKey: true });
@@ -126,7 +127,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       fireEvent.keyDown(cell, { key: 'Ctrl' });
       fireEvent.click(getCell(1, 0), { ctrlKey: true });
@@ -157,7 +158,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       fireEvent.keyDown(cell, { key: 'Ctrl' });
       fireEvent.click(getCell(1, 0), { ctrlKey: true });
@@ -194,7 +195,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'v', code: 'KeyV', keyCode: 86, [key]: true }); // Ctrl+V
         expect(listener.callCount).to.equal(0);
       });
@@ -207,7 +208,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'v', code: 'KeyV', keyCode: 86, [key]: true }); // Ctrl+V
         expect(listener.callCount).to.equal(0);
       });
@@ -219,7 +220,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
         const cell = getCell(0, 1);
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
 
         fireEvent.keyDown(cell, { key: 'Shift' });
         fireEvent.click(getCell(2, 2), { shiftKey: true });
@@ -259,7 +260,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
         expect(cell).not.to.have.text(clipboardData);
 
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         paste(cell, clipboardData);
 
         // no update
@@ -271,7 +272,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
         setProps({ paginationModel: { pageSize: 2, page: 1 } });
 
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         paste(cell, clipboardData);
 
         // updated
@@ -285,7 +286,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
         const cell = getCell(0, 1);
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
 
         fireEvent.keyDown(cell, { key: 'Shift' });
         fireEvent.click(getCell(2, 2), { shiftKey: true });
@@ -322,7 +323,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
         const cell = getCell(0, 1);
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
 
         fireEvent.keyDown(cell, { key: 'Shift' });
         fireEvent.click(getCell(2, 2), { shiftKey: true });
@@ -368,7 +369,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
         const cell = getCell(1, 1);
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
 
         const clipboardData = [
           ['p11', 'p12', 'p13'],
@@ -386,10 +387,10 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
         await waitFor(() => {
           expect(getCell(3, 3).textContent).to.equal('p33');
-          expect(getCell(6, 2).textContent).to.equal('p62');
-          expect(getCell(7, 1).textContent).to.equal('p71');
-          expect(getCell(7, 3).textContent).to.equal('p73');
         });
+        expect(getCell(6, 2).textContent).to.equal('p62');
+        expect(getCell(7, 1).textContent).to.equal('p71');
+        expect(getCell(7, 3).textContent).to.equal('p73');
       });
     });
 
@@ -399,7 +400,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
         const cell = getCell(2, 1);
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
 
         const clipboardData = ['p01', 'p02', 'p03'].join('\t');
         paste(cell, clipboardData);
@@ -407,8 +408,8 @@ describe('<DataGridPremium /> - Clipboard', () => {
         await waitFor(() => {
           // the last row is not selected and should not be updated
           expect(getColumnValues(1)).to.deep.equal(['p02', 'p02', 'p02', 'JPYUSD']);
-          expect(getColumnValues(2)).to.deep.equal(['p03', 'p03', 'p03', '31']);
         });
+        expect(getColumnValues(2)).to.deep.equal(['p03', 'p03', 'p03', '31']);
       });
 
       it('should paste into selected rows if multiple rows of data are pasted', async () => {
@@ -416,7 +417,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
         const cell = getCell(2, 1);
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
 
         const clipboardData = [
           ['p01', 'p02', 'p03'].join('\t'),
@@ -429,8 +430,8 @@ describe('<DataGridPremium /> - Clipboard', () => {
         await waitFor(() => {
           // the last row is not selected and should not be updated
           expect(getColumnValues(1)).to.deep.equal(['p02', 'p12', 'p22', 'JPYUSD']);
-          expect(getColumnValues(2)).to.deep.equal(['p03', 'p13', 'p23', '31']);
         });
+        expect(getColumnValues(2)).to.deep.equal(['p03', 'p13', 'p23', '31']);
       });
 
       it('should ignore row selection when single cell value is pasted', async () => {
@@ -438,22 +439,22 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
         const cell = getCell(2, 1);
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
 
         paste(cell, 'pasted');
 
         await waitFor(() => {
           // should ignore selected rows and paste into selected cell
           expect(getColumnValues(1)).to.deep.equal(['USDGBP', 'USDEUR', 'pasted', 'JPYUSD']);
-          expect(getColumnValues(2)).to.deep.equal(['1', '11', '21', '31']);
         });
+        expect(getColumnValues(2)).to.deep.equal(['1', '11', '21', '31']);
       });
 
       it('should paste into selected rows when checkbox selection cell is focused', async () => {
         render(<Test checkboxSelection />);
 
         const checkboxInput = getCell(0, 0).querySelector('input')!;
-        userEvent.mousePress(checkboxInput!);
+        fireUserEvent.mousePress(checkboxInput!);
 
         const clipboardData = ['p01', 'p02', 'p03'].join('\t');
         paste(checkboxInput, clipboardData);
@@ -461,8 +462,8 @@ describe('<DataGridPremium /> - Clipboard', () => {
         await waitFor(() => {
           // the first column (id) is not editable and won't be updated
           expect(getCell(0, 2).textContent).to.equal('p02');
-          expect(getCell(0, 3).textContent).to.equal('p03');
         });
+        expect(getCell(0, 3).textContent).to.equal('p03');
       });
     });
 
@@ -493,7 +494,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(1, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       paste(cell, 'Nike');
 
@@ -511,7 +512,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
         const cell = getCell(0, 1);
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
 
         fireEvent.keyDown(cell, { key: 'Shift' });
         fireEvent.click(getCell(1, 2), { shiftKey: true });
@@ -556,7 +557,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(1, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       paste(cell, '0');
 
@@ -605,7 +606,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(1, 2);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       paste(cell, 'John Doe');
 
@@ -646,7 +647,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(1, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       paste(cell, 'john doe');
 
@@ -685,7 +686,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(1, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.click(getCell(1, 4), { shiftKey: true });
@@ -694,10 +695,10 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       await waitFor(() => {
         expect(getColumnValues(1)).to.deep.equal(['Nike', 'Nike', 'Puma']);
-        expect(getColumnValues(2)).to.deep.equal(['Shoes', 'Shoes', 'Shoes']);
-        expect(getColumnValues(3)).to.deep.equal(['$120', '$100', '$90']);
-        expect(getColumnValues(4)).to.deep.equal(['4.0', '4.0', '4.9']);
       });
+      expect(getColumnValues(2)).to.deep.equal(['Shoes', 'Shoes', 'Shoes']);
+      expect(getColumnValues(3)).to.deep.equal(['$120', '$100', '$90']);
+      expect(getColumnValues(4)).to.deep.equal(['4.0', '4.0', '4.9']);
     });
 
     it('should call `processRowUpdate` with each row impacted by the paste', async () => {
@@ -708,7 +709,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 1);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.click(getCell(2, 2), { shiftKey: true });
@@ -751,7 +752,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 1);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       paste(cell, '12');
 
@@ -776,7 +777,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 1);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       paste(cell, '12');
 
@@ -803,7 +804,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 1);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       paste(cell, '12');
 
@@ -832,14 +833,14 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 1);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       paste(cell, '12');
 
       await waitFor(() => {
         expect(onProcessRowUpdateError.callCount).to.equal(1);
-        expect(onProcessRowUpdateError.args[0][0]).to.equal(error);
       });
+      expect(onProcessRowUpdateError.args[0][0]).to.equal(error);
     });
 
     it('should emit clipboard paste events', async () => {
@@ -864,7 +865,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 1);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.click(getCell(0, 2), { shiftKey: true });
@@ -908,13 +909,13 @@ describe('<DataGridPremium /> - Clipboard', () => {
       }
 
       function copyCell(cell: HTMLElement) {
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true });
       }
 
       function pasteIntoCell(cell: HTMLElement) {
         cell.focus();
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         paste(cell, clipboardData);
       }
 
@@ -1129,7 +1130,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 1);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.click(getCell(2, 2), { shiftKey: true });
@@ -1159,7 +1160,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       const cell = getCell(0, 1);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       let clipboardData = ['01', '11'].join('\n');
       // Add newline at the end
@@ -1169,10 +1170,10 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
       await waitFor(() => {
         expect(getCell(0, 1)).to.have.text('01');
-        expect(getCell(1, 1)).to.have.text('11');
-        // Should not be empty
-        expect(getCell(2, 1)).to.have.text('GBPEUR');
       });
+      expect(getCell(1, 1)).to.have.text('11');
+      // Should not be empty
+      expect(getCell(2, 1)).to.have.text('GBPEUR');
     });
   });
 });
diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
index 994100b91b89..9f60eb3694cf 100644
--- a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  createRenderer,
-  fireEvent,
-  screen,
-  act,
-  userEvent,
-  waitFor,
-} from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils';
 import {
   microtasks,
   getColumnHeaderCell,
@@ -16,6 +9,7 @@ import {
   getSelectByName,
   getRow,
 } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { expect } from 'chai';
 import {
   DataGridPremium,
@@ -888,7 +882,7 @@ describe('<DataGridPremium /> - Row grouping', () => {
           />,
         );
 
-        userEvent.mousePress(getCell(1, 0));
+        fireUserEvent.mousePress(getCell(1, 0));
         expect(renderIdCell.lastCall.firstArg.field).to.equal('id');
         expect(getCell(1, 0)).to.have.text('Focused: true');
       });
diff --git a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
index 65611293817f..e28fd45873d7 100644
--- a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
@@ -13,8 +13,9 @@ import {
   GridCellModes,
 } from '@mui/x-data-grid-pro';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
-import { createRenderer, fireEvent, act, userEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
 import { getCell, spyApi } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DataGridPro /> - Cell editing', () => {
   const { render, clock } = createRenderer({ clock: 'fake' });
@@ -210,9 +211,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const cell = getCell(0, 1);
         cell.focus();
 
-        await act(() => {
-          fireEvent.keyDown(cell, { key: 'Enter' });
-        });
+        fireEvent.keyDown(cell, { key: 'Enter' });
 
         expect(handleEditCellStop.callCount).to.equal(0);
       });
@@ -759,7 +758,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: '$' });
         expect(listener.lastCall.args[0].reason).to.equal('printableKeyDown');
       });
@@ -769,7 +768,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: ' ' });
         expect(listener.callCount).to.equal(0);
       });
@@ -781,7 +780,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: '1' });
         expect(listener.lastCall.args[0].reason).to.equal('printableKeyDown');
       });
@@ -793,7 +792,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Enter' });
         expect(listener.lastCall.args[0].reason).to.equal('enterKeyDown');
       });
@@ -803,7 +802,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 0);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Enter' });
         expect(listener.callCount).to.equal(0);
       });
@@ -812,7 +811,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Enter' });
         expect(spiedStartCellEditMode.callCount).to.equal(1);
       });
@@ -824,7 +823,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Delete' });
         expect(listener.lastCall.args[0].reason).to.equal('deleteKeyDown');
       });
@@ -834,7 +833,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 0);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Delete' });
         expect(listener.callCount).to.equal(0);
       });
@@ -843,7 +842,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Delete' });
         expect(spiedStartCellEditMode.callCount).to.equal(1);
       });
@@ -852,7 +851,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Delete' });
         expect(spiedStartCellEditMode.callCount).to.equal(1);
         expect(spiedStartCellEditMode.lastCall.args[0]).to.deep.equal({
@@ -868,7 +867,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'a' }); // A
         expect(spiedStartCellEditMode.callCount).to.equal(1);
       });
@@ -878,7 +877,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'a' }); // A
         expect(listener.lastCall.args[0].reason).to.equal('printableKeyDown');
       });
@@ -888,7 +887,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 0);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'a' }); // A
         expect(listener.callCount).to.equal(0);
       });
@@ -899,7 +898,7 @@ describe('<DataGridPro /> - Cell editing', () => {
           const listener = spy();
           apiRef.current.subscribeEvent('cellEditStart', listener);
           const cell = getCell(0, 1);
-          userEvent.mousePress(cell);
+          fireUserEvent.mousePress(cell);
           fireEvent.keyDown(cell, { key: 'a', [key]: true }); // for example Ctrl + A, copy
           expect(listener.callCount).to.equal(0);
         });
@@ -910,7 +909,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'a', shiftKey: true }); // Print A in uppercase
         expect(listener.callCount).to.equal(1);
       });
@@ -920,7 +919,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'v', ctrlKey: true }); // Ctrl+V
         expect(listener.callCount).to.equal(1);
       });
@@ -930,7 +929,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'π', altKey: true }); // ⌥ Option + P
         expect(listener.callCount).to.equal(1);
       });
@@ -939,7 +938,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'a' });
         expect(spiedStartCellEditMode.callCount).to.equal(1);
         expect(spiedStartCellEditMode.lastCall.args[0]).to.deep.equal({
@@ -991,7 +990,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         apiRef.current.subscribeEvent('cellEditStop', listener);
         fireEvent.doubleClick(getCell(0, 1));
         expect(listener.callCount).to.equal(0);
-        userEvent.mousePress(getCell(1, 1));
+        fireUserEvent.mousePress(getCell(1, 1));
         expect(listener.lastCall.args[0].reason).to.equal('cellFocusOut');
       });
 
@@ -999,7 +998,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode');
         fireEvent.doubleClick(getCell(0, 1));
-        userEvent.mousePress(getCell(1, 1));
+        fireUserEvent.mousePress(getCell(1, 1));
         expect(spiedStopCellEditMode.callCount).to.equal(1);
         expect(spiedStopCellEditMode.lastCall.args[0]).to.deep.equal({
           id: 0,
@@ -1021,7 +1020,7 @@ describe('<DataGridPro /> - Cell editing', () => {
               resolve();
             }),
         );
-        userEvent.mousePress(getCell(1, 1));
+        fireUserEvent.mousePress(getCell(1, 1));
         expect(spiedStopCellEditMode.callCount).to.equal(1);
         expect(spiedStopCellEditMode.lastCall.args[0].ignoreModifications).to.equal(false);
       });
@@ -1033,7 +1032,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStop', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(cell, { key: 'Escape' });
@@ -1044,7 +1043,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         fireEvent.keyDown(cell, { key: 'Escape' });
         expect(spiedStopCellEditMode.callCount).to.equal(1);
@@ -1063,7 +1062,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStop', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(cell, { key: 'Enter' });
@@ -1074,7 +1073,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         fireEvent.keyDown(cell, { key: 'Enter' });
         expect(spiedStopCellEditMode.callCount).to.equal(1);
@@ -1091,7 +1090,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         await act(
           () =>
@@ -1112,7 +1111,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('cellEditStop', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(cell, { key: 'Tab' });
@@ -1123,7 +1122,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         fireEvent.keyDown(cell, { key: 'Tab' });
         expect(spiedStopCellEditMode.callCount).to.equal(1);
@@ -1140,7 +1139,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         render(<TestCase />);
         const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         await act(
           () =>
diff --git a/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx
index 6287545d7c5b..e7be57860196 100644
--- a/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { GridApi, useGridApiRef, DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro';
-import { createRenderer, fireEvent, act, userEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { SinonSpy, spy } from 'sinon';
 import { getCell } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -53,7 +54,7 @@ describe('<DataGridPro /> - Clipboard', () => {
 
         act(() => apiRef.current.selectRows([0, 1]));
         const cell = getCell(0, 0);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'c', keyCode: 67, [key]: true });
         expect(writeText.firstCall.args[0]).to.equal(['0\tNike', '1\tAdidas'].join('\r\n'));
       });
@@ -72,7 +73,7 @@ describe('<DataGridPro /> - Clipboard', () => {
 
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
 
       fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true });
       expect(writeText.lastCall.firstArg).to.equal('1 " 1');
@@ -94,7 +95,7 @@ describe('<DataGridPro /> - Clipboard', () => {
 
       act(() => apiRef.current.selectRows([0, 1]));
       const cell = getCell(0, 0);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true });
       expect(writeText.firstCall.args[0]).to.equal(['1 " 1', '2'].join('\r\n'));
     });
diff --git a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
index 7508c219422f..340fefa5515c 100644
--- a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
@@ -12,14 +12,7 @@ import {
   GridColDef,
 } from '@mui/x-data-grid-pro';
 import { useBasicDemoData } from '@mui/x-data-grid-generator';
-import {
-  createRenderer,
-  fireEvent,
-  screen,
-  createEvent,
-  act,
-  userEvent,
-} from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, createEvent, act } from '@mui/internal-test-utils';
 import {
   $,
   $$,
@@ -29,6 +22,7 @@ import {
   getColumnHeadersTextContent,
   grid,
 } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 // TODO Move to utils
 // Fix https://github.com/mui/mui-x/pull/2085/files/058f56ac3c729b2142a9a28b79b5b13535cdb819#diff-db85480a519a5286d7341e9b8957844762cf04cdacd946331ebaaaff287482ec
@@ -105,7 +99,7 @@ describe('<DataGridPro /> - Column pinning', () => {
     virtualScroller.scrollLeft = 100;
     act(() => virtualScroller.dispatchEvent(new Event('scroll')));
     const cell = getCell(0, 2);
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
     fireEvent.keyDown(cell, { key: 'ArrowLeft' });
     expect(virtualScroller.scrollLeft).to.equal(0);
   });
@@ -119,7 +113,7 @@ describe('<DataGridPro /> - Column pinning', () => {
     const virtualScroller = document.querySelector(`.${gridClasses.virtualScroller}`)!;
     expect(virtualScroller.scrollLeft).to.equal(0);
     const cell = getCell(0, 1);
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
     fireEvent.keyDown(cell, { key: 'ArrowRight' });
     expect(virtualScroller.scrollLeft).to.equal(100);
   });
diff --git a/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx
index f5f8e93126a2..5c3bd5c7c0cc 100644
--- a/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { createRenderer, fireEvent, act, userEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { DataGridPro, GridApi, useGridApiRef, GridColDef, gridClasses } from '@mui/x-data-grid-pro';
 import { getActiveCell, getCell, getColumnHeaderCell } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -102,7 +103,7 @@ describe('<DataGridPro /> - Column spanning', () => {
 
       act(() => apiRef!.current.setColumnIndex('price', 1));
 
-      userEvent.mousePress(getCell(1, 1));
+      fireUserEvent.mousePress(getCell(1, 1));
       fireEvent.keyDown(getCell(1, 1), { key: 'ArrowRight' });
       expect(getActiveCell()).to.equal('1-2');
     });
diff --git a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx
index 884c31719746..07d621dcb81c 100644
--- a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { spy } from 'sinon';
 import { expect } from 'chai';
-import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils';
 import {
   DataGridPro,
   DataGridProProps,
@@ -121,7 +121,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
   });
 
   it('should not hide column when resizing a column after hiding it and showing it again', () => {
-    const { getByRole } = render(
+    render(
       <TestDataGridPro
         initialState={{
           columns: { columnVisibilityModel: {} },
@@ -130,7 +130,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
       />,
     );
 
-    const showHideAllCheckbox = getByRole('checkbox', { name: 'Show/Hide All' });
+    const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' });
     fireEvent.click(showHideAllCheckbox);
     expect(getColumnHeadersTextContent()).to.deep.equal([]);
     fireEvent.click(document.querySelector('[role="tooltip"] [name="id"]')!);
diff --git a/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx
index 496505757760..0c5db66554ee 100644
--- a/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, EventType, fireEvent, userEvent } from '@mui/internal-test-utils';
+import { createRenderer, EventType, fireEvent } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { expect } from 'chai';
 import {
@@ -11,6 +11,7 @@ import {
 } from '@mui/x-data-grid-pro';
 import { useBasicDemoData } from '@mui/x-data-grid-generator';
 import { getCell, getRow } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DataGridPro/> - Components', () => {
   const { render } = createRenderer();
@@ -86,7 +87,7 @@ describe('<DataGridPro/> - Components', () => {
       expect(propHandler.callCount).to.equal(0);
       expect(eventHandler.callCount).to.equal(0);
 
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
       fireEvent.keyDown(getCell(0, 0));
 
       expect(propHandler.callCount).to.equal(1);
diff --git a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
index e6aa9421dac8..29a8ffe8b2b9 100644
--- a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
@@ -11,15 +11,9 @@ import {
   GRID_DETAIL_PANEL_TOGGLE_FIELD,
 } from '@mui/x-data-grid-pro';
 import { useBasicDemoData } from '@mui/x-data-grid-generator';
-import {
-  createRenderer,
-  fireEvent,
-  screen,
-  waitFor,
-  act,
-  userEvent,
-} from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, waitFor, act } from '@mui/internal-test-utils';
 import { $, $$, grid, getRow, getCell, getColumnValues, microtasks } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -228,7 +222,7 @@ describe('<DataGridPro /> - Detail panel', () => {
       />,
     );
     const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
-    userEvent.mousePress(getCell(2, 1));
+    fireUserEvent.mousePress(getCell(2, 1));
     fireEvent.keyDown(getCell(2, 1), { key: 'ArrowDown' });
     expect(virtualScroller.scrollTop).to.equal(0);
     fireEvent.keyDown(getCell(3, 1), { key: 'ArrowDown' });
@@ -259,7 +253,7 @@ describe('<DataGridPro /> - Detail panel', () => {
 
     const cell = getCell(0, 0);
 
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
 
     fireEvent.keyDown(cell, { key: 'ArrowRight' });
     virtualScroller.dispatchEvent(new Event('scroll'));
@@ -278,7 +272,7 @@ describe('<DataGridPro /> - Detail panel', () => {
     render(<TestCase getDetailPanelContent={() => <div>Detail</div>} />);
     expect(screen.queryByText('Detail')).to.equal(null);
     const cell = getCell(0, 0);
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
     fireEvent.keyDown(cell, { key: ' ' });
     expect(screen.queryByText('Detail')).not.to.equal(null);
     fireEvent.keyDown(cell, { key: ' ' });
@@ -438,7 +432,7 @@ describe('<DataGridPro /> - Detail panel', () => {
     );
     expect(screen.queryByText('Detail')).to.equal(null);
     const cell = getCell(1, 0);
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
     expect(handleRowSelectionModelChange.callCount).to.equal(0);
   });
 
@@ -514,7 +508,7 @@ describe('<DataGridPro /> - Detail panel', () => {
       />,
     );
 
-    userEvent.mousePress(screen.getAllByRole('button', { name: 'Expand' })[0]);
+    fireUserEvent.mousePress(screen.getAllByRole('button', { name: 'Expand' })[0]);
 
     const virtualScroller = document.querySelector(`.${gridClasses.virtualScroller}`)!;
     virtualScroller.scrollTop = 500;
diff --git a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx
index 016d93c357ef..4982b8f559b4 100644
--- a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx
@@ -10,9 +10,10 @@ import {
   renderEditInputCell,
   renderEditSingleSelectCell,
 } from '@mui/x-data-grid-pro';
-import { act, createRenderer, fireEvent, screen, userEvent } from '@mui/internal-test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { getCell, spyApi } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { spy, SinonSpy } from 'sinon';
 
 /**
@@ -571,7 +572,7 @@ describe('<DataGridPro /> - Edit components', () => {
 
       const cell = getCell(0, 0);
       fireEvent.doubleClick(cell);
-      userEvent.mousePress(document.getElementById('outside-grid')!);
+      fireUserEvent.mousePress(document.getElementById('outside-grid')!);
       await act(() => Promise.resolve());
 
       expect(onCellEditStop.callCount).to.equal(1);
@@ -590,7 +591,7 @@ describe('<DataGridPro /> - Edit components', () => {
 
       const cell = getCell(0, 0);
       fireEvent.doubleClick(cell);
-      userEvent.mousePress(screen.queryAllByRole('option')[1]);
+      fireUserEvent.mousePress(screen.queryAllByRole('option')[1]);
       clock.runToLast();
       expect(screen.queryByRole('listbox')).to.equal(null);
       fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' });
diff --git a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
index 9818caf94205..3f9e9f9a36f6 100644
--- a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
@@ -1161,11 +1161,9 @@ describe('<DataGridPro /> - Filter', () => {
           openedPanelValue: GridPreferencePanelsValue.filters,
         },
       };
-      const { getAllByRole } = render(
-        <TestCase initialState={initialState} filterModel={newModel} columns={columns} />,
-      );
+      render(<TestCase initialState={initialState} filterModel={newModel} columns={columns} />);
       // For JSDom, the first hidden combo is also found which we are not interested in
-      const select = getAllByRole('combobox', { name: 'Logic operator' })[isJSDOM ? 1 : 0];
+      const select = screen.getAllByRole('combobox', { name: 'Logic operator' })[isJSDOM ? 1 : 0];
       expect(select).not.to.have.class('Mui-disabled');
     });
 
diff --git a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
index ff073625b482..d469b0bb87a2 100644
--- a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
@@ -13,8 +13,9 @@ import {
 } from '@mui/x-data-grid-pro';
 import Portal from '@mui/material/Portal';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
-import { createRenderer, fireEvent, act, userEvent, screen } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils';
 import { getCell, getRow, spyApi } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DataGridPro /> - Row editing', () => {
   const { render, clock } = createRenderer();
@@ -780,7 +781,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Enter' });
         expect(listener.lastCall.args[0].reason).to.equal('enterKeyDown');
       });
@@ -790,7 +791,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStart', listener);
         const cell = getCell(0, 0);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Enter' });
         expect(listener.callCount).to.equal(0);
       });
@@ -799,7 +800,7 @@ describe('<DataGridPro /> - Row editing', () => {
         render(<TestCase />);
         const spiedStartRowEditMode = spyApi(apiRef.current, 'startRowEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Enter' });
         expect(spiedStartRowEditMode.callCount).to.equal(1);
         expect(spiedStartRowEditMode.lastCall.args[0]).to.deep.equal({
@@ -815,7 +816,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Delete' });
         expect(listener.lastCall.args[0].reason).to.equal('deleteKeyDown');
       });
@@ -825,7 +826,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStart', listener);
         const cell = getCell(0, 0);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Delete' });
         expect(listener.callCount).to.equal(0);
       });
@@ -834,7 +835,7 @@ describe('<DataGridPro /> - Row editing', () => {
         render(<TestCase />);
         const spiedStartRowEditMode = spyApi(apiRef.current, 'startRowEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'Delete' });
         expect(spiedStartRowEditMode.callCount).to.equal(1);
         expect(spiedStartRowEditMode.lastCall.args[0]).to.deep.equal({
@@ -851,7 +852,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'a' });
         expect(listener.lastCall.args[0].reason).to.equal('printableKeyDown');
       });
@@ -861,7 +862,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStart', listener);
         const cell = getCell(0, 0);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'a' });
         expect(listener.callCount).to.equal(0);
       });
@@ -872,7 +873,7 @@ describe('<DataGridPro /> - Row editing', () => {
           const listener = spy();
           apiRef.current.subscribeEvent('rowEditStart', listener);
           const cell = getCell(0, 1);
-          userEvent.mousePress(cell);
+          fireUserEvent.mousePress(cell);
           fireEvent.keyDown(cell, { key: 'a', [key]: true });
           expect(listener.callCount).to.equal(0);
         });
@@ -883,7 +884,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'a', shiftKey: true });
         expect(listener.callCount).to.equal(1);
       });
@@ -893,7 +894,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: ' ' });
         expect(listener.callCount).to.equal(0);
       });
@@ -903,7 +904,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStart', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'v', ctrlKey: true });
         expect(listener.callCount).to.equal(1);
       });
@@ -912,7 +913,7 @@ describe('<DataGridPro /> - Row editing', () => {
         render(<TestCase />);
         const spiedStartRowEditMode = spyApi(apiRef.current, 'startRowEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'a' });
         expect(spiedStartRowEditMode.callCount).to.equal(1);
         expect(spiedStartRowEditMode.lastCall.args[0]).to.deep.equal({
@@ -966,7 +967,7 @@ describe('<DataGridPro /> - Row editing', () => {
         apiRef.current.subscribeEvent('rowEditStop', listener);
         fireEvent.doubleClick(getCell(0, 1));
         expect(listener.callCount).to.equal(0);
-        userEvent.mousePress(getCell(1, 1));
+        fireUserEvent.mousePress(getCell(1, 1));
         clock.runToLast();
         expect(listener.lastCall.args[0].reason).to.equal('rowFocusOut');
       });
@@ -986,7 +987,7 @@ describe('<DataGridPro /> - Row editing', () => {
         );
         expect(listener.callCount).to.equal(0);
 
-        userEvent.mousePress(getCell(1, 1));
+        fireUserEvent.mousePress(getCell(1, 1));
         clock.runToLast();
         expect(listener.callCount).to.equal(0);
       });
@@ -995,7 +996,7 @@ describe('<DataGridPro /> - Row editing', () => {
         render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         fireEvent.doubleClick(getCell(0, 1));
-        userEvent.mousePress(getCell(1, 1));
+        fireUserEvent.mousePress(getCell(1, 1));
         clock.runToLast();
         expect(spiedStopRowEditMode.callCount).to.equal(1);
         expect(spiedStopRowEditMode.lastCall.args[0]).to.deep.equal({
@@ -1014,7 +1015,7 @@ describe('<DataGridPro /> - Row editing', () => {
         act(() => {
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
         });
-        userEvent.mousePress(getCell(1, 1));
+        fireUserEvent.mousePress(getCell(1, 1));
         clock.runToLast();
         expect(spiedStopRowEditMode.callCount).to.equal(1);
         expect(spiedStopRowEditMode.lastCall.args[0].ignoreModifications).to.equal(false);
@@ -1027,7 +1028,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStop', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(cell.querySelector('input')!, { key: 'Escape' });
@@ -1057,7 +1058,7 @@ describe('<DataGridPro /> - Row editing', () => {
         render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         fireEvent.keyDown(cell.querySelector('input')!, { key: 'Escape' });
         expect(spiedStopRowEditMode.callCount).to.equal(1);
@@ -1076,7 +1077,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStop', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(cell.querySelector('input')!, { key: 'Enter' });
@@ -1106,7 +1107,7 @@ describe('<DataGridPro /> - Row editing', () => {
         render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         fireEvent.keyDown(cell.querySelector('input')!, { key: 'Enter' });
         expect(spiedStopRowEditMode.callCount).to.equal(1);
@@ -1123,7 +1124,7 @@ describe('<DataGridPro /> - Row editing', () => {
         render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         act(() => {
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
@@ -1140,7 +1141,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStop', listener);
         const cell = getCell(0, 2);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' });
@@ -1152,7 +1153,7 @@ describe('<DataGridPro /> - Row editing', () => {
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStop', listener);
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab', shiftKey: true });
@@ -1163,7 +1164,7 @@ describe('<DataGridPro /> - Row editing', () => {
         render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         const cell = getCell(0, 2);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' });
         expect(spiedStopRowEditMode.callCount).to.equal(1);
@@ -1179,7 +1180,7 @@ describe('<DataGridPro /> - Row editing', () => {
         render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         const cell = getCell(0, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab', shiftKey: true });
         expect(spiedStopRowEditMode.callCount).to.equal(1);
@@ -1196,7 +1197,7 @@ describe('<DataGridPro /> - Row editing', () => {
         render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         const cell = getCell(0, 2);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.doubleClick(cell);
         await act(() => {
           apiRef.current.setEditCellValue({ id: 0, field: 'price1M', value: 'USD GBP' });
diff --git a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx
index bb57b3b1aad8..c4ca6ea072b6 100644
--- a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx
@@ -11,14 +11,7 @@ import {
   GridColDef,
 } from '@mui/x-data-grid-pro';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
-import {
-  createRenderer,
-  fireEvent,
-  screen,
-  act,
-  userEvent,
-  waitFor,
-} from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils';
 import {
   $,
   grid,
@@ -30,6 +23,7 @@ import {
   getRows,
   microtasks,
 } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -368,7 +362,7 @@ describe('<DataGridPro /> - Row pinning', () => {
       expect(isRowPinned(getRowById(1), 'top')).to.equal(true, '#1 pinned top');
       expect(isRowPinned(getRowById(0), 'top')).to.equal(true, '#0 pinned top');
 
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
       // first top pinned row
       expect(getActiveCellRowId()).to.equal('1');
 
@@ -410,7 +404,7 @@ describe('<DataGridPro /> - Row pinning', () => {
       expect(isRowPinned(getRowById(0), 'bottom')).to.equal(true, '#0 pinned top');
       expect(isRowPinned(getRowById(1), 'bottom')).to.equal(true, '#1 pinned top');
 
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
       expect(getActiveCellRowId()).to.equal('2');
 
       fireEvent.keyDown(getCell(0, 0), { key: 'ArrowDown' });
@@ -462,7 +456,7 @@ describe('<DataGridPro /> - Row pinning', () => {
       expect(isRowPinned(getRowById(0), 'bottom')).to.equal(true, '#0 pinned bottom');
 
       // top-pinned row
-      userEvent.mousePress(getCell(0, 3));
+      fireUserEvent.mousePress(getCell(0, 3));
       expect(getActiveCell()).to.equal('0-3');
       expect(getActiveCellRowId()).to.equal('1');
 
@@ -887,7 +881,7 @@ describe('<DataGridPro /> - Row pinning', () => {
 
     await waitFor(() => {
       expect(getCell(0, 1).textContent).to.equal('Marcus');
-      expect(getCell(4, 1).textContent).to.equal('Tom');
     });
+    expect(getCell(4, 1).textContent).to.equal('Tom');
   });
 });
diff --git a/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx
index 8e24fde92b3b..3fa3aec057dd 100644
--- a/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, fireEvent, act, userEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { expect } from 'chai';
 import {
@@ -13,6 +13,7 @@ import {
   getRows,
   getColumnHeaderCell,
 } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import {
   GridRowModel,
   useGridApiRef,
@@ -766,7 +767,7 @@ describe('<DataGridPro /> - Rows', () => {
     it('should focus the clicked cell in the state', () => {
       render(<TestCase rows={baselineProps.rows} />);
 
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
       expect(apiRef.current.state.focus.cell).to.deep.equal({
         id: baselineProps.rows[0].id,
         field: baselineProps.columns[0].field,
@@ -784,7 +785,7 @@ describe('<DataGridPro /> - Rows', () => {
     it('should not reset focus when removing a row not containing the focus cell', () => {
       const { setProps } = render(<TestCase rows={baselineProps.rows} />);
 
-      userEvent.mousePress(getCell(1, 0));
+      fireUserEvent.mousePress(getCell(1, 0));
       setProps({ rows: baselineProps.rows.slice(1) });
       expect(gridFocusCellSelector(apiRef)).to.deep.equal({
         id: baselineProps.rows[1].id,
@@ -795,7 +796,7 @@ describe('<DataGridPro /> - Rows', () => {
     it('should set the focus when pressing a key inside a cell', () => {
       render(<TestCase rows={baselineProps.rows} />);
       const cell = getCell(1, 0);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'a' });
       expect(gridFocusCellSelector(apiRef)).to.deep.equal({
         id: baselineProps.rows[1].id,
@@ -805,12 +806,12 @@ describe('<DataGridPro /> - Rows', () => {
 
     it('should update the focus when clicking from one cell to another', () => {
       render(<TestCase rows={baselineProps.rows} />);
-      userEvent.mousePress(getCell(1, 0));
+      fireUserEvent.mousePress(getCell(1, 0));
       expect(gridFocusCellSelector(apiRef)).to.deep.equal({
         id: baselineProps.rows[1].id,
         field: baselineProps.columns[0].field,
       });
-      userEvent.mousePress(getCell(2, 1));
+      fireUserEvent.mousePress(getCell(2, 1));
       expect(gridFocusCellSelector(apiRef)).to.deep.equal({
         id: baselineProps.rows[2].id,
         field: baselineProps.columns[1].field,
@@ -819,12 +820,12 @@ describe('<DataGridPro /> - Rows', () => {
 
     it('should reset focus when clicking outside the focused cell', () => {
       render(<TestCase rows={baselineProps.rows} />);
-      userEvent.mousePress(getCell(1, 0));
+      fireUserEvent.mousePress(getCell(1, 0));
       expect(gridFocusCellSelector(apiRef)).to.deep.equal({
         id: baselineProps.rows[1].id,
         field: baselineProps.columns[0].field,
       });
-      userEvent.mousePress(document.body);
+      fireUserEvent.mousePress(document.body);
       expect(gridFocusCellSelector(apiRef)).to.deep.equal(null);
     });
 
@@ -832,9 +833,9 @@ describe('<DataGridPro /> - Rows', () => {
       const handleCellFocusOut = spy();
       render(<TestCase rows={baselineProps.rows} />);
       apiRef.current.subscribeEvent('cellFocusOut', handleCellFocusOut);
-      userEvent.mousePress(getCell(1, 0));
+      fireUserEvent.mousePress(getCell(1, 0));
       expect(handleCellFocusOut.callCount).to.equal(0);
-      userEvent.mousePress(document.body);
+      fireUserEvent.mousePress(document.body);
       expect(handleCellFocusOut.callCount).to.equal(1);
       expect(handleCellFocusOut.args[0][0].id).to.equal(baselineProps.rows[1].id);
       expect(handleCellFocusOut.args[0][0].field).to.equal(baselineProps.columns[0].field);
@@ -851,7 +852,7 @@ describe('<DataGridPro /> - Rows', () => {
           />,
         );
         const cell = getCell(0, 0);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
       }).not.to.throw();
     });
 
@@ -877,7 +878,7 @@ describe('<DataGridPro /> - Rows', () => {
           />,
         );
         const cell = getCell(0, 0);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         const columnHeaderCell = getColumnHeaderCell(0);
         fireEvent.focus(columnHeaderCell);
       }).not.to.throw();
diff --git a/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx
index 12260bda0f58..a4c2c120e273 100644
--- a/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx
@@ -1,4 +1,4 @@
-import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils';
 import {
   getCell,
   getColumnHeaderCell,
@@ -6,6 +6,7 @@ import {
   getColumnValues,
   getRow,
 } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
@@ -399,7 +400,7 @@ describe('<DataGridPro /> - Tree data', () => {
     it('should toggle expansion when pressing Space while focusing grouping column', () => {
       render(<Test />);
       expect(getColumnValues(1)).to.deep.equal(['A', 'B', 'C']);
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
       expect(getColumnValues(1)).to.deep.equal(['A', 'B', 'C']);
       fireEvent.keyDown(getCell(0, 0), { key: ' ' });
       expect(getColumnValues(1)).to.deep.equal(['A', 'A.A', 'A.B', 'B', 'C']);
diff --git a/packages/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/x-data-grid/src/tests/cells.DataGrid.test.tsx
index 91eec8720b13..61c3a5b0f72d 100644
--- a/packages/x-data-grid/src/tests/cells.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/cells.DataGrid.test.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent, userEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { DataGrid, GridValueFormatter } from '@mui/x-data-grid';
 import { getCell } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -180,7 +181,7 @@ describe('<DataGrid /> - Cells', () => {
       </div>,
     );
 
-    userEvent.mousePress(getCell(0, 0));
+    fireUserEvent.mousePress(getCell(0, 0));
 
     expect(() => {
       getCell(1, 0).focus();
@@ -203,7 +204,7 @@ describe('<DataGrid /> - Cells', () => {
     const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
 
     const cell = getCell(1, 3);
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
 
     const activeElementTextContent = document.activeElement?.textContent;
     const columnWidth = document.activeElement!.clientWidth;
@@ -240,7 +241,7 @@ describe('<DataGrid /> - Cells', () => {
     const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
 
     const thirdRowCell = getCell(2, 0);
-    userEvent.mousePress(thirdRowCell);
+    fireUserEvent.mousePress(thirdRowCell);
 
     let scrollTop = 6 * rowHeight;
     virtualScroller.scrollTop = scrollTop;
diff --git a/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
index 47e091416795..0d8a7c325d47 100644
--- a/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { createRenderer, fireEvent, screen, within, userEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, within } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { DataGrid } from '@mui/x-data-grid';
 import { getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -123,11 +124,11 @@ describe('<DataGrid /> - Column headers', () => {
         </div>,
       );
 
-      userEvent.mousePress(within(getColumnHeaderCell(0)).getByLabelText('Menu'));
+      fireUserEvent.mousePress(within(getColumnHeaderCell(0)).getByLabelText('Menu'));
       clock.runToLast();
       expect(screen.queryByRole('menu')).not.to.equal(null);
 
-      userEvent.mousePress(within(getColumnHeaderCell(0)).getByLabelText('Menu'));
+      fireUserEvent.mousePress(within(getColumnHeaderCell(0)).getByLabelText('Menu'));
       clock.runToLast();
       expect(screen.queryByRole('menu')).to.equal(null);
     });
diff --git a/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx
index eaada2a7f132..b326949ee1d7 100644
--- a/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { createRenderer, fireEvent, screen, within, userEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, within } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { DataGrid, gridClasses, GridColDef } from '@mui/x-data-grid';
 import { getCell, getActiveCell, getColumnHeaderCell } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -125,7 +126,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
       expect(getActiveCell()).to.equal('0-0');
 
       fireEvent.keyDown(getCell(0, 0), { key: 'ArrowRight' });
@@ -139,7 +140,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(0, 2));
+      fireUserEvent.mousePress(getCell(0, 2));
       expect(getActiveCell()).to.equal('0-2');
 
       fireEvent.keyDown(getCell(0, 2), { key: 'ArrowLeft' });
@@ -153,7 +154,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(1, 1));
+      fireUserEvent.mousePress(getCell(1, 1));
       expect(getActiveCell()).to.equal('1-1');
 
       fireEvent.keyDown(getCell(1, 1), { key: 'ArrowUp' });
@@ -167,7 +168,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(1, 3));
+      fireUserEvent.mousePress(getCell(1, 3));
       expect(getActiveCell()).to.equal('1-3');
 
       fireEvent.keyDown(getCell(1, 3), { key: 'ArrowDown' });
@@ -186,7 +187,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(0, 3));
+      fireUserEvent.mousePress(getCell(0, 3));
       expect(getActiveCell()).to.equal('0-3');
 
       fireEvent.keyDown(getCell(0, 3), { key: 'PageDown' });
@@ -200,7 +201,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(2, 1));
+      fireUserEvent.mousePress(getCell(2, 1));
       expect(getActiveCell()).to.equal('2-1');
 
       fireEvent.keyDown(getCell(2, 1), { key: 'PageUp' });
@@ -220,7 +221,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(1, 3));
+      fireUserEvent.mousePress(getCell(1, 3));
       expect(getActiveCell()).to.equal('1-3');
 
       // start editing
@@ -239,7 +240,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(1, 1));
+      fireUserEvent.mousePress(getCell(1, 1));
       expect(getActiveCell()).to.equal('1-1');
 
       // start editing
@@ -257,7 +258,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(0, 2));
+      fireUserEvent.mousePress(getCell(0, 2));
       expect(getActiveCell()).to.equal('0-2');
 
       // start editing
@@ -318,7 +319,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(1, 1));
+      fireUserEvent.mousePress(getCell(1, 1));
       expect(getActiveCell()).to.equal('1-1');
 
       fireEvent.keyDown(getCell(1, 1), { key: 'ArrowDown' });
@@ -352,7 +353,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
 
       fireEvent.keyDown(getCell(0, 0), { key: 'ArrowRight' });
       document.querySelector(`.${gridClasses.virtualScroller}`)!.dispatchEvent(new Event('scroll'));
@@ -428,7 +429,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
       expect(getActiveCell()).to.equal('0-0');
 
       fireEvent.keyDown(getCell(0, 0), { key: 'ArrowDown' });
@@ -459,7 +460,7 @@ describe('<DataGrid /> - Column spanning', () => {
         </div>,
       );
 
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
 
       const virtualScroller = document.querySelector<HTMLElement>(
         `.${gridClasses.virtualScroller}`,
diff --git a/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx
index 3771593c4f90..0adf925558ef 100644
--- a/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx
@@ -126,12 +126,12 @@ describe('<DataGridPro /> - Columns visibility', () => {
           />
         );
       }
-      const { getByRole } = render(<ControlledTest />);
+      render(<ControlledTest />);
 
       expect(getColumnHeadersTextContent()).to.deep.equal(['id']);
 
-      fireEvent.click(getByRole('button', { name: 'Select columns' }));
-      const showHideAllCheckbox = getByRole('checkbox', { name: 'Show/Hide All' });
+      fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+      const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' });
 
       // Hide all
       fireEvent.click(showHideAllCheckbox);
@@ -149,7 +149,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
 
     // Fixes (1) and (2) in https://github.com/mui/mui-x/issues/7393#issuecomment-1372129661
     it('should not show hidden non hideable columns when "Show/Hide All" is clicked', () => {
-      const { getByRole } = render(
+      render(
         <TestDataGrid
           slots={{
             toolbar: GridToolbar,
@@ -163,8 +163,8 @@ describe('<DataGridPro /> - Columns visibility', () => {
         />,
       );
 
-      fireEvent.click(getByRole('button', { name: 'Select columns' }));
-      const showHideAllCheckbox = getByRole('checkbox', { name: 'Show/Hide All' });
+      fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+      const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' });
       // Hide all
       fireEvent.click(showHideAllCheckbox);
       expect(getColumnHeadersTextContent()).to.deep.equal([]);
@@ -267,7 +267,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
   });
 
   it('should hide `Show/Hide all` in columns management when `disableShowHideToggle` is `true`', () => {
-    const { setProps, getByRole, queryByRole } = render(
+    const { setProps } = render(
       <TestDataGrid
         slots={{
           toolbar: GridToolbar,
@@ -277,7 +277,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
 
     fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
     // check if `Show/Hide all` checkbox is present initially
-    expect(getByRole('checkbox', { name: 'Show/Hide All' })).not.to.equal(null);
+    expect(screen.getByRole('checkbox', { name: 'Show/Hide All' })).not.to.equal(null);
     setProps({
       slotProps: {
         columnsManagement: {
@@ -287,11 +287,11 @@ describe('<DataGridPro /> - Columns visibility', () => {
     });
 
     // check if `Show/Hide All` checkbox is not present  after setting `slotProps`
-    expect(queryByRole('checkbox', { name: 'Show/Hide All' })).to.equal(null);
+    expect(screen.queryByRole('checkbox', { name: 'Show/Hide All' })).to.equal(null);
   });
 
   it('should hide `Reset` in columns panel when `disableResetButton` is `true`', () => {
-    const { setProps, getByRole, queryByRole } = render(
+    const { setProps } = render(
       <TestDataGrid
         slots={{
           toolbar: GridToolbar,
@@ -301,7 +301,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
 
     fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
     // check if Reset button is present initially
-    expect(getByRole('button', { name: 'Reset' })).not.to.equal(null);
+    expect(screen.getByRole('button', { name: 'Reset' })).not.to.equal(null);
     setProps({
       slotProps: {
         columnsManagement: {
@@ -310,11 +310,11 @@ describe('<DataGridPro /> - Columns visibility', () => {
       },
     });
     // check if Reset button is not present after setting slotProps
-    expect(queryByRole('button', { name: 'Reset' })).to.equal(null);
+    expect(screen.queryByRole('button', { name: 'Reset' })).to.equal(null);
   });
 
   it('should reset the columns to initial columns state when `Reset` button is clicked in columns management panel', () => {
-    const { getByRole } = render(
+    render(
       <TestDataGrid
         slots={{
           toolbar: GridToolbar,
@@ -324,7 +324,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
 
     expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'idBis']);
     fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
-    const resetButton = getByRole('button', { name: 'Reset' });
+    const resetButton = screen.getByRole('button', { name: 'Reset' });
     expect(resetButton).to.have.attribute('disabled');
 
     // Hide `idBis` column
@@ -363,7 +363,7 @@ describe('<DataGridPro /> - Columns visibility', () => {
     it('should avoid toggling columns provided by `getTogglableColumns` prop on `Show/Hide All`', () => {
       const getTogglableColumns = (cols: GridColDef[]) =>
         cols.filter((column) => column.field !== 'idBis').map((column) => column.field);
-      const { getByRole } = render(
+      render(
         <TestDataGrid
           slots={{
             toolbar: GridToolbar,
@@ -376,8 +376,8 @@ describe('<DataGridPro /> - Columns visibility', () => {
         />,
       );
 
-      fireEvent.click(getByRole('button', { name: 'Select columns' }));
-      const showHideAllCheckbox = getByRole('checkbox', { name: 'Show/Hide All' });
+      fireEvent.click(screen.getByRole('button', { name: 'Select columns' }));
+      const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' });
       fireEvent.click(showHideAllCheckbox);
       expect(getColumnHeadersTextContent()).to.deep.equal(['idBis']);
 
diff --git a/packages/x-data-grid/src/tests/density.DataGrid.test.tsx b/packages/x-data-grid/src/tests/density.DataGrid.test.tsx
index e1a2e2b3148f..aaad84e1c4fe 100644
--- a/packages/x-data-grid/src/tests/density.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/density.DataGrid.test.tsx
@@ -106,13 +106,13 @@ describe('<DataGrid /> - Density', () => {
         );
       }
 
-      const { setProps, getByText } = render(<Grid rowHeight={rowHeight} density="standard" />);
+      const { setProps } = render(<Grid rowHeight={rowHeight} density="standard" />);
 
       expectHeight(rowHeight);
 
-      fireEvent.click(getByText('Density'));
+      fireEvent.click(screen.getByText('Density'));
       clock.tick(100);
-      fireEvent.click(getByText('Compact'));
+      fireEvent.click(screen.getByText('Compact'));
 
       // Not updated because of the controlled prop
       expectHeight(rowHeight);
@@ -138,9 +138,9 @@ describe('<DataGrid /> - Density', () => {
           </div>
         );
       }
-      const { getByText } = render(<Test />);
-      fireEvent.click(getByText('Density'));
-      fireEvent.click(getByText('Comfortable'));
+      render(<Test />);
+      fireEvent.click(screen.getByText('Density'));
+      fireEvent.click(screen.getByText('Comfortable'));
       expect(onDensityChange.callCount).to.equal(1);
       expect(onDensityChange.firstCall.args[0]).to.equal('comfortable');
     });
@@ -149,7 +149,7 @@ describe('<DataGrid /> - Density', () => {
   describe('density selection menu', () => {
     it('should increase grid density when selecting compact density', () => {
       const rowHeight = 30;
-      const { getByText } = render(
+      render(
         <div style={{ width: 300, height: 300 }}>
           <DataGrid
             {...baselineProps}
@@ -161,16 +161,16 @@ describe('<DataGrid /> - Density', () => {
         </div>,
       );
 
-      fireEvent.click(getByText('Density'));
+      fireEvent.click(screen.getByText('Density'));
       clock.tick(100);
-      fireEvent.click(getByText('Compact'));
+      fireEvent.click(screen.getByText('Compact'));
 
       expectHeight(rowHeight * COMPACT_DENSITY_FACTOR);
     });
 
     it('should decrease grid density when selecting comfortable density', () => {
       const rowHeight = 30;
-      const { getByText } = render(
+      render(
         <div style={{ width: 300, height: 300 }}>
           <DataGrid
             {...baselineProps}
@@ -182,8 +182,8 @@ describe('<DataGrid /> - Density', () => {
         </div>,
       );
 
-      fireEvent.click(getByText('Density'));
-      fireEvent.click(getByText('Comfortable'));
+      fireEvent.click(screen.getByText('Density'));
+      fireEvent.click(screen.getByText('Comfortable'));
 
       expectHeight(rowHeight * COMFORTABLE_DENSITY_FACTOR);
     });
diff --git a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
index 27c196256ecd..c27dbaf58942 100644
--- a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { expect } from 'chai';
 import {
@@ -10,6 +10,7 @@ import {
   getColumnValues,
   getRow,
 } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import {
   DataGrid,
   DataGridProps,
@@ -74,7 +75,7 @@ describe('<DataGrid /> - Keyboard', () => {
     it('should move to cell below when pressing "ArrowDown" on a cell on the 1st page', () => {
       render(<NavigationTestCaseNoScrollX />);
       const cell = getCell(8, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('8-1');
       fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
       expect(getActiveCell()).to.equal('9-1');
@@ -85,7 +86,7 @@ describe('<DataGrid /> - Keyboard', () => {
     it('should move to cell below when pressing "ArrowDown" on a cell on the 2nd page', () => {
       render(<NavigationTestCaseNoScrollX paginationModel={{ page: 1, pageSize: PAGE_SIZE }} />);
       const cell = getCell(18, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('18-1');
       fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
       expect(getActiveCell()).to.equal('19-1');
@@ -96,7 +97,7 @@ describe('<DataGrid /> - Keyboard', () => {
     it('should move to the cell below when pressing "ArrowDown" on the checkbox selection cell', () => {
       render(<NavigationTestCaseNoScrollX checkboxSelection />);
       const cell = getCell(0, 0);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('0-0');
       fireEvent.keyDown(cell.querySelector('input')!, { key: 'ArrowDown' });
       expect(getActiveCell()).to.equal('1-0');
@@ -107,7 +108,7 @@ describe('<DataGrid /> - Keyboard', () => {
     it('should move to the cell above when pressing "ArrowUp" on a cell on the 1st page', () => {
       render(<NavigationTestCaseNoScrollX />);
       const cell = getCell(1, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('1-1');
       fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });
       expect(getActiveCell()).to.equal('0-1');
@@ -118,7 +119,7 @@ describe('<DataGrid /> - Keyboard', () => {
     it('should move to the cell above when pressing "ArrowUp" on a cell on the 2nd page', () => {
       render(<NavigationTestCaseNoScrollX paginationModel={{ page: 1, pageSize: PAGE_SIZE }} />);
       const cell = getCell(11, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('11-1');
       fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });
       expect(getActiveCell()).to.equal('10-1');
@@ -129,7 +130,7 @@ describe('<DataGrid /> - Keyboard', () => {
     it('should move to the cell right when pressing "ArrowRight" on a cell', () => {
       render(<NavigationTestCaseNoScrollX />);
       const cell = getCell(1, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('1-1');
       fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
       expect(getActiveCell()).to.equal('1-2');
@@ -140,7 +141,7 @@ describe('<DataGrid /> - Keyboard', () => {
     it('should move to the cell right when pressing "ArrowRight" on the checkbox selection cell', () => {
       render(<NavigationTestCaseNoScrollX checkboxSelection />);
       const cell = getCell(1, 0);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('1-0');
       fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
       expect(getActiveCell()).to.equal('1-1');
@@ -149,7 +150,7 @@ describe('<DataGrid /> - Keyboard', () => {
     it('should move to the cell left when pressing "ArrowLeft" on a cell', () => {
       render(<NavigationTestCaseNoScrollX />);
       const cell = getCell(1, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('1-1');
       fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });
       expect(getActiveCell()).to.equal('1-0');
@@ -165,7 +166,7 @@ describe('<DataGrid /> - Keyboard', () => {
 
       render(<NavigationTestCaseNoScrollX />);
       const cell = getCell(1, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('1-1');
       fireEvent.keyDown(document.activeElement!, { key: 'PageDown' });
       expect(getActiveCell()).to.equal(`6-1`);
@@ -181,7 +182,7 @@ describe('<DataGrid /> - Keyboard', () => {
 
       render(<NavigationTestCaseNoScrollX />);
       const cell = getCell(1, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('1-1');
       fireEvent.keyDown(document.activeElement!, { key: 'PageDown' });
       expect(getActiveCell()).to.equal(`6-1`);
@@ -197,7 +198,7 @@ describe('<DataGrid /> - Keyboard', () => {
 
       render(<NavigationTestCaseNoScrollX />);
       const cell = getCell(8, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('8-1');
       fireEvent.keyDown(document.activeElement!, { key: 'PageUp' });
       expect(getActiveCell()).to.equal(`3-1`);
@@ -211,7 +212,7 @@ describe('<DataGrid /> - Keyboard', () => {
 
       render(<NavigationTestCaseNoScrollX />);
       const cell = getCell(3, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('3-1');
 
       fireEvent.keyDown(document.activeElement!, { key: 'PageUp' });
@@ -233,7 +234,7 @@ describe('<DataGrid /> - Keyboard', () => {
       fireEvent.click(screen.getByRole('button', { name: /next page/i }));
 
       const cell = getCell(13, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('13-1');
 
       fireEvent.keyDown(document.activeElement!, { key: 'PageUp' });
@@ -247,7 +248,7 @@ describe('<DataGrid /> - Keyboard', () => {
     it('should navigate to the 1st cell of the current row when pressing "Home"', () => {
       render(<NavigationTestCaseNoScrollX />);
       const cell = getCell(8, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('8-1');
       fireEvent.keyDown(document.activeElement!, { key: 'Home' });
       expect(getActiveCell()).to.equal('8-0');
@@ -259,17 +260,17 @@ describe('<DataGrid /> - Keyboard', () => {
       render(<NavigationTestCaseNoScrollX />);
 
       const cell = getCell(8, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('8-1');
       fireEvent.keyDown(document.activeElement!, { key: 'Home', ctrlKey: true });
       expect(getActiveCell()).to.equal('0-0');
 
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('8-1');
       fireEvent.keyDown(document.activeElement!, { key: 'Home', metaKey: true });
       expect(getActiveCell()).to.equal('0-0');
 
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('8-1');
       fireEvent.keyDown(document.activeElement!, { key: 'Home', shiftKey: true });
       expect(getActiveCell()).to.equal('0-0');
@@ -278,7 +279,7 @@ describe('<DataGrid /> - Keyboard', () => {
     it('should navigate to the last cell of the current row when pressing "End"', () => {
       render(<NavigationTestCaseNoScrollX />);
       const cell = getCell(8, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('8-1');
       fireEvent.keyDown(cell, { key: 'End' });
       expect(getActiveCell()).to.equal('8-2');
@@ -290,17 +291,17 @@ describe('<DataGrid /> - Keyboard', () => {
       render(<NavigationTestCaseNoScrollX />);
 
       const cell = getCell(8, 1);
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('8-1');
       fireEvent.keyDown(document.activeElement!, { key: 'End', ctrlKey: true });
       expect(getActiveCell()).to.equal('9-2');
 
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('8-1');
       fireEvent.keyDown(document.activeElement!, { key: 'End', metaKey: true });
       expect(getActiveCell()).to.equal('9-2');
 
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       expect(getActiveCell()).to.equal('8-1');
       fireEvent.keyDown(document.activeElement!, { key: 'End', shiftKey: true });
       expect(getActiveCell()).to.equal('9-2');
@@ -404,7 +405,7 @@ describe('<DataGrid /> - Keyboard', () => {
         getColumnHeaderCell(1).querySelector<HTMLElement>(`button[title="Sort"]`)!;
 
       // Simulate click on this button
-      userEvent.mousePress(columnMenuButton);
+      fireUserEvent.mousePress(columnMenuButton);
       columnMenuButton.focus();
 
       fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
@@ -434,7 +435,7 @@ describe('<DataGrid /> - Keyboard', () => {
         </div>,
       );
       const input = screen.getByTestId('custom-input');
-      userEvent.mousePress(input);
+      fireUserEvent.mousePress(input);
       input.focus();
 
       // Verify that the event is not prevented during the bubbling.
@@ -632,7 +633,7 @@ describe('<DataGrid /> - Keyboard', () => {
       </div>,
     );
     const firstCell = getCell(0, 0);
-    userEvent.mousePress(firstCell);
+    fireUserEvent.mousePress(firstCell);
     fireEvent.keyDown(firstCell, { key: 'ArrowRight' });
     expect(handleKeyDown.returnValues).to.deep.equal([true]);
   });
@@ -675,7 +676,7 @@ describe('<DataGrid /> - Keyboard', () => {
   it('should select a row when pressing Space key + shiftKey', () => {
     render(<NavigationTestCaseNoScrollX disableRowSelectionOnClick />);
     const cell = getCell(0, 0);
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
     expect(getActiveCell()).to.equal('0-0');
     fireEvent.keyDown(cell, { key: ' ', shiftKey: true });
     const row = getRow(0);
@@ -715,7 +716,7 @@ describe('<DataGrid /> - Keyboard', () => {
     const virtualScroller = document.querySelector<HTMLElement>('.MuiDataGrid-virtualScroller')!;
 
     const firstCell = getCell(0, 0);
-    userEvent.mousePress(firstCell);
+    fireUserEvent.mousePress(firstCell);
     expect(virtualScroller.scrollLeft).to.equal(0);
 
     fireEvent.keyDown(firstCell, { key: 'ArrowDown' });
@@ -747,7 +748,7 @@ describe('<DataGrid /> - Keyboard', () => {
     );
 
     const cell = getCell(0, 1);
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
 
     fireEvent.keyDown(cell, { key: 'ArrowLeft' });
     expect(getActiveCell()).to.equal(`0-0`);
@@ -781,7 +782,7 @@ describe('<DataGrid /> - Keyboard', () => {
     );
 
     const cell = getCell(0, 1);
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
 
     fireEvent.keyDown(cell, { key: 'ArrowLeft' });
     expect(getActiveCell()).to.equal(`0-0`);
@@ -815,7 +816,7 @@ describe('<DataGrid /> - Keyboard', () => {
     );
 
     const cell = getCell(0, 1);
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
 
     fireEvent.keyDown(cell, { key: 'ArrowLeft' });
     expect(getActiveCell()).to.equal(`0-0`);
diff --git a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx
index 4f003a354866..b9840172ee73 100644
--- a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx
@@ -277,13 +277,13 @@ describe('<DataGrid /> - Layout & warnings', () => {
           },
         ];
 
-        const { getAllByRole } = render(
+        render(
           <div style={{ width: 300, height: 300 }}>
             <DataGrid columns={columns} rows={rows} />
           </div>,
         );
 
-        getAllByRole('columnheader').forEach((col: HTMLElement) => {
+        screen.getAllByRole('columnheader').forEach((col: HTMLElement) => {
           expect(col).toHaveInlineStyle({ width: '100px' });
         });
       });
@@ -313,13 +313,13 @@ describe('<DataGrid /> - Layout & warnings', () => {
           },
         ];
 
-        const { getAllByRole } = render(
+        render(
           <div style={{ width: 300, height: 300 }}>
             <DataGrid columns={columns} rows={rows} />
           </div>,
         );
 
-        getAllByRole('columnheader').forEach((col: HTMLElement, index: number) => {
+        screen.getAllByRole('columnheader').forEach((col: HTMLElement, index: number) => {
           expect(col).toHaveInlineStyle({ width: `${colWidthValues[index]}px` });
         });
       });
@@ -887,7 +887,7 @@ describe('<DataGrid /> - Layout & warnings', () => {
 
   describe('localeText', () => {
     it('should replace the density selector button label text to "Size"', () => {
-      const { getByText } = render(
+      render(
         <div style={{ width: 300, height: 300 }}>
           <DataGrid
             {...baselineProps}
@@ -899,7 +899,7 @@ describe('<DataGrid /> - Layout & warnings', () => {
         </div>,
       );
 
-      expect(getByText('Size')).not.to.equal(null);
+      expect(screen.getByText('Size')).not.to.equal(null);
     });
 
     it('should support translations in the theme', () => {
@@ -927,23 +927,21 @@ describe('<DataGrid /> - Layout & warnings', () => {
           </div>
         );
       }
-      const { setProps, getByText } = render(
-        <TestCase localeText={{ toolbarDensity: 'Density' }} />,
-      );
-      expect(getByText('Density')).not.to.equal(null);
+      const { setProps } = render(<TestCase localeText={{ toolbarDensity: 'Density' }} />);
+      expect(screen.getByText('Density')).not.to.equal(null);
       setProps({ localeText: { toolbarDensity: 'Densidade' } });
-      expect(getByText('Densidade')).not.to.equal(null);
+      expect(screen.getByText('Densidade')).not.to.equal(null);
     });
   });
 
   describe('non-strict mode', () => {
-    const renderer = createRenderer({ strict: false });
+    const { render: innerRender } = createRenderer({ strict: false });
 
     it('should render in JSDOM', function test() {
       if (!/jsdom/.test(window.navigator.userAgent)) {
         this.skip(); // Only run in JSDOM
       }
-      renderer.render(
+      innerRender(
         <div style={{ width: 300, height: 300 }}>
           <DataGrid {...baselineProps} />
         </div>,
diff --git a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
index 15693031a3be..94421d70f768 100644
--- a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { spy, stub, SinonStub, SinonSpy } from 'sinon';
 import { expect } from 'chai';
-import { createRenderer, fireEvent, screen, userEvent, waitFor } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, waitFor } from '@mui/internal-test-utils';
 import {
   DataGrid,
   DataGridProps,
@@ -13,6 +13,7 @@ import {
 } from '@mui/x-data-grid';
 import { useBasicDemoData } from '@mui/x-data-grid-generator';
 import { getCell, getColumnValues, getRows } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -631,7 +632,7 @@ describe('<DataGrid /> - Pagination', () => {
         pageSizeOptions={[1]}
       />,
     );
-    userEvent.mousePress(getCell(0, 0));
+    fireUserEvent.mousePress(getCell(0, 0));
     fireEvent.click(screen.getByRole('button', { name: /next page/i }));
     expect(getCell(1, 0)).to.have.attr('tabindex', '0');
   });
diff --git a/packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx b/packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx
index dec971998713..44d608d5602f 100644
--- a/packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx
@@ -480,23 +480,27 @@ describe('<DataGrid /> - Quick filter', () => {
       }
 
       it('should not ignore diacritics by default', () => {
-        let renderer = render(<DiacriticsTestCase quickFilterValues={['apa']} />);
+        const { unmount } = render(<DiacriticsTestCase quickFilterValues={['apa']} />);
         expect(getColumnValues(0)).to.deep.equal([]);
-        renderer.unmount();
+        unmount();
 
-        renderer = render(<DiacriticsTestCase quickFilterValues={['apă']} />);
+        const { unmount: unmount2 } = render(<DiacriticsTestCase quickFilterValues={['apă']} />);
         expect(getColumnValues(0)).to.deep.equal(['Apă']);
-        renderer.unmount();
+        unmount2();
       });
 
       it('should ignore diacritics when `ignoreDiacritics` is enabled', () => {
-        let renderer = render(<DiacriticsTestCase quickFilterValues={['apa']} ignoreDiacritics />);
+        const { unmount } = render(
+          <DiacriticsTestCase quickFilterValues={['apa']} ignoreDiacritics />,
+        );
         expect(getColumnValues(0)).to.deep.equal(['Apă']);
-        renderer.unmount();
+        unmount();
 
-        renderer = render(<DiacriticsTestCase quickFilterValues={['apă']} ignoreDiacritics />);
+        const { unmount: unmount2 } = render(
+          <DiacriticsTestCase quickFilterValues={['apă']} ignoreDiacritics />,
+        );
         expect(getColumnValues(0)).to.deep.equal(['Apă']);
-        renderer.unmount();
+        unmount2();
       });
     });
   });
diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
index f01954e76a1f..23f1c8f406d2 100644
--- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
@@ -1,14 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import {
-  createRenderer,
-  fireEvent,
-  screen,
-  act,
-  userEvent,
-  waitFor,
-} from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils';
 import {
   DataGrid,
   DataGridProps,
@@ -28,6 +21,7 @@ import {
   getActiveCell,
   grid,
 } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -67,9 +61,9 @@ describe('<DataGrid /> - Row selection', () => {
   describe('prop: checkboxSelection = false (single selection)', () => {
     it('should select one row at a time on click WITHOUT ctrl or meta pressed', () => {
       render(<TestDataGridSelection />);
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
       expect(getSelectedRowIds()).to.deep.equal([0]);
-      userEvent.mousePress(getCell(1, 0));
+      fireUserEvent.mousePress(getCell(1, 0));
       expect(getSelectedRowIds()).to.deep.equal([1]);
     });
 
@@ -113,12 +107,12 @@ describe('<DataGrid /> - Row selection', () => {
       render(<TestDataGridSelection disableRowSelectionOnClick />);
 
       const cell0 = getCell(0, 0);
-      userEvent.mousePress(cell0);
+      fireUserEvent.mousePress(cell0);
       fireEvent.keyDown(cell0, { key: ' ', shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([0]);
 
       const cell1 = getCell(1, 0);
-      userEvent.mousePress(cell1);
+      fireUserEvent.mousePress(cell1);
       fireEvent.keyDown(cell1, { key: ' ', shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([1]);
     });
@@ -144,7 +138,7 @@ describe('<DataGrid /> - Row selection', () => {
         expect(onCellEditStart.callCount).to.equal(0);
 
         const cell01 = getCell(0, 1);
-        userEvent.mousePress(cell01);
+        fireUserEvent.mousePress(cell01);
 
         fireEvent.keyDown(cell01, { key: ' ', shiftKey: true });
 
@@ -152,7 +146,7 @@ describe('<DataGrid /> - Row selection', () => {
         expect(getSelectedRowIds()).to.deep.equal([0]);
 
         const cell11 = getCell(1, 1);
-        userEvent.mousePress(cell11);
+        fireUserEvent.mousePress(cell11);
         fireEvent.keyDown(cell11, { key: ' ', shiftKey: true });
 
         expect(onCellEditStart.callCount).to.equal(0);
@@ -163,7 +157,7 @@ describe('<DataGrid /> - Row selection', () => {
     it(`should deselect the selected row on Shift + Space`, () => {
       render(<TestDataGridSelection disableRowSelectionOnClick />);
       const cell00 = getCell(0, 0);
-      userEvent.mousePress(cell00);
+      fireUserEvent.mousePress(cell00);
 
       fireEvent.keyDown(cell00, { key: ' ', shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([0]);
@@ -175,7 +169,7 @@ describe('<DataGrid /> - Row selection', () => {
     it('should not select a range with shift pressed', () => {
       render(<TestDataGridSelection disableRowSelectionOnClick />);
       const cell00 = getCell(0, 0);
-      userEvent.mousePress(cell00);
+      fireUserEvent.mousePress(cell00);
 
       fireEvent.keyDown(cell00, { key: ' ', shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([0]);
@@ -234,7 +228,7 @@ describe('<DataGrid /> - Row selection', () => {
       // simulate click
       const checkboxInput = getCell(0, 0).querySelector('input');
 
-      userEvent.mousePress(checkboxInput!);
+      fireUserEvent.mousePress(checkboxInput!);
 
       expect(getActiveCell()).to.equal('0-0');
     });
@@ -380,8 +374,8 @@ describe('<DataGrid /> - Row selection', () => {
       fireEvent.click(selectAllCheckbox);
       await waitFor(() => {
         expect(getSelectedRowIds()).to.deep.equal([0, 1, 2, 3]);
-        expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected');
       });
+      expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected');
 
       fireEvent.change(screen.getByRole('spinbutton', { name: 'Value' }), {
         target: { value: 1 },
@@ -389,27 +383,27 @@ describe('<DataGrid /> - Row selection', () => {
       await waitFor(() => {
         // Previous selection remains, but only one row is visible
         expect(getSelectedRowIds()).to.deep.equal([1]);
-        expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected');
       });
+      expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected');
 
       fireEvent.click(selectAllCheckbox); // Unselect all
       await waitFor(() => {
         expect(getSelectedRowIds()).to.deep.equal([]);
-        expect(grid('selectedRowCount')).to.equal(null);
       });
+      expect(grid('selectedRowCount')).to.equal(null);
 
       fireEvent.click(selectAllCheckbox); // Select all filtered rows
       await waitFor(() => {
         expect(getSelectedRowIds()).to.deep.equal([1]);
-        expect(grid('selectedRowCount')?.textContent).to.equal('1 row selected');
       });
+      expect(grid('selectedRowCount')?.textContent).to.equal('1 row selected');
     });
   });
 
   describe('prop: checkboxSelection = true (multi selection), with keyboard events', () => {
     it('should select row below when pressing "ArrowDown" + shiftKey', () => {
       render(<TestDataGridSelection checkboxSelection />);
-      userEvent.mousePress(getCell(2, 1));
+      fireUserEvent.mousePress(getCell(2, 1));
       expect(getSelectedRowIds()).to.deep.equal([2]);
       fireEvent.keyDown(getCell(2, 1), { key: 'ArrowDown', shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([2, 3]);
@@ -419,10 +413,10 @@ describe('<DataGrid /> - Row selection', () => {
 
     it('should unselect previous row when pressing "ArrowDown" + shiftKey', () => {
       render(<TestDataGridSelection checkboxSelection />);
-      userEvent.mousePress(getCell(3, 1));
+      fireUserEvent.mousePress(getCell(3, 1));
       expect(getSelectedRowIds()).to.deep.equal([3]);
 
-      userEvent.mousePress(getCell(1, 1), { shiftKey: true });
+      fireUserEvent.mousePress(getCell(1, 1), { shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]);
       fireEvent.keyDown(getCell(1, 1), { key: 'ArrowDown', shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([2, 3]);
@@ -430,9 +424,9 @@ describe('<DataGrid /> - Row selection', () => {
 
     it('should not unselect row above when pressing "ArrowDown" + shiftKey', () => {
       render(<TestDataGridSelection checkboxSelection />);
-      userEvent.mousePress(getCell(1, 1));
+      fireUserEvent.mousePress(getCell(1, 1));
       expect(getSelectedRowIds()).to.deep.equal([1]);
-      userEvent.mousePress(getCell(2, 1), { shiftKey: true });
+      fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([1, 2]);
       fireEvent.keyDown(getCell(2, 1), { key: 'ArrowDown', shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]);
@@ -442,9 +436,9 @@ describe('<DataGrid /> - Row selection', () => {
 
     it('should unselect previous row when pressing "ArrowUp" + shiftKey', () => {
       render(<TestDataGridSelection checkboxSelection />);
-      userEvent.mousePress(getCell(2, 1));
+      fireUserEvent.mousePress(getCell(2, 1));
       expect(getSelectedRowIds()).to.deep.equal([2]);
-      userEvent.mousePress(getCell(3, 1), { shiftKey: true });
+      fireUserEvent.mousePress(getCell(3, 1), { shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([2, 3]);
       fireEvent.keyDown(getCell(3, 1), { key: 'ArrowUp', shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([2]);
@@ -456,7 +450,7 @@ describe('<DataGrid /> - Row selection', () => {
       expect(getSelectedRowIds()).to.deep.equal([]);
 
       const cell21 = getCell(2, 1);
-      userEvent.mousePress(cell21);
+      fireUserEvent.mousePress(cell21);
       fireEvent.keyDown(cell21, {
         key: ' ',
         shiftKey: true,
@@ -465,7 +459,7 @@ describe('<DataGrid /> - Row selection', () => {
       expect(getSelectedRowIds()).to.deep.equal([2]);
 
       const cell11 = getCell(1, 1);
-      userEvent.mousePress(cell11);
+      fireUserEvent.mousePress(cell11);
       fireEvent.keyDown(cell11, {
         key: ' ',
         shiftKey: true,
@@ -480,7 +474,7 @@ describe('<DataGrid /> - Row selection', () => {
       const data = getBasicGridData(20, 1);
       render(<TestDataGridSelection {...data} rowHeight={50} checkboxSelection hideFooter />);
       const checkboxes = screen.queryAllByRole('checkbox', { name: /select row/i });
-      userEvent.mousePress(checkboxes[0]);
+      fireUserEvent.mousePress(checkboxes[0]);
       expect(checkboxes[0]).toHaveFocus();
       fireEvent.keyDown(checkboxes[0], { key: 'ArrowDown' });
       fireEvent.keyDown(checkboxes[1], { key: 'ArrowDown' });
@@ -500,7 +494,7 @@ describe('<DataGrid /> - Row selection', () => {
       expect(checkboxCell).to.have.attribute('tabindex', '-1');
       expect(secondCell).to.have.attribute('tabindex', '-1');
 
-      userEvent.mousePress(secondCell);
+      fireUserEvent.mousePress(secondCell);
       expect(secondCell).to.have.attribute('tabindex', '0');
 
       fireEvent.keyDown(secondCell, { key: 'ArrowLeft' });
@@ -541,7 +535,7 @@ describe('<DataGrid /> - Row selection', () => {
         }
         render(<TestDataGridSelection checkboxSelection />);
         const cell = getCell(1, 1);
-        userEvent.mousePress(cell);
+        fireUserEvent.mousePress(cell);
         fireEvent.keyDown(cell, { key: 'ArrowLeft' });
         fireEvent.keyDown(getCell(1, 0).querySelector('input')!, { key: 'ArrowUp' });
         clock.runToLast(); // Wait for transition
@@ -826,7 +820,7 @@ describe('<DataGrid /> - Row selection', () => {
     it('should not select rows with Shift + Space', () => {
       render(<TestDataGridSelection rowSelection={false} disableRowSelectionOnClick />);
       const cell0 = getCell(0, 0);
-      userEvent.mousePress(cell0);
+      fireUserEvent.mousePress(cell0);
       fireEvent.keyDown(cell0, { key: ' ', shiftKey: true });
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
@@ -842,7 +836,7 @@ describe('<DataGrid /> - Row selection', () => {
       render(<TestDataGridSelection />);
 
       // Select the first row
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
       expect(getRow(0).getAttribute('aria-selected')).to.equal('true');
       expect(getRow(1).getAttribute('aria-selected')).to.equal('false');
     });
@@ -852,7 +846,7 @@ describe('<DataGrid /> - Row selection', () => {
       expect(getRow(0).getAttribute('aria-selected')).to.equal(null);
 
       // Try to select the first row
-      userEvent.mousePress(getCell(0, 0));
+      fireUserEvent.mousePress(getCell(0, 0));
       // nothing should change
       expect(getRow(0).getAttribute('aria-selected')).to.equal(null);
     });
diff --git a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx
index 4cc711d37821..2efc26c7c9c3 100644
--- a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx
@@ -4,7 +4,6 @@ import {
   fireEvent,
   screen,
   act,
-  userEvent,
   ErrorBoundary,
   waitFor,
 } from '@mui/internal-test-utils';
@@ -33,6 +32,7 @@ import {
   getCell,
   microtasks,
 } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import Dialog from '@mui/material/Dialog';
 
 import { COMPACT_DENSITY_FACTOR } from '../hooks/features/density/densitySelector';
@@ -374,7 +374,7 @@ describe('<DataGrid /> - Rows', () => {
         />,
       );
       const moreButton = screen.getByRole('menuitem', { name: 'more' });
-      userEvent.mousePress(moreButton);
+      fireUserEvent.mousePress(moreButton);
 
       await waitFor(() => {
         const printButton = screen.queryByRole('menuitem', { name: 'print' });
@@ -1146,7 +1146,7 @@ describe('<DataGrid /> - Rows', () => {
     );
 
     const cell = getCell(0, 0);
-    userEvent.mousePress(cell);
+    fireUserEvent.mousePress(cell);
 
     const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
     virtualScroller.scrollTop = 1000;
diff --git a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx
index 4fec48edbd18..59bd49145729 100644
--- a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx
@@ -714,9 +714,9 @@ describe('<DataGrid /> - Sorting', () => {
     setProps({ columns: [{ field: 'id' }] });
     await waitFor(() => {
       expect(getColumnValues(0)).to.deep.equal(['0', '1', '2']);
-      expect(onSortModelChange.callCount).to.equal(1);
-      expect(onSortModelChange.lastCall.firstArg).to.deep.equal([]);
     });
+    expect(onSortModelChange.callCount).to.equal(1);
+    expect(onSortModelChange.lastCall.firstArg).to.deep.equal([]);
   });
 
   // See https://github.com/mui/mui-x/issues/9204
@@ -749,8 +749,8 @@ describe('<DataGrid /> - Sorting', () => {
     setProps({ columns: [{ field: 'id' }], sortModel: [{ field: 'id', sort: 'desc' }] });
     await waitFor(() => {
       expect(getColumnValues(0)).to.deep.equal(['2', '1', '0']);
-      expect(onSortModelChange.callCount).to.equal(0);
     });
+    expect(onSortModelChange.callCount).to.equal(0);
   });
 
   describe('getSortComparator', () => {
diff --git a/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx b/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx
index 12e1c495bd55..92cea1015317 100644
--- a/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx
@@ -37,7 +37,7 @@ describe('<DataGrid /> - Toolbar', () => {
 
   describe('column selector', () => {
     it('should hide "id" column when hiding it from the column selector', () => {
-      const { getByText } = render(
+      render(
         <div style={{ width: 300, height: 300 }}>
           <DataGrid
             {...baselineProps}
@@ -50,7 +50,7 @@ describe('<DataGrid /> - Toolbar', () => {
 
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']);
 
-      fireEvent.click(getByText('Columns'));
+      fireEvent.click(screen.getByText('Columns'));
       fireEvent.click(screen.getByRole('tooltip').querySelector('[name="id"]')!);
 
       expect(getColumnHeadersTextContent()).to.deep.equal(['brand']);
@@ -66,7 +66,7 @@ describe('<DataGrid /> - Toolbar', () => {
         },
       ];
 
-      const { getByText, getByRole } = render(
+      render(
         <div style={{ width: 300, height: 300 }}>
           <DataGrid
             {...baselineProps}
@@ -83,8 +83,8 @@ describe('<DataGrid /> - Toolbar', () => {
         </div>,
       );
 
-      fireEvent.click(getByText('Columns'));
-      const showHideAllCheckbox = getByRole('checkbox', { name: 'Show/Hide All' });
+      fireEvent.click(screen.getByText('Columns'));
+      const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' });
       fireEvent.click(showHideAllCheckbox);
       expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']);
       fireEvent.click(showHideAllCheckbox);
@@ -135,7 +135,7 @@ describe('<DataGrid /> - Toolbar', () => {
         );
       };
 
-      const { getByText } = render(
+      render(
         <div style={{ width: 300, height: 300 }}>
           <DataGrid
             {...baselineProps}
@@ -152,7 +152,7 @@ describe('<DataGrid /> - Toolbar', () => {
         </div>,
       );
 
-      fireEvent.click(getByText('Columns'));
+      fireEvent.click(screen.getByText('Columns'));
 
       const searchInput = document.querySelector('input[type="text"]')!;
       fireEvent.change(searchInput, { target: { value: 'test' } });
diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx
index 1836534d0282..2dc85c2aa91d 100644
--- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx
@@ -1,13 +1,7 @@
 import * as React from 'react';
 import { spy } from 'sinon';
 import { expect } from 'chai';
-import {
-  screen,
-  fireEvent,
-  getByRole,
-  fireTouchChangedEvent,
-  userEvent,
-} from '@mui/internal-test-utils';
+import { screen, fireEvent, within, fireTouchChangedEvent } from '@mui/internal-test-utils';
 import {
   adapterToUse,
   buildPickerDragInteractions,
@@ -21,10 +15,11 @@ import {
 } from '@mui/x-date-pickers-pro/DateRangeCalendar';
 import { DateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { RangePosition } from '../models';
 
 const getPickerDay = (name: string, picker = 'January 2018') =>
-  getByRole(screen.getByRole('grid', { name: picker }), 'gridcell', { name });
+  within(screen.getByRole('grid', { name: picker })).getByRole('gridcell', { name });
 
 const dynamicShouldDisableDate = (date, position: RangePosition) => {
   if (position === 'end') {
@@ -540,7 +535,7 @@ describe('<DateRangeCalendar />', () => {
       );
 
       const renderCountBeforeChange = RenderCount.callCount;
-      userEvent.mousePress(getPickerDay('2'));
+      fireUserEvent.mousePress(getPickerDay('2'));
       expect(RenderCount.callCount - renderCountBeforeChange).to.equal(2); // 2 render * 1 day
     });
 
@@ -555,10 +550,10 @@ describe('<DateRangeCalendar />', () => {
         />,
       );
 
-      userEvent.mousePress(getPickerDay('2'));
+      fireUserEvent.mousePress(getPickerDay('2'));
 
       const renderCountBeforeChange = RenderCount.callCount;
-      userEvent.mousePress(getPickerDay('4'));
+      fireUserEvent.mousePress(getPickerDay('4'));
       expect(RenderCount.callCount - renderCountBeforeChange).to.equal(6); // 2 render * 3 day
     });
   });
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx
index c6b3c1487e6d..2d6094f4db18 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx
@@ -23,14 +23,14 @@ describe('<DateRangePicker />', () => {
 
   it('should not open mobile picker dialog when clicked on input', () => {
     // Test with v7 input
-    const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+    const { unmount } = renderWithProps({ enableAccessibleFieldDOMStructure: true });
     fireEvent.click(getFieldInputRoot());
     clock.runToLast();
 
     expect(screen.queryByRole('tooltip')).not.to.equal(null);
     expect(screen.queryByRole('dialog')).to.equal(null);
 
-    v7Response.unmount();
+    unmount();
 
     // Test with v6 input
     renderWithProps({ enableAccessibleFieldDOMStructure: false });
diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx
index 6137c60421f0..ee452e3e68ad 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { screen, fireEvent, userEvent, act, getByRole } from '@mui/internal-test-utils';
+import { screen, fireEvent, act, within } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
@@ -15,11 +15,12 @@ import {
   getFieldSectionsContainer,
   getTextbox,
 } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 const getPickerDay = (name: string, picker = 'January 2018') =>
-  getByRole(screen.getByRole('grid', { name: picker }), 'gridcell', { name });
+  within(screen.getByRole('grid', { name: picker })).getByRole('gridcell', { name });
 
 describe('<DesktopDateRangePicker />', () => {
   const { render, clock } = createPickerRenderer({
@@ -93,7 +94,7 @@ describe('<DesktopDateRangePicker />', () => {
   describe('Field slot: SingleInputDateRangeField', () => {
     it('should add focused class to the field when it is focused', () => {
       // test v7 behavior
-      const response = render(
+      const { unmount } = render(
         <DesktopDateRangePicker
           enableAccessibleFieldDOMStructure
           slots={{ field: SingleInputDateRangeField }}
@@ -105,7 +106,7 @@ describe('<DesktopDateRangePicker />', () => {
 
       expect(sectionsContainer.parentElement).to.have.class('Mui-focused');
 
-      response.unmount();
+      unmount();
 
       // test v6 behavior
       render(<DesktopDateRangePicker slots={{ field: SingleInputDateRangeField }} />);
@@ -118,7 +119,7 @@ describe('<DesktopDateRangePicker />', () => {
 
     it('should render the input with a given `name` when `SingleInputDateRangeField` is used', () => {
       // Test with v7 input
-      const v7Response = render(
+      const { unmount } = render(
         <DesktopDateRangePicker
           name="test"
           enableAccessibleFieldDOMStructure
@@ -127,7 +128,7 @@ describe('<DesktopDateRangePicker />', () => {
       );
       expect(screen.getByRole<HTMLInputElement>('textbox', { hidden: true }).name).to.equal('test');
 
-      v7Response.unmount();
+      unmount();
 
       // Test with v6 input
       render(<DesktopDateRangePicker name="test" slots={{ field: SingleInputDateRangeField }} />);
@@ -244,13 +245,13 @@ describe('<DesktopDateRangePicker />', () => {
       expect(onClose.callCount).to.equal(0);
 
       // Change the start date
-      userEvent.mousePress(getPickerDay('3'));
+      fireUserEvent.mousePress(getPickerDay('3'));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
       expect(onChange.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]);
 
       // Change the end date
-      userEvent.mousePress(getPickerDay('5'));
+      fireUserEvent.mousePress(getPickerDay('5'));
       expect(onChange.callCount).to.equal(2);
       expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
       expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 5));
@@ -287,7 +288,7 @@ describe('<DesktopDateRangePicker />', () => {
       expect(onClose.callCount).to.equal(0);
 
       // Change the end date
-      userEvent.mousePress(getPickerDay('3'));
+      fireUserEvent.mousePress(getPickerDay('3'));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]);
       expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 3));
@@ -318,7 +319,7 @@ describe('<DesktopDateRangePicker />', () => {
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'end' });
 
       // Change the end date
-      userEvent.mousePress(getPickerDay('3'));
+      fireUserEvent.mousePress(getPickerDay('3'));
 
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
@@ -346,7 +347,7 @@ describe('<DesktopDateRangePicker />', () => {
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });
 
       // Change the start date (already tested)
-      userEvent.mousePress(getPickerDay('3'));
+      fireUserEvent.mousePress(getPickerDay('3'));
 
       // Dismiss the picker
       // eslint-disable-next-line material-ui/disallow-active-element-as-key-event-target -- don't care
@@ -380,12 +381,12 @@ describe('<DesktopDateRangePicker />', () => {
       // Dismiss the picker
       const input = document.getElementById('test-id')!;
 
+      fireEvent.mouseDown(input);
       act(() => {
-        fireEvent.mouseDown(input);
         input.focus();
-        fireEvent.mouseUp(input);
-        clock.runToLast();
       });
+      fireEvent.mouseUp(input);
+      clock.runToLast();
 
       expect(onChange.callCount).to.equal(0);
       expect(onAccept.callCount).to.equal(0);
@@ -417,17 +418,17 @@ describe('<DesktopDateRangePicker />', () => {
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });
 
       // Change the start date (already tested)
-      userEvent.mousePress(getPickerDay('3'));
+      fireUserEvent.mousePress(getPickerDay('3'));
       clock.runToLast();
 
       // Dismiss the picker
       const input = document.getElementById('test-id')!;
 
+      fireEvent.mouseDown(input);
       act(() => {
-        fireEvent.mouseDown(input);
         input.focus();
-        fireEvent.mouseUp(input);
       });
+      fireEvent.mouseUp(input);
 
       clock.runToLast();
 
@@ -453,7 +454,7 @@ describe('<DesktopDateRangePicker />', () => {
       );
 
       // Dismiss the picker
-      userEvent.mousePress(document.body);
+      fireUserEvent.mousePress(document.body);
       expect(onChange.callCount).to.equal(0);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
@@ -521,7 +522,7 @@ describe('<DesktopDateRangePicker />', () => {
       expect(screen.getByRole('tooltip')).toBeVisible();
 
       // Change the start date (already tested)
-      userEvent.mousePress(getPickerDay('3'));
+      fireUserEvent.mousePress(getPickerDay('3'));
       clock.runToLast();
 
       act(() => {
@@ -559,7 +560,7 @@ describe('<DesktopDateRangePicker />', () => {
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });
 
       // Clear the date
-      userEvent.mousePress(screen.getByText(/clear/i));
+      fireUserEvent.mousePress(screen.getByText(/clear/i));
       expect(onChange.callCount).to.equal(1); // Start date change
       expect(onChange.lastCall.args[0]).to.deep.equal([null, null]);
       expect(onAccept.callCount).to.equal(1);
@@ -586,7 +587,7 @@ describe('<DesktopDateRangePicker />', () => {
       openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });
 
       // Clear the date
-      userEvent.mousePress(screen.getByText(/clear/i));
+      fireUserEvent.mousePress(screen.getByText(/clear/i));
       expect(onChange.callCount).to.equal(0);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(1);
diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx
index ff1a2bf8b2c1..2639cbebef6b 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import {
   adapterToUse,
   createPickerRenderer,
@@ -13,6 +13,7 @@ import {
 import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
 import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DesktopDateRangePicker /> - Describes', () => {
   const { render, clock } = createPickerRenderer({
@@ -86,7 +87,7 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
       }
 
       if (isOpened) {
-        userEvent.mousePress(
+        fireUserEvent.mousePress(
           screen.getAllByRole('gridcell', {
             name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(),
           })[0],
@@ -148,7 +149,7 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
       }
 
       if (isOpened) {
-        userEvent.mousePress(
+        fireUserEvent.mousePress(
           screen.getAllByRole('gridcell', {
             name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(),
           })[0],
diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx
index f39f90bdb0d1..e866a5140081 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -8,6 +8,7 @@ import {
   getFieldSectionsContainer,
   expectFieldValueV7,
 } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { DesktopDateTimeRangePicker } from '../DesktopDateTimeRangePicker';
 
 describe('<DesktopDateTimeRangePicker />', () => {
@@ -23,16 +24,16 @@ describe('<DesktopDateTimeRangePicker />', () => {
       openPicker({ type: 'date-time-range', variant: 'desktop', initialFocus: 'start' });
 
       // select start date range
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '11' }));
-      userEvent.mousePress(screen.getByRole('option', { name: '4 hours' }));
-      userEvent.mousePress(screen.getByRole('option', { name: '5 minutes' }));
-      userEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '11' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '4 hours' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '5 minutes' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
 
       // select end date range on the same day
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '11' }));
-      userEvent.mousePress(screen.getByRole('option', { name: '5 hours' }));
-      userEvent.mousePress(screen.getByRole('option', { name: '10 minutes' }));
-      userEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '11' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '5 hours' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '10 minutes' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
 
       const startSectionsContainer = getFieldSectionsContainer(0);
       const endSectionsContainer = getFieldSectionsContainer(1);
diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx
index 25518f4a44f3..bd7c125ec4b4 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { describeConformance, screen, userEvent } from '@mui/internal-test-utils';
+import { describeConformance, screen } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -9,6 +9,7 @@ import {
   describeRangeValidation,
   getFieldSectionsContainer,
 } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { DesktopDateTimeRangePicker } from '../DesktopDateTimeRangePicker';
 
 describe('<DesktopDateTimeRangePicker /> - Describes', () => {
@@ -101,7 +102,7 @@ describe('<DesktopDateTimeRangePicker /> - Describes', () => {
         ];
       }
       if (isOpened) {
-        userEvent.mousePress(
+        fireUserEvent.mousePress(
           screen.getByRole('gridcell', {
             name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(),
           }),
@@ -112,8 +113,10 @@ describe('<DesktopDateTimeRangePicker /> - Describes', () => {
           hasMeridiem ? 'hours12h' : 'hours24h',
         );
         const hoursNumber = adapterToUse.getHours(newValue[setEndDate ? 1 : 0]);
-        userEvent.mousePress(screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }));
-        userEvent.mousePress(
+        fireUserEvent.mousePress(
+          screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }),
+        );
+        fireUserEvent.mousePress(
           screen.getByRole('option', {
             name: `${adapterToUse.getMinutes(newValue[setEndDate ? 1 : 0])} minutes`,
           }),
@@ -121,7 +124,7 @@ describe('<DesktopDateTimeRangePicker /> - Describes', () => {
         if (hasMeridiem) {
           // meridiem is an extra view on `DesktopDateTimeRangePicker`
           // we need to click it to finish selection
-          userEvent.mousePress(
+          fireUserEvent.mousePress(
             screen.getByRole('option', { name: hoursNumber >= 12 ? 'PM' : 'AM' }),
           );
         }
diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
index e27cb9084aa3..177cf4752e9a 100644
--- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { spy } from 'sinon';
 import { expect } from 'chai';
-import { screen, userEvent, fireEvent } from '@mui/internal-test-utils';
+import { screen, fireEvent } from '@mui/internal-test-utils';
 import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
 import {
   createPickerRenderer,
@@ -9,6 +9,7 @@ import {
   openPicker,
   getFieldSectionsContainer,
 } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { DateRange } from '@mui/x-date-pickers-pro/models';
 import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
 
@@ -18,7 +19,7 @@ describe('<MobileDateRangePicker />', () => {
   describe('Field slot: SingleInputDateRangeField', () => {
     it('should render the input with a given `name` when `SingleInputDateRangeField` is used', () => {
       // Test with v7 input
-      const v7Response = render(
+      const { unmount } = render(
         <MobileDateRangePicker
           name="test"
           enableAccessibleFieldDOMStructure
@@ -27,7 +28,7 @@ describe('<MobileDateRangePicker />', () => {
       );
       expect(screen.getByRole<HTMLInputElement>('textbox', { hidden: true }).name).to.equal('test');
 
-      v7Response.unmount();
+      unmount();
 
       // Test with v6 input
       render(<MobileDateRangePicker name="test" slots={{ field: SingleInputDateRangeField }} />);
@@ -84,13 +85,13 @@ describe('<MobileDateRangePicker />', () => {
       expect(onClose.callCount).to.equal(0);
 
       // Change the start date
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
       expect(onChange.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]);
 
       // Change the end date
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '5' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '5' }));
       expect(onChange.callCount).to.equal(2);
       expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
       expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 5));
@@ -125,7 +126,7 @@ describe('<MobileDateRangePicker />', () => {
       expect(onClose.callCount).to.equal(0);
 
       // Change the end date
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]);
       expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 3));
@@ -154,7 +155,7 @@ describe('<MobileDateRangePicker />', () => {
       openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'end' });
 
       // Change the end date
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
 
       expect(onAccept.callCount).to.equal(1);
       expect(onAccept.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]);
@@ -185,10 +186,10 @@ describe('<MobileDateRangePicker />', () => {
       openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
 
       // Change the start date (already tested)
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
 
       // Cancel the modifications
-      userEvent.mousePress(screen.getByText(/cancel/i));
+      fireUserEvent.mousePress(screen.getByText(/cancel/i));
       expect(onChange.callCount).to.equal(2); // Start date change + reset
       expect(onChange.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]);
       expect(onChange.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]);
@@ -218,10 +219,10 @@ describe('<MobileDateRangePicker />', () => {
       openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
 
       // Change the start date (already tested)
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
 
       // Accept the modifications
-      userEvent.mousePress(screen.getByText(/ok/i));
+      fireUserEvent.mousePress(screen.getByText(/ok/i));
       expect(onChange.callCount).to.equal(1); // Start date change
       expect(onAccept.callCount).to.equal(1);
       expect(onAccept.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
@@ -252,7 +253,7 @@ describe('<MobileDateRangePicker />', () => {
       openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
 
       // Clear the date
-      userEvent.mousePress(screen.getByText(/clear/i));
+      fireUserEvent.mousePress(screen.getByText(/clear/i));
       expect(onChange.callCount).to.equal(1); // Start date change
       expect(onChange.lastCall.args[0]).to.deep.equal([null, null]);
       expect(onAccept.callCount).to.equal(1);
@@ -279,7 +280,7 @@ describe('<MobileDateRangePicker />', () => {
       openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
 
       // Clear the date
-      userEvent.mousePress(screen.getByText(/clear/i));
+      fireUserEvent.mousePress(screen.getByText(/clear/i));
       expect(onChange.callCount).to.equal(0);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(1);
diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx
index eea31d3a3659..7503ccadc73e 100644
--- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { screen, userEvent, fireDiscreteEvent } from '@mui/internal-test-utils';
+import { screen, fireDiscreteEvent } from '@mui/internal-test-utils';
 import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
 import {
   adapterToUse,
@@ -12,6 +12,7 @@ import {
   getFieldSectionsContainer,
 } from 'test/utils/pickers';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<MobileDateRangePicker /> - Describes', () => {
   const { render, clock } = createPickerRenderer({
@@ -86,7 +87,7 @@ describe('<MobileDateRangePicker /> - Describes', () => {
         openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
       }
 
-      userEvent.mousePress(
+      fireUserEvent.mousePress(
         screen.getAllByRole('gridcell', {
           name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(),
         })[0],
diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx
index 4aadcac52f6d..1422ba7bb233 100644
--- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { describeConformance, fireEvent, screen, userEvent } from '@mui/internal-test-utils';
+import { describeConformance, fireEvent, screen } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -10,6 +10,7 @@ import {
   getFieldSectionsContainer,
   openPicker,
 } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker';
 
 describe('<MobileDateTimeRangePicker /> - Describes', () => {
@@ -108,12 +109,12 @@ describe('<MobileDateTimeRangePicker /> - Describes', () => {
 
       // if we want to set the end date, we firstly need to switch to end date "range position"
       if (setEndDate) {
-        userEvent.mousePress(
+        fireUserEvent.mousePress(
           screen.getByRole('button', { name: adapterToUse.format(value[1], 'shortDate') }),
         );
       }
 
-      userEvent.mousePress(
+      fireUserEvent.mousePress(
         screen.getByRole('gridcell', {
           name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(),
         }),
@@ -124,8 +125,10 @@ describe('<MobileDateTimeRangePicker /> - Describes', () => {
         hasMeridiem ? 'hours12h' : 'hours24h',
       );
       const hoursNumber = adapterToUse.getHours(newValue[setEndDate ? 1 : 0]);
-      userEvent.mousePress(screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }));
-      userEvent.mousePress(
+      fireUserEvent.mousePress(
+        screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }),
+      );
+      fireUserEvent.mousePress(
         screen.getByRole('option', {
           name: `${adapterToUse.getMinutes(newValue[setEndDate ? 1 : 0])} minutes`,
         }),
@@ -133,7 +136,9 @@ describe('<MobileDateTimeRangePicker /> - Describes', () => {
       if (hasMeridiem) {
         // meridiem is an extra view on `MobileDateTimeRangePicker`
         // we need to click it to finish selection
-        userEvent.mousePress(screen.getByRole('option', { name: hoursNumber >= 12 ? 'PM' : 'AM' }));
+        fireUserEvent.mousePress(
+          screen.getByRole('option', { name: hoursNumber >= 12 ? 'PM' : 'AM' }),
+        );
       }
       // Close the picker
       if (!isOpened) {
@@ -142,7 +147,7 @@ describe('<MobileDateTimeRangePicker /> - Describes', () => {
         clock.runToLast();
       } else {
         // return to the start date view in case we'd like to repeat the selection process
-        userEvent.mousePress(
+        fireUserEvent.mousePress(
           screen.getByRole('button', { name: adapterToUse.format(newValue[0], 'shortDate') }),
         );
       }
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx
index 33b138e7262d..b392a9d80984 100644
--- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx
+++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx
@@ -13,31 +13,31 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
   describeAdapters(`key: Delete`, SingleInputDateRangeField, ({ adapter, renderWithProps }) => {
     it('should clear all the sections when all sections are selected and all sections are completed', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
         format: `${adapter.formats.month} ${adapter.formats.year}`,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'Delete' });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY');
+      fireEvent.keyDown(view.getSectionsContainer(), { key: 'Delete' });
+      expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         enableAccessibleFieldDOMStructure: false,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
       fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
@@ -48,33 +48,33 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
 
     it('should clear all the sections when all sections are selected and not all sections are completed', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Set a value for the "month" section
-      fireEvent.input(v7Response.getActiveSection(0), { target: { innerHTML: 'j' } });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY – MMMM YYYY');
+      fireEvent.input(view.getActiveSection(0), { target: { innerHTML: 'j' } });
+      expectFieldValueV7(view.getSectionsContainer(), 'January YYYY – MMMM YYYY');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'Delete' });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY');
+      fireEvent.keyDown(view.getSectionsContainer(), { key: 'Delete' });
+      expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         enableAccessibleFieldDOMStructure: false,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Set a value for the "month" section
       fireEvent.change(input, {
@@ -93,33 +93,33 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
       // Test with v7 input
       const onChangeV7 = spy();
 
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         onChange: onChangeV7,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'Delete' });
+      fireEvent.keyDown(view.getSectionsContainer(), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(0);
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         enableAccessibleFieldDOMStructure: false,
         onChange: onChangeV6,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
       fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
@@ -132,52 +132,52 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
       // Test with v7 input
       const onChangeV7 = spy();
 
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
         onChange: onChangeV7,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Start date
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'Delete' });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(1);
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowRight' });
-      fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'Delete' });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(1), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(1);
-      fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowRight' });
-      fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'Delete' });
+      fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(2), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(2);
       expect(onChangeV7.lastCall.firstArg[0]).to.equal(null);
       expect(onChangeV7.lastCall.firstArg[1]).toEqualDateTime(adapter.addYears(adapter.date(), 1));
 
       // End date
-      fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowRight' });
-      fireEvent.keyDown(v7Response.getActiveSection(3), { key: 'Delete' });
+      fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(3), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(3);
-      fireEvent.keyDown(v7Response.getActiveSection(3), { key: 'ArrowRight' });
-      fireEvent.keyDown(v7Response.getActiveSection(4), { key: 'Delete' });
+      fireEvent.keyDown(view.getActiveSection(3), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(4), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(3);
-      fireEvent.keyDown(v7Response.getActiveSection(4), { key: 'ArrowRight' });
-      fireEvent.keyDown(v7Response.getActiveSection(5), { key: 'Delete' });
+      fireEvent.keyDown(view.getActiveSection(4), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(5), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(4);
       expect(onChangeV7.lastCall.firstArg[0]).to.equal(null);
       expect(onChangeV7.lastCall.firstArg[1]).to.equal(null);
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
         onChange: onChangeV6,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Start date
       fireEvent.keyDown(input, { key: 'Delete' });
@@ -209,27 +209,27 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
       // Test with v7 input
       const onChangeV7 = spy();
 
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
         onChange: onChangeV7,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'Delete' });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(1);
 
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'Delete' });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(1);
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
@@ -237,7 +237,7 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       fireEvent.keyDown(input, { key: 'Delete' });
       expect(onChangeV6.callCount).to.equal(1);
@@ -253,31 +253,31 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
     ({ adapter, renderWithProps }) => {
       it('should clear all the sections when all sections are selected and all sections are completed (Backspace)', () => {
         // Test with v7 input
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
           format: `${adapter.formats.month} ${adapter.formats.year}`,
         });
 
-        v7Response.selectSection('month');
+        view.selectSection('month');
 
         // Select all sections
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-        v7Response.pressKey(null, '');
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY');
+        view.pressKey(null, '');
+        expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY');
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           enableAccessibleFieldDOMStructure: false,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
 
         // Select all sections
         fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
@@ -288,33 +288,33 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
 
       it('should clear all the sections when all sections are selected and not all sections are completed (Backspace)', () => {
         // Test with v7 input
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           format: `${adapter.formats.month} ${adapter.formats.year}`,
         });
 
-        v7Response.selectSection('month');
+        view.selectSection('month');
 
         // Set a value for the "month" section
-        fireEvent.input(v7Response.getActiveSection(0), { target: { innerHTML: 'j' } });
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY – MMMM YYYY');
+        fireEvent.input(view.getActiveSection(0), { target: { innerHTML: 'j' } });
+        expectFieldValueV7(view.getSectionsContainer(), 'January YYYY – MMMM YYYY');
 
         // Select all sections
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-        v7Response.pressKey(null, '');
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY');
+        view.pressKey(null, '');
+        expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY');
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           enableAccessibleFieldDOMStructure: false,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
 
         // Set a value for the "month" section
         fireEvent.change(input, {
@@ -333,33 +333,33 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           onChange: onChangeV7,
         });
 
-        v7Response.selectSection('month');
+        view.selectSection('month');
 
         // Select all sections
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-        v7Response.pressKey(null, '');
+        view.pressKey(null, '');
         expect(onChangeV7.callCount).to.equal(0);
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
 
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           enableAccessibleFieldDOMStructure: false,
           onChange: onChangeV6,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
 
         // Select all sections
         fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
@@ -372,22 +372,22 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
           onChange: onChangeV7,
         });
 
-        v7Response.selectSection('month');
+        view.selectSection('month');
 
         // Start date
-        v7Response.pressKey(0, '');
+        view.pressKey(0, '');
         expect(onChangeV7.callCount).to.equal(1);
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowRight' });
-        v7Response.pressKey(1, '');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' });
+        view.pressKey(1, '');
         expect(onChangeV7.callCount).to.equal(1);
-        fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowRight' });
-        v7Response.pressKey(2, '');
+        fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowRight' });
+        view.pressKey(2, '');
         expect(onChangeV7.callCount).to.equal(2);
         expect(onChangeV7.lastCall.firstArg[0]).to.equal(null);
         expect(onChangeV7.lastCall.firstArg[1]).toEqualDateTime(
@@ -395,31 +395,31 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
         );
 
         // End date
-        fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowRight' });
-        v7Response.pressKey(3, '');
+        fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowRight' });
+        view.pressKey(3, '');
         expect(onChangeV7.callCount).to.equal(3);
-        fireEvent.keyDown(v7Response.getActiveSection(3), { key: 'ArrowRight' });
-        v7Response.pressKey(4, '');
+        fireEvent.keyDown(view.getActiveSection(3), { key: 'ArrowRight' });
+        view.pressKey(4, '');
         expect(onChangeV7.callCount).to.equal(3);
-        fireEvent.keyDown(v7Response.getActiveSection(4), { key: 'ArrowRight' });
-        v7Response.pressKey(5, '');
+        fireEvent.keyDown(view.getActiveSection(4), { key: 'ArrowRight' });
+        view.pressKey(5, '');
         expect(onChangeV7.callCount).to.equal(4);
         expect(onChangeV7.lastCall.firstArg[0]).to.equal(null);
         expect(onChangeV7.lastCall.firstArg[1]).to.equal(null);
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
 
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           enableAccessibleFieldDOMStructure: false,
           defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
           onChange: onChangeV6,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
 
         // Start date
         fireEvent.change(input, { target: { value: '/15/2022 – 06/15/2023' } });
@@ -453,27 +453,27 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
           onChange: onChangeV7,
         });
 
-        v7Response.selectSection('month');
+        view.selectSection('month');
 
-        v7Response.pressKey(0, '');
+        view.pressKey(0, '');
         expect(onChangeV7.callCount).to.equal(1);
 
-        v7Response.pressKey(0, '');
+        view.pressKey(0, '');
         expect(onChangeV7.callCount).to.equal(1);
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
 
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           enableAccessibleFieldDOMStructure: false,
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)],
@@ -481,7 +481,7 @@ describe('<SingleInputDateRangeField /> - Editing', () => {
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
 
         fireEvent.change(input, { target: { value: ' 2022 – June 2023' } });
         expect(onChangeV6.callCount).to.equal(1);
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx
index 26f9fe2ceedd..ce9852d7fd25 100644
--- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx
+++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx
@@ -22,14 +22,14 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
   describe('Focus', () => {
     it('should select 1st section (v7) / all sections (v6) on mount focus (`autoFocus = true`)', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      const view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         autoFocus: true,
       });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY – MM/DD/YYYY');
+      expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY – MM/DD/YYYY');
       expect(getCleanedSelectedContent()).to.equal('MM');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       renderWithProps({ autoFocus: true, enableAccessibleFieldDOMStructure: false });
@@ -57,89 +57,89 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
   describe('Click', () => {
     it('should select the clicked selection when the input is already focused', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         value: [null, adapterToUse.date('2022-02-24')],
       });
 
       // Start date
-      v7Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
       expect(getCleanedSelectedContent()).to.equal('MM');
 
       // End date
-      v7Response.selectSection('month', 'last');
+      view.selectSection('month', 'last');
       expect(getCleanedSelectedContent()).to.equal('02');
 
-      v7Response.selectSection('day', 'last');
+      view.selectSection('day', 'last');
       expect(getCleanedSelectedContent()).to.equal('24');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         value: [null, adapterToUse.date('2022-02-24')],
       });
 
       // Start date
-      v6Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      v6Response.selectSection('month');
+      view.selectSection('month');
       expect(getCleanedSelectedContent()).to.equal('MM');
 
       // End date
-      v6Response.selectSection('month', 'last');
+      view.selectSection('month', 'last');
       expect(getCleanedSelectedContent()).to.equal('02');
 
-      v6Response.selectSection('day', 'last');
+      view.selectSection('day', 'last');
       expect(getCleanedSelectedContent()).to.equal('24');
     });
 
     it('should not change the selection when clicking on the only already selected section', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         value: [null, adapterToUse.date('2022-02-24')],
       });
 
       // Start date
-      v7Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      v7Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
       // End date
-      v7Response.selectSection('day', 'last');
+      view.selectSection('day', 'last');
       expect(getCleanedSelectedContent()).to.equal('24');
 
-      v7Response.selectSection('day', 'last');
+      view.selectSection('day', 'last');
       expect(getCleanedSelectedContent()).to.equal('24');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         value: [null, adapterToUse.date('2022-02-24')],
       });
 
       // Start date
-      v6Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      v6Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
       // End date
-      v6Response.selectSection('day', 'last');
+      view.selectSection('day', 'last');
       expect(getCleanedSelectedContent()).to.equal('24');
 
-      v6Response.selectSection('day', 'last');
+      view.selectSection('day', 'last');
       expect(getCleanedSelectedContent()).to.equal('24');
     });
   });
@@ -147,33 +147,33 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
   describe('key: ArrowRight', () => {
     it('should allow to move from left to right with ArrowRight', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
       expect(getCleanedSelectedContent()).to.equal('MM');
 
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('YYYY');
 
-      fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('MM');
 
-      fireEvent.keyDown(v7Response.getActiveSection(3), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(3), { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      fireEvent.keyDown(v7Response.getActiveSection(4), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(4), { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
       expect(getCleanedSelectedContent()).to.equal('MM');
 
       fireEvent.keyDown(input, { key: 'ArrowRight' });
@@ -194,20 +194,20 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
 
     it('should stay on the current section when the last section is selected', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-      v7Response.selectSection('year', 'last');
+      view.selectSection('year', 'last');
       expect(getCleanedSelectedContent()).to.equal('YYYY');
-      fireEvent.keyDown(v7Response.getActiveSection(5), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(5), { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
 
       const input = getTextbox();
-      v6Response.selectSection('year', 'last');
+      view.selectSection('year', 'last');
       expect(getCleanedSelectedContent()).to.equal('YYYY');
       fireEvent.keyDown(input, { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('YYYY');
@@ -217,32 +217,32 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
   describe('key: ArrowLeft', () => {
     it('should allow to move from right to left with ArrowLeft', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-      v7Response.selectSection('year', 'last');
+      view.selectSection('year', 'last');
       expect(getCleanedSelectedContent()).to.equal('YYYY');
-      fireEvent.keyDown(v7Response.getActiveSection(5), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getActiveSection(5), { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      fireEvent.keyDown(v7Response.getActiveSection(4), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getActiveSection(4), { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('MM');
 
-      fireEvent.keyDown(v7Response.getActiveSection(3), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getActiveSection(3), { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('YYYY');
 
-      fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('MM');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
 
       const input = getTextbox();
-      v6Response.selectSection('year', 'last');
+      view.selectSection('year', 'last');
       expect(getCleanedSelectedContent()).to.equal('YYYY');
       fireEvent.keyDown(input, { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('DD');
@@ -262,20 +262,20 @@ describe('<SingleInputDateRangeField /> - Selection', () => {
 
     it('should stay on the current section when the first section is selected', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
       expect(getCleanedSelectedContent()).to.equal('MM');
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('MM');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
       expect(getCleanedSelectedContent()).to.equal('MM');
       fireEvent.keyDown(input, { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('MM');
diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx
index 6f8301a14602..3f51bd19e5d0 100644
--- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx
+++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx
@@ -117,21 +117,18 @@ describe('<AdapterDateFns />', () => {
         });
 
         it('should have correct placeholder', () => {
-          const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+          const view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-          expectFieldValueV7(
-            v7Response.getSectionsContainer(),
-            localizedTexts[localeKey].placeholder,
-          );
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder);
         });
 
         it('should have well formatted value', () => {
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             value: adapter.date(testDate),
           });
 
-          expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value);
         });
       });
     });
diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx
index b88d9390fced..03caf784f4f1 100644
--- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx
+++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx
@@ -78,21 +78,18 @@ describe('<AdapterDateFnsJalali />', () => {
         });
 
         it('should have correct placeholder', () => {
-          const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+          const view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-          expectFieldValueV7(
-            v7Response.getSectionsContainer(),
-            localizedTexts[localeKey].placeholder,
-          );
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder);
         });
 
         it('should have well formatted value', () => {
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             value: adapter.date(testDate),
           });
 
-          expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value);
         });
       });
     });
diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx b/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx
index 4a35a3d2558a..f97f309af0fd 100644
--- a/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx
+++ b/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx
@@ -64,21 +64,18 @@ describe('<AdapterDateFnsJalaliV3 />', () => {
         });
 
         it('should have correct placeholder', () => {
-          const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+          const view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-          expectFieldValueV7(
-            v7Response.getSectionsContainer(),
-            localizedTexts[localeKey].placeholder,
-          );
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder);
         });
 
         it('should have well formatted value', () => {
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             value: adapter.date(testDate),
           });
 
-          expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value);
         });
       });
     });
diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx
index dda1f5c56ab9..9095ecc60cc6 100644
--- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx
+++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx
@@ -148,21 +148,18 @@ describe('<AdapterDayjs />', () => {
         });
 
         it('should have correct placeholder', () => {
-          const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+          const view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-          expectFieldValueV7(
-            v7Response.getSectionsContainer(),
-            localizedTexts[localeKey].placeholder,
-          );
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder);
         });
 
         it('should have well formatted value', () => {
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             value: adapter.date(testDate),
           });
 
-          expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value);
         });
       });
     });
diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx
index 8c68148e8620..372dbfab75f6 100644
--- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx
+++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx
@@ -107,21 +107,18 @@ describe('<AdapterLuxon />', () => {
         });
 
         it('should have correct placeholder', () => {
-          const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+          const view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-          expectFieldValueV7(
-            v7Response.getSectionsContainer(),
-            localizedTexts[localeKey].placeholder,
-          );
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder);
         });
 
         it('should have well formatted value', () => {
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             value: adapter.date(testDate),
           });
 
-          expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value);
         });
       });
     });
@@ -166,25 +163,22 @@ describe('<AdapterLuxon />', () => {
         });
 
         it('should have correct placeholder', () => {
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             format: 'DD',
           });
 
-          expectFieldValueV7(
-            v7Response.getSectionsContainer(),
-            localizedTexts[localeKey].placeholder,
-          );
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder);
         });
 
         it('should have well formatted value', () => {
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             value: adapter.date(testDate),
             format: 'DD',
           });
 
-          expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value);
         });
       });
     });
diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx
index 895710889ae5..fa684d96e860 100644
--- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx
+++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx
@@ -161,21 +161,18 @@ describe('<AdapterMoment />', () => {
         });
 
         it('should have correct placeholder', () => {
-          const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+          const view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-          expectFieldValueV7(
-            v7Response.getSectionsContainer(),
-            localizedTexts[localeKey].placeholder,
-          );
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder);
         });
 
         it('should have well formatted value', () => {
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             value: adapter.date(testDate),
           });
 
-          expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value);
         });
       });
     });
diff --git a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx
index de006376e282..bd86f319abe6 100644
--- a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx
+++ b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx
@@ -75,21 +75,18 @@ describe('<AdapterMomentHijri />', () => {
         });
 
         it('should have correct placeholder', () => {
-          const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+          const view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-          expectFieldValueV7(
-            v7Response.getSectionsContainer(),
-            localizedTexts[localeKey].placeholder,
-          );
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder);
         });
 
         it('should have well formatted value', () => {
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             value: adapter.date(testDate),
           });
 
-          expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value);
         });
       });
     });
diff --git a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx
index 1d326ff9e325..9a30e357c05d 100644
--- a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx
+++ b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx
@@ -82,21 +82,18 @@ describe('<AdapterMomentJalaali />', () => {
         });
 
         it('should have correct placeholder', () => {
-          const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+          const view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-          expectFieldValueV7(
-            v7Response.getSectionsContainer(),
-            localizedTexts[localeKey].placeholder,
-          );
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder);
         });
 
         it('should have well formatted value', () => {
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             value: adapter.date(testDate),
           });
 
-          expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
+          expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value);
         });
       });
     });
diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
index fb52644ced5b..8cfd7af3ad1e 100644
--- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { fireEvent, userEvent, screen } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 import { PickersDay } from '@mui/x-date-pickers/PickersDay';
 import { createPickerRenderer, adapterToUse } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -136,20 +137,20 @@ describe('<DateCalendar />', () => {
     const defaultDate = adapterToUse.date('2019-01-02T11:12:13.550Z');
     render(<DateCalendar onChange={onChange} disablePast defaultValue={defaultDate} />);
 
-    userEvent.mousePress(
+    fireUserEvent.mousePress(
       screen.getByRole('button', { name: 'calendar view is open, switch to year view' }),
     );
-    userEvent.mousePress(screen.getByRole('radio', { name: '2020' }));
+    fireUserEvent.mousePress(screen.getByRole('radio', { name: '2020' }));
 
     // Finish the transition to the day view
     clock.runToLast();
 
-    userEvent.mousePress(screen.getByRole('gridcell', { name: '1' }));
-    userEvent.mousePress(
+    fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '1' }));
+    fireUserEvent.mousePress(
       screen.getByRole('button', { name: 'calendar view is open, switch to year view' }),
     );
     // select the current year with a date in the past to trigger "findClosestEnabledDate"
-    userEvent.mousePress(screen.getByRole('radio', { name: '2019' }));
+    fireUserEvent.mousePress(screen.getByRole('radio', { name: '2019' }));
 
     expect(onChange.lastCall.firstArg).toEqualDateTime(defaultDate);
   });
@@ -195,7 +196,7 @@ describe('<DateCalendar />', () => {
       // should make the reference day firstly focusable
       expect(screen.getByRole('gridcell', { name: '17' })).to.have.attribute('tabindex', '0');
 
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 3, 2, 12, 30));
     });
@@ -212,7 +213,7 @@ describe('<DateCalendar />', () => {
         />,
       );
 
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 0, 2, 12, 20));
     });
@@ -229,7 +230,7 @@ describe('<DateCalendar />', () => {
         />,
       );
 
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 0, 2, 12, 20));
     });
@@ -245,7 +246,7 @@ describe('<DateCalendar />', () => {
         />,
       );
 
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.firstArg).toEqualDateTime(
         adapterToUse.date('2018-01-02T11:11:11.111'),
@@ -620,7 +621,7 @@ describe('<DateCalendar />', () => {
       );
 
       const renderCountBeforeChange = RenderCount.callCount;
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
       expect(RenderCount.callCount - renderCountBeforeChange).to.equal(2); // 2 render * 1 day
     });
 
@@ -637,7 +638,7 @@ describe('<DateCalendar />', () => {
       );
 
       const renderCountBeforeChange = RenderCount.callCount;
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
       expect(RenderCount.callCount - renderCountBeforeChange).to.equal(4); // 2 render * 2 days
     });
   });
diff --git a/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx
index 7a807f651b17..d3ab8212f0d7 100644
--- a/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { DateCalendar, dateCalendarClasses as classes } from '@mui/x-date-pickers/DateCalendar';
 import { pickersDayClasses } from '@mui/x-date-pickers/PickersDay';
 import {
@@ -10,6 +10,7 @@ import {
   describeValue,
 } from 'test/utils/pickers';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DateCalendar /> - Describes', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
@@ -47,7 +48,7 @@ describe('<DateCalendar /> - Describes', () => {
     },
     setNewValue: (value) => {
       const newValue = adapterToUse.addDays(value, 1);
-      userEvent.mousePress(
+      fireUserEvent.mousePress(
         screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }),
       );
 
diff --git a/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx
index 59249ab7660b..795a3bf042af 100644
--- a/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { spy } from 'sinon';
 import { expect } from 'chai';
-import { userEvent, screen } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { describeAdapters } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 
 const TIMEZONE_TO_TEST = ['UTC', 'system', 'America/New_York'];
@@ -17,7 +18,7 @@ describe('<DateCalendar /> - Timezone', () => {
       const onChange = spy();
       render(<DateCalendar onChange={onChange} />);
 
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '25' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '25' }));
       const expectedDate = adapter.setDate(adapter.date(undefined, 'default'), 25);
 
       // Check the `onChange` value (uses default timezone, e.g: UTC, see TZ env variable)
@@ -34,7 +35,7 @@ describe('<DateCalendar /> - Timezone', () => {
         it('should use timezone prop for onChange when no value is provided', () => {
           const onChange = spy();
           render(<DateCalendar onChange={onChange} timezone={timezone} />);
-          userEvent.mousePress(screen.getByRole('gridcell', { name: '25' }));
+          fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '25' }));
           const expectedDate = adapter.setDate(
             adapter.startOfDay(adapter.date(undefined, timezone)),
             25,
@@ -52,7 +53,7 @@ describe('<DateCalendar /> - Timezone', () => {
 
           render(<DateCalendar value={value} onChange={onChange} timezone="America/Chicago" />);
 
-          userEvent.mousePress(screen.getByRole('gridcell', { name: '25' }));
+          fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '25' }));
           const expectedDate = adapter.setDate(value, 25);
 
           // Check the `onChange` value (uses timezone prop)
diff --git a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx
index 7c6ac2b0a0bc..b5140fdffb72 100644
--- a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx
+++ b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx
@@ -1,13 +1,14 @@
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { DateField } from '@mui/x-date-pickers/DateField';
-import { act, userEvent, fireEvent } from '@mui/internal-test-utils';
+import { act, fireEvent } from '@mui/internal-test-utils';
 import {
   expectFieldValueV7,
   getTextbox,
   describeAdapters,
   expectFieldValueV6,
 } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DateField /> - Editing', () => {
   describeAdapters('key: ArrowDown', DateField, ({ adapter, testFieldKeyPress }) => {
@@ -213,30 +214,30 @@ describe('<DateField /> - Editing', () => {
   describeAdapters('key: Delete', DateField, ({ adapter, testFieldKeyPress, renderWithProps }) => {
     it('should clear the selected section when only this section is completed', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Set a value for the "month" section
-      v7Response.pressKey(0, 'j');
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY');
+      view.pressKey(0, 'j');
+      expectFieldValueV7(view.getSectionsContainer(), 'January YYYY');
 
-      userEvent.keyPress(v7Response.getActiveSection(0), { key: 'Delete' });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY');
+      fireUserEvent.keyPress(view.getActiveSection(0), { key: 'Delete' });
+      expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Set a value for the "month" section
       fireEvent.change(input, {
@@ -244,7 +245,7 @@ describe('<DateField /> - Editing', () => {
       }); // press "j"
       expectFieldValueV6(input, 'January YYYY');
 
-      userEvent.keyPress(input, { key: 'Delete' });
+      fireUserEvent.keyPress(input, { key: 'Delete' });
       expectFieldValueV6(input, 'MMMM YYYY');
     });
 
@@ -259,68 +260,68 @@ describe('<DateField /> - Editing', () => {
 
     it('should clear all the sections when all sections are selected and all sections are completed', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         defaultValue: adapter.date(),
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      userEvent.keyPress(v7Response.getSectionsContainer(), { key: 'Delete' });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY');
+      fireUserEvent.keyPress(view.getSectionsContainer(), { key: 'Delete' });
+      expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         defaultValue: adapter.date(),
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      userEvent.keyPress(input, { key: 'a', ctrlKey: true });
+      fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true });
 
-      userEvent.keyPress(input, { key: 'Delete' });
+      fireUserEvent.keyPress(input, { key: 'Delete' });
       expectFieldValueV6(input, 'MMMM YYYY');
     });
 
     it('should clear all the sections when all sections are selected and not all sections are completed', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Set a value for the "month" section
-      v7Response.pressKey(0, 'j');
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY');
+      view.pressKey(0, 'j');
+      expectFieldValueV7(view.getSectionsContainer(), 'January YYYY');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      userEvent.keyPress(v7Response.getSectionsContainer(), { key: 'Delete' });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY');
+      fireUserEvent.keyPress(view.getSectionsContainer(), { key: 'Delete' });
+      expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Set a value for the "month" section
       fireEvent.change(input, {
@@ -329,45 +330,45 @@ describe('<DateField /> - Editing', () => {
       expectFieldValueV6(input, 'January YYYY');
 
       // Select all sections
-      userEvent.keyPress(input, { key: 'a', ctrlKey: true });
+      fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true });
 
-      userEvent.keyPress(input, { key: 'Delete' });
+      fireUserEvent.keyPress(input, { key: 'Delete' });
       expectFieldValueV6(input, 'MMMM YYYY');
     });
 
     it('should not keep query after typing again on a cleared section', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: adapter.formats.year,
       });
 
-      v7Response.selectSection('year');
+      view.selectSection('year');
 
-      v7Response.pressKey(0, '2');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '0002');
+      view.pressKey(0, '2');
+      expectFieldValueV7(view.getSectionsContainer(), '0002');
 
-      userEvent.keyPress(v7Response.getActiveSection(0), { key: 'Delete' });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'YYYY');
+      fireUserEvent.keyPress(view.getActiveSection(0), { key: 'Delete' });
+      expectFieldValueV7(view.getSectionsContainer(), 'YYYY');
 
-      v7Response.pressKey(0, '2');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '0002');
+      view.pressKey(0, '2');
+      expectFieldValueV7(view.getSectionsContainer(), '0002');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: adapter.formats.year,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('year');
+      view.selectSection('year');
 
       fireEvent.change(input, { target: { value: '2' } }); // press "2"
       expectFieldValueV6(input, '0002');
 
-      userEvent.keyPress(input, { key: 'Delete' });
+      fireUserEvent.keyPress(input, { key: 'Delete' });
       expectFieldValueV6(input, 'YYYY');
 
       fireEvent.change(input, { target: { value: '2' } }); // press "2"
@@ -388,38 +389,38 @@ describe('<DateField /> - Editing', () => {
       // Test with v7 input
       const onChangeV7 = spy();
 
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         onChange: onChangeV7,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      userEvent.keyPress(v7Response.getSectionsContainer(), { key: 'Delete' });
+      fireUserEvent.keyPress(view.getSectionsContainer(), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(0);
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         onChange: onChangeV6,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      userEvent.keyPress(input, { key: 'a', ctrlKey: true });
+      fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true });
 
-      userEvent.keyPress(input, { key: 'Delete' });
+      fireUserEvent.keyPress(input, { key: 'Delete' });
       expect(onChangeV6.callCount).to.equal(0);
     });
 
@@ -427,32 +428,32 @@ describe('<DateField /> - Editing', () => {
       // Test with v7 input
       const onChangeV7 = spy();
 
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         defaultValue: adapter.date(),
         onChange: onChangeV7,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
-      userEvent.keyPress(v7Response.getActiveSection(0), { key: 'Delete' });
+      fireUserEvent.keyPress(view.getActiveSection(0), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(1);
       expect(onChangeV7.lastCall.args[1].validationError).to.equal('invalidDate');
 
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' });
 
-      userEvent.keyPress(v7Response.getActiveSection(1), { key: 'Delete' });
+      fireUserEvent.keyPress(view.getActiveSection(1), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(2);
       expect(onChangeV7.lastCall.firstArg).to.equal(null);
       expect(onChangeV7.lastCall.args[1].validationError).to.equal(null);
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         defaultValue: adapter.date(),
@@ -460,15 +461,15 @@ describe('<DateField /> - Editing', () => {
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
-      userEvent.keyPress(input, { key: 'Delete' });
+      fireUserEvent.keyPress(input, { key: 'Delete' });
       expect(onChangeV6.callCount).to.equal(1);
       expect(onChangeV6.lastCall.args[1].validationError).to.equal('invalidDate');
 
-      userEvent.keyPress(input, { key: 'ArrowRight' });
+      fireUserEvent.keyPress(input, { key: 'ArrowRight' });
 
-      userEvent.keyPress(input, { key: 'Delete' });
+      fireUserEvent.keyPress(input, { key: 'Delete' });
       expect(onChangeV6.callCount).to.equal(2);
       expect(onChangeV6.lastCall.firstArg).to.equal(null);
       expect(onChangeV6.lastCall.args[1].validationError).to.equal(null);
@@ -478,27 +479,27 @@ describe('<DateField /> - Editing', () => {
       // Test with v7 input
       const onChangeV7 = spy();
 
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         defaultValue: adapter.date(),
         onChange: onChangeV7,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
-      userEvent.keyPress(v7Response.getActiveSection(0), { key: 'Delete' });
+      fireUserEvent.keyPress(view.getActiveSection(0), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(1);
 
-      userEvent.keyPress(v7Response.getActiveSection(0), { key: 'Delete' });
+      fireUserEvent.keyPress(view.getActiveSection(0), { key: 'Delete' });
       expect(onChangeV7.callCount).to.equal(1);
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: `${adapter.formats.month} ${adapter.formats.year}`,
         defaultValue: adapter.date(),
@@ -506,12 +507,12 @@ describe('<DateField /> - Editing', () => {
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
-      userEvent.keyPress(input, { key: 'Delete' });
+      fireUserEvent.keyPress(input, { key: 'Delete' });
       expect(onChangeV6.callCount).to.equal(1);
 
-      userEvent.keyPress(input, { key: 'Delete' });
+      fireUserEvent.keyPress(input, { key: 'Delete' });
       expect(onChangeV6.callCount).to.equal(1);
     });
   });
@@ -748,7 +749,7 @@ describe('<DateField /> - Editing', () => {
     it('should not allow key editing on disabled field', () => {
       // Test with v7 input
       const onChangeV7 = spy();
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange: onChangeV7,
         disabled: true,
@@ -766,30 +767,30 @@ describe('<DateField /> - Editing', () => {
         'ArrowRight',
       ];
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       keys.forEach((key) => {
-        v7Response.pressKey(0, key);
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
+        view.pressKey(0, key);
+        expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
         expect(onChangeV7.callCount).to.equal(0);
       });
 
       // digit key press
-      userEvent.keyPress(v7Response.getActiveSection(0), { key: '2' });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
+      fireUserEvent.keyPress(view.getActiveSection(0), { key: '2' });
+      expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         onChange: onChangeV6,
         enableAccessibleFieldDOMStructure: false,
         disabled: true,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // v6 doesn't allow focusing on sections when disabled
       keys.forEach((key) => {
@@ -964,44 +965,44 @@ describe('<DateField /> - Editing', () => {
 
     it('should allow to type the date 29th of February for leap years', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: adapter.formats.keyboardDate,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
-      v7Response.pressKey(0, '2');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '02/DD/YYYY');
+      view.pressKey(0, '2');
+      expectFieldValueV7(view.getSectionsContainer(), '02/DD/YYYY');
 
-      v7Response.pressKey(1, '2');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '02/02/YYYY');
+      view.pressKey(1, '2');
+      expectFieldValueV7(view.getSectionsContainer(), '02/02/YYYY');
 
-      v7Response.pressKey(1, '9');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '02/29/YYYY');
+      view.pressKey(1, '9');
+      expectFieldValueV7(view.getSectionsContainer(), '02/29/YYYY');
 
-      v7Response.pressKey(2, '1');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '02/29/0001');
+      view.pressKey(2, '1');
+      expectFieldValueV7(view.getSectionsContainer(), '02/29/0001');
 
-      v7Response.pressKey(2, '9');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '02/29/0019');
+      view.pressKey(2, '9');
+      expectFieldValueV7(view.getSectionsContainer(), '02/29/0019');
 
-      v7Response.pressKey(2, '8');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '02/29/0198');
+      view.pressKey(2, '8');
+      expectFieldValueV7(view.getSectionsContainer(), '02/29/0198');
 
-      v7Response.pressKey(2, '8');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '02/29/1988');
+      view.pressKey(2, '8');
+      expectFieldValueV7(view.getSectionsContainer(), '02/29/1988');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: adapter.formats.keyboardDate,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       fireEvent.change(input, { target: { value: '2/DD/YYYY' } });
       expectFieldValueV6(input, '02/DD/YYYY');
@@ -1136,28 +1137,28 @@ describe('<DateField /> - Editing', () => {
     ({ adapter, renderWithProps, testFieldChange }) => {
       it('should clear the selected section when only this section is completed (Backspace)', () => {
         // Test with v7 input
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           format: `${adapter.formats.month} ${adapter.formats.year}`,
         });
 
-        v7Response.selectSection('month');
-        v7Response.pressKey(0, 'j');
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY');
+        view.selectSection('month');
+        view.pressKey(0, 'j');
+        expectFieldValueV7(view.getSectionsContainer(), 'January YYYY');
 
-        v7Response.pressKey(0, '');
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY');
+        view.pressKey(0, '');
+        expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY');
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           enableAccessibleFieldDOMStructure: false,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
         fireEvent.change(input, { target: { value: 'j YYYY' } });
         expectFieldValueV6(input, 'January YYYY');
 
@@ -1167,28 +1168,28 @@ describe('<DateField /> - Editing', () => {
 
       it('should clear the selected section when all sections are completed (Backspace)', () => {
         // Test with v7 input
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           defaultValue: adapter.date(),
         });
 
-        v7Response.selectSection('month');
+        view.selectSection('month');
 
-        v7Response.pressKey(0, '');
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM 2022');
+        view.pressKey(0, '');
+        expectFieldValueV7(view.getSectionsContainer(), 'MMMM 2022');
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           defaultValue: adapter.date(),
           enableAccessibleFieldDOMStructure: false,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
 
         fireEvent.change(input, { target: { value: ' 2022' } });
         expectFieldValueV6(input, 'MMMM 2022');
@@ -1196,31 +1197,31 @@ describe('<DateField /> - Editing', () => {
 
       it('should clear all the sections when all sections are selected and all sections are completed (Backspace)', () => {
         // Test with v7 input
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           defaultValue: adapter.date(),
         });
 
-        v7Response.selectSection('month');
+        view.selectSection('month');
 
         // Select all sections
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-        v7Response.pressKey(null, '');
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY');
+        view.pressKey(null, '');
+        expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY');
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           defaultValue: adapter.date(),
           enableAccessibleFieldDOMStructure: false,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
 
         // Select all sections
         fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
@@ -1231,31 +1232,31 @@ describe('<DateField /> - Editing', () => {
 
       it('should clear all the sections when all sections are selected and not all sections are completed (Backspace)', () => {
         // Test with v7 input
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           format: `${adapter.formats.month} ${adapter.formats.year}`,
         });
 
-        v7Response.selectSection('month');
-        v7Response.pressKey(0, 'j');
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY');
+        view.selectSection('month');
+        view.pressKey(0, 'j');
+        expectFieldValueV7(view.getSectionsContainer(), 'January YYYY');
 
         // Select all sections
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-        v7Response.pressKey(null, '');
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY');
+        view.pressKey(null, '');
+        expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY');
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           enableAccessibleFieldDOMStructure: false,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
         fireEvent.change(input, { target: { value: 'j YYYY' } });
         expectFieldValueV6(input, 'January YYYY');
 
@@ -1302,30 +1303,30 @@ describe('<DateField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           defaultValue: adapter.date(),
           onChange: onChangeV7,
         });
 
-        v7Response.selectSection('month');
-        v7Response.pressKey(0, '');
+        view.selectSection('month');
+        view.pressKey(0, '');
         expect(onChangeV7.callCount).to.equal(1);
         expect(onChangeV7.lastCall.args[1].validationError).to.equal('invalidDate');
 
-        v7Response.selectSection('year');
-        v7Response.pressKey(1, '');
+        view.selectSection('year');
+        view.pressKey(1, '');
         expect(onChangeV7.callCount).to.equal(2);
         expect(onChangeV7.lastCall.firstArg).to.equal(null);
         expect(onChangeV7.lastCall.args[1].validationError).to.equal(null);
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
 
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           enableAccessibleFieldDOMStructure: false,
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           defaultValue: adapter.date(),
@@ -1333,12 +1334,12 @@ describe('<DateField /> - Editing', () => {
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
         fireEvent.change(input, { target: { value: ' 2022' } });
         expect(onChangeV6.callCount).to.equal(1);
         expect(onChangeV6.lastCall.args[1].validationError).to.equal('invalidDate');
 
-        userEvent.keyPress(input, { key: 'ArrowRight' });
+        fireUserEvent.keyPress(input, { key: 'ArrowRight' });
 
         fireEvent.change(input, { target: { value: 'MMMM ' } });
         expect(onChangeV6.callCount).to.equal(2);
@@ -1367,90 +1368,92 @@ describe('<DateField /> - Editing', () => {
 
   describeAdapters('Pasting', DateField, ({ adapter, renderWithProps }) => {
     const firePasteEventV7 = (element: HTMLElement, pastedValue: string) => {
-      act(() => {
-        const clipboardEvent = new window.Event('paste', {
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-        });
+      const clipboardEvent = new window.Event('paste', {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      });
 
-        // @ts-ignore
-        clipboardEvent.clipboardData = {
-          getData: () => pastedValue,
-        };
+      // @ts-ignore
+      clipboardEvent.clipboardData = {
+        getData: () => pastedValue,
+      };
+      let canContinue = true;
+      act(() => {
         // canContinue is `false` if default have been prevented
-        const canContinue = element.dispatchEvent(clipboardEvent);
-        if (!canContinue) {
-          return;
-        }
-
-        fireEvent.input(element, { target: { textContent: pastedValue } });
+        canContinue = element.dispatchEvent(clipboardEvent);
       });
+      if (!canContinue) {
+        return;
+      }
+
+      fireEvent.input(element, { target: { textContent: pastedValue } });
     };
 
     const firePasteEventV6 = (input: HTMLInputElement, pastedValue?: string, rawValue?: string) => {
-      act(() => {
-        const clipboardEvent = new window.Event('paste', {
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-        });
+      const clipboardEvent = new window.Event('paste', {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      });
 
-        // @ts-ignore
-        clipboardEvent.clipboardData = {
-          getData: () => pastedValue ?? rawValue ?? '',
-        };
+      // @ts-ignore
+      clipboardEvent.clipboardData = {
+        getData: () => pastedValue ?? rawValue ?? '',
+      };
+      let canContinue = true;
+      act(() => {
         // canContinue is `false` if default have been prevented
-        const canContinue = input.dispatchEvent(clipboardEvent);
-        if (!canContinue) {
-          return;
-        }
-
-        if (!pastedValue) {
-          return;
-        }
-
-        const prevValue = input.value;
-        const nextValue = `${prevValue.slice(
-          0,
-          input.selectionStart || 0,
-        )}${pastedValue}${prevValue.slice(input.selectionEnd || 0)}`;
-        fireEvent.change(input, { target: { value: nextValue } });
+        canContinue = input.dispatchEvent(clipboardEvent);
       });
+      if (!canContinue) {
+        return;
+      }
+
+      if (!pastedValue) {
+        return;
+      }
+
+      const prevValue = input.value;
+      const nextValue = `${prevValue.slice(
+        0,
+        input.selectionStart || 0,
+      )}${pastedValue}${prevValue.slice(input.selectionEnd || 0)}`;
+      fireEvent.change(input, { target: { value: nextValue } });
     };
 
     it('should set the date when all sections are selected, the pasted value is valid and a value is provided', () => {
       // Test with v7 input
       const onChangeV7 = spy();
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         defaultValue: adapter.date(),
         onChange: onChangeV7,
       });
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      firePasteEventV7(v7Response.getSectionsContainer(), '09/16/2022');
+      firePasteEventV7(view.getSectionsContainer(), '09/16/2022');
 
       expect(onChangeV7.callCount).to.equal(1);
       expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2022, 8, 16));
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         defaultValue: adapter.date(),
         onChange: onChangeV6,
         enableAccessibleFieldDOMStructure: false,
       });
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      userEvent.keyPress(input, { key: 'a', ctrlKey: true });
+      fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true });
 
       firePasteEventV6(input, '09/16/2022');
 
@@ -1461,32 +1464,32 @@ describe('<DateField /> - Editing', () => {
     it('should set the date when all sections are selected, the pasted value is valid and no value is provided', () => {
       // Test with v7 input
       const onChangeV7 = spy();
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange: onChangeV7,
       });
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      firePasteEventV7(v7Response.getSectionsContainer(), '09/16/2022');
+      firePasteEventV7(view.getSectionsContainer(), '09/16/2022');
 
       expect(onChangeV7.callCount).to.equal(1);
       expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2022, 8, 16));
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         onChange: onChangeV6,
         enableAccessibleFieldDOMStructure: false,
       });
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      userEvent.keyPress(input, { key: 'a', ctrlKey: true });
+      fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true });
 
       firePasteEventV6(input, '09/16/2022');
 
@@ -1497,30 +1500,30 @@ describe('<DateField /> - Editing', () => {
     it('should not set the date when all sections are selected and the pasted value is not valid', () => {
       // Test with v7 input
       const onChangeV7 = spy();
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange: onChangeV7,
       });
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      firePasteEventV7(v7Response.getSectionsContainer(), 'Some invalid content');
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
-      v7Response.unmount();
+      firePasteEventV7(view.getSectionsContainer(), 'Some invalid content');
+      expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         onChange: onChangeV6,
         enableAccessibleFieldDOMStructure: false,
       });
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      userEvent.keyPress(input, { key: 'a', ctrlKey: true });
+      fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true });
 
       firePasteEventV6(input, 'Some invalid content');
       expectFieldValueV6(input, 'MM/DD/YYYY');
@@ -1531,35 +1534,35 @@ describe('<DateField /> - Editing', () => {
 
       // Test with v7 input
       const onChangeV7 = spy();
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange: onChangeV7,
         format: `${startChar}Escaped${endChar} ${adapter.formats.year}`,
       });
 
-      v7Response.selectSection('year');
+      view.selectSection('year');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      firePasteEventV7(v7Response.getSectionsContainer(), `Escaped 2014`);
+      firePasteEventV7(view.getSectionsContainer(), `Escaped 2014`);
       expect(onChangeV7.callCount).to.equal(1);
       expect(adapter.getYear(onChangeV7.lastCall.firstArg)).to.equal(2014);
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         onChange: onChangeV6,
         format: `${startChar}Escaped${endChar} ${adapter.formats.year}`,
         enableAccessibleFieldDOMStructure: false,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('year');
+      view.selectSection('year');
 
       // Select all sections
-      userEvent.keyPress(input, { key: 'a', ctrlKey: true });
+      fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true });
 
       firePasteEventV6(input, `Escaped 2014`);
       expect(onChangeV6.callCount).to.equal(1);
@@ -1570,36 +1573,36 @@ describe('<DateField /> - Editing', () => {
       // Test with v7 input
       const onChangeV7 = spy();
 
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange: onChangeV7,
         readOnly: true,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      firePasteEventV7(v7Response.getSectionsContainer(), '09/16/2022');
+      firePasteEventV7(view.getSectionsContainer(), '09/16/2022');
       expect(onChangeV7.callCount).to.equal(0);
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         onChange: onChangeV6,
         readOnly: true,
         enableAccessibleFieldDOMStructure: false,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      userEvent.keyPress(input, { key: 'a', ctrlKey: true });
+      fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true });
 
       firePasteEventV6(input, '09/16/2022');
       expect(onChangeV6.callCount).to.equal(0);
@@ -1609,31 +1612,31 @@ describe('<DateField /> - Editing', () => {
       // Test with v7 input
       const onChangeV7 = spy();
 
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange: onChangeV7,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
-      firePasteEventV7(v7Response.getActiveSection(0), '12');
+      expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
+      firePasteEventV7(view.getActiveSection(0), '12');
 
       expect(onChangeV7.callCount).to.equal(1);
-      expectFieldValueV7(v7Response.getSectionsContainer(), '12/DD/YYYY');
+      expectFieldValueV7(view.getSectionsContainer(), '12/DD/YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         onChange: onChangeV6,
         enableAccessibleFieldDOMStructure: false,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       expectFieldValueV6(input, 'MM/DD/YYYY');
       firePasteEventV6(input, '12');
@@ -1646,33 +1649,33 @@ describe('<DateField /> - Editing', () => {
       // Test with v7 input
       const onChangeV7 = spy();
 
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         defaultValue: adapter.date('2018-01-13'),
         onChange: onChangeV7,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
-      expectFieldValueV7(v7Response.getSectionsContainer(), '01/13/2018');
-      firePasteEventV7(v7Response.getActiveSection(0), '12');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '12/13/2018');
+      expectFieldValueV7(view.getSectionsContainer(), '01/13/2018');
+      firePasteEventV7(view.getActiveSection(0), '12');
+      expectFieldValueV7(view.getSectionsContainer(), '12/13/2018');
       expect(onChangeV7.callCount).to.equal(1);
       expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2018, 11, 13));
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         defaultValue: adapter.date('2018-01-13'),
         onChange: onChangeV6,
         enableAccessibleFieldDOMStructure: false,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       expectFieldValueV6(input, '01/13/2018');
       firePasteEventV6(input, '12');
@@ -1685,32 +1688,32 @@ describe('<DateField /> - Editing', () => {
       // Test with v7 input
       const onChangeV7 = spy();
 
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         defaultValue: adapter.date('2018-01-13'),
         onChange: onChangeV7,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
-      expectFieldValueV7(v7Response.getSectionsContainer(), '01/13/2018');
-      firePasteEventV7(v7Response.getActiveSection(0), 'Jun');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '01/13/2018');
+      expectFieldValueV7(view.getSectionsContainer(), '01/13/2018');
+      firePasteEventV7(view.getActiveSection(0), 'Jun');
+      expectFieldValueV7(view.getSectionsContainer(), '01/13/2018');
       expect(onChangeV7.callCount).to.equal(0);
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         defaultValue: adapter.date('2018-01-13'),
         onChange: onChangeV6,
         enableAccessibleFieldDOMStructure: false,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       expectFieldValueV6(input, '01/13/2018');
       firePasteEventV6(input, 'Jun');
@@ -1720,37 +1723,37 @@ describe('<DateField /> - Editing', () => {
 
     it('should reset sections internal state when pasting', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         defaultValue: adapter.date('2018-12-05'),
       });
 
-      v7Response.selectSection('day');
+      view.selectSection('day');
 
-      v7Response.pressKey(1, '2');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '12/02/2018');
+      view.pressKey(1, '2');
+      expectFieldValueV7(view.getSectionsContainer(), '12/02/2018');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(1), { key: 'a', ctrlKey: true });
 
-      firePasteEventV7(v7Response.getSectionsContainer(), '09/16/2022');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '09/16/2022');
+      firePasteEventV7(view.getSectionsContainer(), '09/16/2022');
+      expectFieldValueV7(view.getSectionsContainer(), '09/16/2022');
 
-      v7Response.selectSection('day');
+      view.selectSection('day');
 
-      v7Response.pressKey(1, '2'); // Press 2
-      expectFieldValueV7(v7Response.getSectionsContainer(), '09/02/2022'); // If internal state is not reset it would be 22 instead of 02
+      view.pressKey(1, '2'); // Press 2
+      expectFieldValueV7(view.getSectionsContainer(), '09/02/2022'); // If internal state is not reset it would be 22 instead of 02
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         defaultValue: adapter.date('2018-12-05'),
         enableAccessibleFieldDOMStructure: false,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('day');
+      view.selectSection('day');
 
       fireEvent.change(input, { target: { value: '12/2/2018' } }); // Press 2
       expectFieldValueV6(input, '12/02/2018');
@@ -1763,32 +1766,32 @@ describe('<DateField /> - Editing', () => {
     });
 
     it('should allow pasting a section', () => {
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         defaultValue: adapter.date('2018-12-05'),
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
-      v7Response.pressKey(0, '1'); // Press 1
-      expectFieldValueV7(v7Response.getSectionsContainer(), '01/05/2018');
+      view.pressKey(0, '1'); // Press 1
+      expectFieldValueV7(view.getSectionsContainer(), '01/05/2018');
 
-      firePasteEventV7(v7Response.getActiveSection(0), '05');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '05/05/2018');
+      firePasteEventV7(view.getActiveSection(0), '05');
+      expectFieldValueV7(view.getSectionsContainer(), '05/05/2018');
 
-      v7Response.selectSection('month'); // move back to month section
-      v7Response.pressKey(0, '2'); // check that the search query has been cleared after pasting
-      expectFieldValueV7(v7Response.getSectionsContainer(), '02/05/2018'); // If internal state is not reset it would be 12 instead of 02
+      view.selectSection('month'); // move back to month section
+      view.pressKey(0, '2'); // check that the search query has been cleared after pasting
+      expectFieldValueV7(view.getSectionsContainer(), '02/05/2018'); // If internal state is not reset it would be 12 instead of 02
 
-      v7Response.unmount();
+      view.unmount();
 
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         defaultValue: adapter.date('2018-12-05'),
         enableAccessibleFieldDOMStructure: false,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       fireEvent.change(input, { target: { value: '1/05/2018' } }); // initiate search query on month section
       expectFieldValueV6(input, '01/05/2018');
@@ -1796,7 +1799,7 @@ describe('<DateField /> - Editing', () => {
       firePasteEventV6(input, undefined, '05');
       expectFieldValueV6(input, '05/05/2018');
 
-      v6Response.selectSection('month'); // move back to month section
+      view.selectSection('month'); // move back to month section
       fireEvent.change(input, { target: { value: '2/05/2018' } }); // check that the search query has been cleared after pasting
       expectFieldValueV6(input, '02/05/2018'); // If internal state is not reset it would be 12 instead of 02
     });
@@ -1804,32 +1807,32 @@ describe('<DateField /> - Editing', () => {
     it('should not allow pasting on disabled field', () => {
       // Test with v7 input
       const onChangeV7 = spy();
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange: onChangeV7,
         disabled: true,
       });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
-      firePasteEventV7(v7Response.getSectionsContainer(), '09/16/2022');
+      firePasteEventV7(view.getSectionsContainer(), '09/16/2022');
       expect(onChangeV7.callCount).to.equal(0);
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
+      expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
       const onChangeV6 = spy();
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         onChange: onChangeV6,
         enableAccessibleFieldDOMStructure: false,
         disabled: true,
       });
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
       firePasteEventV6(input, '9');
 
       // v6 doesn't allow focusing on sections when disabled
@@ -1846,27 +1849,27 @@ describe('<DateField /> - Editing', () => {
       it('should not loose time information when a value is provided', () => {
         // Test with v7 input
         const onChangeV7 = spy();
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV7,
         });
-        v7Response.selectSection('year');
-        fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowDown' });
+        view.selectSection('year');
+        fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowDown' });
         expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2009, 3, 3, 3, 3, 3));
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV6,
           enableAccessibleFieldDOMStructure: false,
         });
         const input = getTextbox();
-        v6Response.selectSection('year');
-        userEvent.keyPress(input, { key: 'ArrowDown' });
+        view.selectSection('year');
+        fireUserEvent.keyPress(input, { key: 'ArrowDown' });
         expect(onChangeV6.lastCall.firstArg).toEqualDateTime(new Date(2009, 3, 3, 3, 3, 3));
       });
 
@@ -1874,51 +1877,51 @@ describe('<DateField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV7,
         });
 
-        v7Response.selectSection('month');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
-        v7Response.pressKey(null, '');
-        expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
-        v7Response.selectSection('month');
+        view.selectSection('month');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
+        view.pressKey(null, '');
+        expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
+        view.selectSection('month');
 
-        v7Response.pressKey(0, '1');
-        expectFieldValueV7(v7Response.getSectionsContainer(), '01/DD/YYYY');
+        view.pressKey(0, '1');
+        expectFieldValueV7(view.getSectionsContainer(), '01/DD/YYYY');
 
-        v7Response.pressKey(0, '1');
-        expectFieldValueV7(v7Response.getSectionsContainer(), '11/DD/YYYY');
+        view.pressKey(0, '1');
+        expectFieldValueV7(view.getSectionsContainer(), '11/DD/YYYY');
 
-        v7Response.pressKey(1, '2');
-        v7Response.pressKey(1, '5');
-        expectFieldValueV7(v7Response.getSectionsContainer(), '11/25/YYYY');
+        view.pressKey(1, '2');
+        view.pressKey(1, '5');
+        expectFieldValueV7(view.getSectionsContainer(), '11/25/YYYY');
 
-        v7Response.pressKey(2, '2');
-        v7Response.pressKey(2, '0');
-        v7Response.pressKey(2, '0');
-        v7Response.pressKey(2, '9');
-        expectFieldValueV7(v7Response.getSectionsContainer(), '11/25/2009');
+        view.pressKey(2, '2');
+        view.pressKey(2, '0');
+        view.pressKey(2, '0');
+        view.pressKey(2, '9');
+        expectFieldValueV7(view.getSectionsContainer(), '11/25/2009');
         expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2009, 10, 25, 3, 3, 3));
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
 
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV6,
           enableAccessibleFieldDOMStructure: false,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
-        userEvent.keyPress(input, { key: 'a', ctrlKey: true });
+        view.selectSection('month');
+        fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true });
         fireEvent.change(input, { target: { value: '' } });
-        userEvent.keyPress(input, { key: 'ArrowLeft' });
+        fireUserEvent.keyPress(input, { key: 'ArrowLeft' });
 
         fireEvent.change(input, { target: { value: '1/DD/YYYY' } }); // Press "1"
         expectFieldValueV6(input, '01/DD/YYYY');
@@ -1942,24 +1945,24 @@ describe('<DateField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           format: adapter.formats.year,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV7,
         });
 
-        v7Response.selectSection('year');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowDown' });
+        view.selectSection('year');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowDown' });
 
         expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2009, 3, 3, 3, 3, 3));
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
 
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           format: adapter.formats.year,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV6,
@@ -1967,8 +1970,8 @@ describe('<DateField /> - Editing', () => {
         });
 
         const input = getTextbox();
-        v6Response.selectSection('year');
-        userEvent.keyPress(input, { key: 'ArrowDown' });
+        view.selectSection('year');
+        fireUserEvent.keyPress(input, { key: 'ArrowDown' });
 
         expect(onChangeV6.lastCall.firstArg).toEqualDateTime(new Date(2009, 3, 3, 3, 3, 3));
       });
@@ -1977,32 +1980,32 @@ describe('<DateField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           format: adapter.formats.month,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV7,
         });
 
-        v7Response.selectSection('month');
-        userEvent.keyPress(v7Response.getActiveSection(0), { key: 'ArrowDown' });
+        view.selectSection('month');
+        fireUserEvent.keyPress(view.getActiveSection(0), { key: 'ArrowDown' });
         expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2010, 2, 3, 3, 3, 3));
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
 
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           format: adapter.formats.month,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV6,
           enableAccessibleFieldDOMStructure: false,
         });
 
-        v6Response.selectSection('month');
+        view.selectSection('month');
         const input = getTextbox();
-        userEvent.keyPress(input, { key: 'ArrowDown' });
+        fireUserEvent.keyPress(input, { key: 'ArrowDown' });
         expect(onChangeV6.lastCall.firstArg).toEqualDateTime(new Date(2010, 2, 3, 3, 3, 3));
       });
     },
@@ -2015,16 +2018,16 @@ describe('<DateField /> - Editing', () => {
       it('should set the date when the change value is valid and no value is provided', () => {
         // Test with v7 input
         const onChangeV7 = spy();
-        const v7Response = renderWithProps({
+        const view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           onChange: onChangeV7,
         });
-        fireEvent.change(v7Response.getHiddenInput(), { target: { value: '09/16/2022' } });
+        fireEvent.change(view.getHiddenInput(), { target: { value: '09/16/2022' } });
 
         expect(onChangeV7.callCount).to.equal(1);
         expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2022, 8, 16));
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
@@ -2043,18 +2046,18 @@ describe('<DateField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        const view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV7,
         });
 
-        fireEvent.change(v7Response.getHiddenInput(), { target: { value: '09/16/2022' } });
+        fireEvent.change(view.getHiddenInput(), { target: { value: '09/16/2022' } });
 
         expect(onChangeV7.callCount).to.equal(1);
         expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2022, 8, 16, 3, 3, 3));
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
@@ -2098,7 +2101,7 @@ describe('<DateField /> - Editing', () => {
       });
 
       it('should support digit editing', () => {
-        const v6Response = renderWithProps({
+        const view = renderWithProps({
           defaultValue: adapter.date('2022-11-23'),
           enableAccessibleFieldDOMStructure: false,
         });
@@ -2106,53 +2109,45 @@ describe('<DateField /> - Editing', () => {
         const input = getTextbox();
         const initialValueStr = input.value;
 
-        v6Response.selectSection('day');
+        view.selectSection('day');
 
-        act(() => {
-          // Remove the selected section
-          fireEvent.change(input, { target: { value: initialValueStr.replace('23', '') } });
+        // Remove the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('23', '') } });
 
-          // Set the key pressed in the selected section
-          fireEvent.change(input, { target: { value: initialValueStr.replace('23', '2') } });
-        });
+        // Set the key pressed in the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('23', '2') } });
 
-        act(() => {
-          // Remove the selected section
-          fireEvent.change(input, { target: { value: initialValueStr.replace('23', '') } });
+        // Remove the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('23', '') } });
 
-          // Set the key pressed in the selected section
-          fireEvent.change(input, { target: { value: initialValueStr.replace('23', '1') } });
-        });
+        // Set the key pressed in the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('23', '1') } });
 
         expectFieldValueV6(input, '11/01/2022');
       });
 
       it('should support letter editing', () => {
         // Test with v6 input
-        const v6Response = renderWithProps({
+        const view = renderWithProps({
           defaultValue: adapter.date('2022-01-16'),
           format: `${adapter.formats.month} ${adapter.formats.year}`,
           enableAccessibleFieldDOMStructure: false,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('month');
+        view.selectSection('month');
 
-        act(() => {
-          // Remove the selected section
-          fireEvent.change(input, { target: { value: ' 2022' } });
+        // Remove the selected section
+        fireEvent.change(input, { target: { value: ' 2022' } });
 
-          // Set the key pressed in the selected section
-          fireEvent.change(input, { target: { value: 'J 2022' } });
-        });
+        // Set the key pressed in the selected section
+        fireEvent.change(input, { target: { value: 'J 2022' } });
 
-        act(() => {
-          // Remove the selected section
-          fireEvent.change(input, { target: { value: ' 2022' } });
+        // Remove the selected section
+        fireEvent.change(input, { target: { value: ' 2022' } });
 
-          // Set the key pressed in the selected section
-          fireEvent.change(input, { target: { value: 'a 2022' } });
-        });
+        // Set the key pressed in the selected section
+        fireEvent.change(input, { target: { value: 'a 2022' } });
 
         expectFieldValueV6(input, 'April 2022');
       });
@@ -2162,76 +2157,76 @@ describe('<DateField /> - Editing', () => {
   describeAdapters('Editing from the outside', DateField, ({ adapter, renderWithProps, clock }) => {
     it('should be able to reset the value from the outside', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         value: adapter.date('2022-11-23'),
       });
-      expectFieldValueV7(v7Response.getSectionsContainer(), '11/23/2022');
+      expectFieldValueV7(view.getSectionsContainer(), '11/23/2022');
 
-      v7Response.setProps({ value: null });
+      view.setProps({ value: null });
 
-      v7Response.selectSection('month');
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
+      view.selectSection('month');
+      expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         value: adapter.date('2022-11-23'),
         enableAccessibleFieldDOMStructure: false,
       });
       const input = getTextbox();
       expectFieldValueV6(input, '11/23/2022');
 
-      v6Response.setProps({ value: null });
+      view.setProps({ value: null });
 
-      v6Response.selectSection('month');
+      view.selectSection('month');
       expectFieldValueV6(input, 'MM/DD/YYYY');
     });
 
     it('should reset the input query state on an unfocused field', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: null });
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: null });
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
 
-      v7Response.pressKey(0, '1');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '01/DD/YYYY');
+      view.pressKey(0, '1');
+      expectFieldValueV7(view.getSectionsContainer(), '01/DD/YYYY');
 
-      v7Response.pressKey(0, '1');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '11/DD/YYYY');
+      view.pressKey(0, '1');
+      expectFieldValueV7(view.getSectionsContainer(), '11/DD/YYYY');
 
-      v7Response.pressKey(1, '2');
-      v7Response.pressKey(1, '5');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '11/25/YYYY');
+      view.pressKey(1, '2');
+      view.pressKey(1, '5');
+      expectFieldValueV7(view.getSectionsContainer(), '11/25/YYYY');
 
-      v7Response.pressKey(2, '2');
-      v7Response.pressKey(2, '0');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '11/25/0020');
+      view.pressKey(2, '2');
+      view.pressKey(2, '0');
+      expectFieldValueV7(view.getSectionsContainer(), '11/25/0020');
 
       act(() => {
-        v7Response.getSectionsContainer().blur();
+        view.getSectionsContainer().blur();
       });
 
       clock.runToLast();
 
-      v7Response.setProps({ value: adapter.date('2022-11-23') });
-      expectFieldValueV7(v7Response.getSectionsContainer(), '11/23/2022');
+      view.setProps({ value: adapter.date('2022-11-23') });
+      expectFieldValueV7(view.getSectionsContainer(), '11/23/2022');
 
-      v7Response.selectSection('year');
+      view.selectSection('year');
 
-      v7Response.pressKey(2, '2');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '11/23/0002');
-      v7Response.pressKey(2, '1');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '11/23/0021');
+      view.pressKey(2, '2');
+      expectFieldValueV7(view.getSectionsContainer(), '11/23/0002');
+      view.pressKey(2, '1');
+      expectFieldValueV7(view.getSectionsContainer(), '11/23/0021');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false, value: null });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false, value: null });
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       fireEvent.change(input, { target: { value: '1/DD/YYYY' } }); // Press "1"
       expectFieldValueV6(input, '01/DD/YYYY');
@@ -2251,15 +2246,15 @@ describe('<DateField /> - Editing', () => {
         input.blur();
       });
 
-      v6Response.setProps({ value: adapter.date('2022-11-23') });
+      view.setProps({ value: adapter.date('2022-11-23') });
       expectFieldValueV6(input, '11/23/2022');
 
+      fireEvent.mouseDown(input);
+      fireEvent.mouseUp(input);
       act(() => {
-        fireEvent.mouseDown(input);
-        fireEvent.mouseUp(input);
         input.setSelectionRange(6, 9);
-        fireEvent.click(input);
       });
+      fireEvent.click(input);
 
       fireEvent.change(input, { target: { value: '11/23/2' } }); // Press "2"
       expectFieldValueV6(input, '11/23/0002');
@@ -2271,26 +2266,26 @@ describe('<DateField /> - Editing', () => {
   describeAdapters('Select all', DateField, ({ renderWithProps }) => {
     it('should edit the 1st section when all sections are selected', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
-      v7Response.selectSection('month');
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
 
       // When all sections are selected, the value only contains the key pressed
-      v7Response.pressKey(null, '9');
+      view.pressKey(null, '9');
 
-      expectFieldValueV7(v7Response.getSectionsContainer(), '09/DD/YYYY');
+      expectFieldValueV7(view.getSectionsContainer(), '09/DD/YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
-      v6Response.selectSection('month');
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view.selectSection('month');
       const input = getTextbox();
 
       // Select all sections
-      userEvent.keyPress(input, { key: 'a', ctrlKey: true });
+      fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true });
 
       // When all sections are selected, the value only contains the key pressed
       fireEvent.change(input, { target: { value: '9' } });
diff --git a/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx
index f680275405ce..67c0df9d5edc 100644
--- a/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx
+++ b/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx
@@ -12,20 +12,20 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const { start: startChar, end: endChar } = adapter.escapedCharacters;
 
     // Test with v7 input
-    const v7Response = renderWithProps({
+    let view = renderWithProps({
       enableAccessibleFieldDOMStructure: true,
       // For Day.js: "[Escaped] YYYY"
       format: `${startChar}Escaped${endChar} ${adapter.formats.year}`,
     });
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'Escaped YYYY');
+    expectFieldValueV7(view.getSectionsContainer(), 'Escaped YYYY');
 
-    v7Response.setProps({ value: adapter.date('2019-01-01') });
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'Escaped 2019');
+    view.setProps({ value: adapter.date('2019-01-01') });
+    expectFieldValueV7(view.getSectionsContainer(), 'Escaped 2019');
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps({
+    view = renderWithProps({
       // For Day.js: "[Escaped] YYYY"
       format: `${startChar}Escaped${endChar} ${adapter.formats.year}`,
       enableAccessibleFieldDOMStructure: false,
@@ -33,7 +33,7 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const input = getTextbox();
     expectFieldPlaceholderV6(input, 'Escaped YYYY');
 
-    v6Response.setProps({ value: adapter.date('2019-01-01') });
+    view.setProps({ value: adapter.date('2019-01-01') });
     expectFieldValueV6(input, 'Escaped 2019');
   });
 
@@ -41,21 +41,21 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const { start: startChar, end: endChar } = adapter.escapedCharacters;
 
     // Test with v7 input
-    const v7Response = renderWithProps({
+    let view = renderWithProps({
       enableAccessibleFieldDOMStructure: true,
       // For Day.js: "MMMM [Escaped] YYYY"
       format: `${adapter.formats.month} ${startChar}Escaped${endChar} ${adapter.formats.year}`,
     });
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM Escaped YYYY');
+    expectFieldValueV7(view.getSectionsContainer(), 'MMMM Escaped YYYY');
 
-    v7Response.setProps({ value: adapter.date('2019-01-01') });
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'January Escaped 2019');
+    view.setProps({ value: adapter.date('2019-01-01') });
+    expectFieldValueV7(view.getSectionsContainer(), 'January Escaped 2019');
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps({
+    view = renderWithProps({
       // For Day.js: "MMMM [Escaped] YYYY"
       format: `${adapter.formats.month} ${startChar}Escaped${endChar} ${adapter.formats.year}`,
       enableAccessibleFieldDOMStructure: false,
@@ -64,7 +64,7 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const input = getTextbox();
     expectFieldPlaceholderV6(input, 'MMMM Escaped YYYY');
 
-    v6Response.setProps({ value: adapter.date('2019-01-01') });
+    view.setProps({ value: adapter.date('2019-01-01') });
     expectFieldValueV6(input, 'January Escaped 2019');
   });
 
@@ -77,21 +77,21 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     }
 
     // Test with v7 input
-    const v7Response = renderWithProps({
+    let view = renderWithProps({
       enableAccessibleFieldDOMStructure: true,
       // For Day.js: "MMMM [Escaped[] YYYY"
       format: `${adapter.formats.month} ${startChar}Escaped ${startChar}${endChar} ${adapter.formats.year}`,
     });
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM Escaped [ YYYY');
+    expectFieldValueV7(view.getSectionsContainer(), 'MMMM Escaped [ YYYY');
 
-    v7Response.setProps({ value: adapter.date('2019-01-01') });
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'January Escaped [ 2019');
+    view.setProps({ value: adapter.date('2019-01-01') });
+    expectFieldValueV7(view.getSectionsContainer(), 'January Escaped [ 2019');
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps({
+    view = renderWithProps({
       // For Day.js: "MMMM [Escaped[] YYYY"
       format: `${adapter.formats.month} ${startChar}Escaped ${startChar}${endChar} ${adapter.formats.year}`,
       enableAccessibleFieldDOMStructure: false,
@@ -100,7 +100,7 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const input = getTextbox();
     expectFieldPlaceholderV6(input, 'MMMM Escaped [ YYYY');
 
-    v6Response.setProps({ value: adapter.date('2019-01-01') });
+    view.setProps({ value: adapter.date('2019-01-01') });
     expectFieldValueV6(input, 'January Escaped [ 2019');
   });
 
@@ -108,21 +108,21 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const { start: startChar, end: endChar } = adapter.escapedCharacters;
 
     // Test with v7 input
-    const v7Response = renderWithProps({
+    let view = renderWithProps({
       enableAccessibleFieldDOMStructure: true,
       // For Day.js: "[Escaped] MMMM [Escaped] YYYY"
       format: `${startChar}Escaped${endChar} ${adapter.formats.month} ${startChar}Escaped${endChar} ${adapter.formats.year}`,
     });
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'Escaped MMMM Escaped YYYY');
+    expectFieldValueV7(view.getSectionsContainer(), 'Escaped MMMM Escaped YYYY');
 
-    v7Response.setProps({ value: adapter.date('2019-01-01') });
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'Escaped January Escaped 2019');
+    view.setProps({ value: adapter.date('2019-01-01') });
+    expectFieldValueV7(view.getSectionsContainer(), 'Escaped January Escaped 2019');
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps({
+    view = renderWithProps({
       // For Day.js: "[Escaped] MMMM [Escaped] YYYY"
       format: `${startChar}Escaped${endChar} ${adapter.formats.month} ${startChar}Escaped${endChar} ${adapter.formats.year}`,
       enableAccessibleFieldDOMStructure: false,
@@ -131,7 +131,7 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const input = getTextbox();
     expectFieldPlaceholderV6(input, 'Escaped MMMM Escaped YYYY');
 
-    v6Response.setProps({ value: adapter.date('2019-01-01') });
+    view.setProps({ value: adapter.date('2019-01-01') });
     expectFieldValueV6(input, 'Escaped January Escaped 2019');
   });
 
@@ -139,15 +139,15 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const { start: startChar, end: endChar } = adapter.escapedCharacters;
 
     // Test with v7 input
-    const v7Response = renderWithProps({
+    const view = renderWithProps({
       enableAccessibleFieldDOMStructure: true,
       // For Day.js: "[Escaped] [Escaped]"
       format: `${startChar}Escaped${endChar} ${startChar}Escaped${endChar}`,
     });
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'Escaped Escaped');
+    expectFieldValueV7(view.getSectionsContainer(), 'Escaped Escaped');
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
     renderWithProps({
@@ -161,30 +161,30 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
   });
 
   it('should support format without separators', () => {
-    const v7Response = renderWithProps({
+    const view = renderWithProps({
       enableAccessibleFieldDOMStructure: true,
       format: `${adapter.formats.dayOfMonth}${adapter.formats.monthShort}`,
     });
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'DDMMMM');
+    expectFieldValueV7(view.getSectionsContainer(), 'DDMMMM');
   });
 
   it('should add spaces around `/` when `formatDensity = "spacious"`', () => {
     // Test with v7 input
-    const v7Response = renderWithProps({
+    let view = renderWithProps({
       enableAccessibleFieldDOMStructure: true,
       formatDensity: `spacious`,
     });
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'MM / DD / YYYY');
+    expectFieldValueV7(view.getSectionsContainer(), 'MM / DD / YYYY');
 
-    v7Response.setProps({ value: adapter.date('2019-01-01') });
-    expectFieldValueV7(v7Response.getSectionsContainer(), '01 / 01 / 2019');
+    view.setProps({ value: adapter.date('2019-01-01') });
+    expectFieldValueV7(view.getSectionsContainer(), '01 / 01 / 2019');
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps({
+    view = renderWithProps({
       formatDensity: `spacious`,
       enableAccessibleFieldDOMStructure: false,
     });
@@ -192,27 +192,27 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const input = getTextbox();
     expectFieldPlaceholderV6(input, 'MM / DD / YYYY');
 
-    v6Response.setProps({ value: adapter.date('2019-01-01') });
+    view.setProps({ value: adapter.date('2019-01-01') });
     expectFieldValueV6(input, '01 / 01 / 2019');
   });
 
   it('should add spaces around `.` when `formatDensity = "spacious"`', () => {
     // Test with v7 input
-    const v7Response = renderWithProps({
+    let view = renderWithProps({
       enableAccessibleFieldDOMStructure: true,
       formatDensity: `spacious`,
       format: adapter.expandFormat(adapter.formats.keyboardDate).replace(/\//g, '.'),
     });
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'MM . DD . YYYY');
+    expectFieldValueV7(view.getSectionsContainer(), 'MM . DD . YYYY');
 
-    v7Response.setProps({ value: adapter.date('2019-01-01') });
-    expectFieldValueV7(v7Response.getSectionsContainer(), '01 . 01 . 2019');
+    view.setProps({ value: adapter.date('2019-01-01') });
+    expectFieldValueV7(view.getSectionsContainer(), '01 . 01 . 2019');
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps({
+    view = renderWithProps({
       formatDensity: `spacious`,
       format: adapter.expandFormat(adapter.formats.keyboardDate).replace(/\//g, '.'),
       enableAccessibleFieldDOMStructure: false,
@@ -221,27 +221,27 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const input = getTextbox();
     expectFieldPlaceholderV6(input, 'MM . DD . YYYY');
 
-    v6Response.setProps({ value: adapter.date('2019-01-01') });
+    view.setProps({ value: adapter.date('2019-01-01') });
     expectFieldValueV6(input, '01 . 01 . 2019');
   });
 
   it('should add spaces around `-` when `formatDensity = "spacious"`', () => {
     // Test with v7 input
-    const v7Response = renderWithProps({
+    let view = renderWithProps({
       enableAccessibleFieldDOMStructure: true,
       formatDensity: `spacious`,
       format: adapter.expandFormat(adapter.formats.keyboardDate).replace(/\//g, '-'),
     });
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'MM - DD - YYYY');
+    expectFieldValueV7(view.getSectionsContainer(), 'MM - DD - YYYY');
 
-    v7Response.setProps({ value: adapter.date('2019-01-01') });
-    expectFieldValueV7(v7Response.getSectionsContainer(), '01 - 01 - 2019');
+    view.setProps({ value: adapter.date('2019-01-01') });
+    expectFieldValueV7(view.getSectionsContainer(), '01 - 01 - 2019');
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps({
+    view = renderWithProps({
       formatDensity: `spacious`,
       format: adapter.expandFormat(adapter.formats.keyboardDate).replace(/\//g, '-'),
       enableAccessibleFieldDOMStructure: false,
@@ -250,7 +250,7 @@ describeAdapters('<DateField /> - Format', DateField, ({ adapter, renderWithProp
     const input = getTextbox();
     expectFieldPlaceholderV6(input, 'MM - DD - YYYY');
 
-    v6Response.setProps({ value: adapter.date('2019-01-01') });
+    view.setProps({ value: adapter.date('2019-01-01') });
     expectFieldValueV6(input, '01 - 01 - 2019');
   });
 });
diff --git a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx
index 4036ee7beaf6..e0b6a0114dd1 100644
--- a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx
+++ b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx
@@ -18,13 +18,13 @@ describe('<DateField /> - Selection', () => {
   describe('Focus', () => {
     it('should select 1st section (v7) / all sections (v6) on mount focus (`autoFocus = true`)', () => {
       // Text with v7 input
-      const v7Response = renderWithProps({
+      const view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         autoFocus: true,
       });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
+      expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
       expect(getCleanedSelectedContent()).to.equal('MM');
-      v7Response.unmount();
+      view.unmount();
 
       // Text with v6 input
       renderWithProps({ enableAccessibleFieldDOMStructure: false, autoFocus: true });
@@ -35,14 +35,14 @@ describe('<DateField /> - Selection', () => {
 
     it('should select 1st section (v7) / all sections (v6) (`autoFocus = true`) with start separator', () => {
       // Text with v7 input
-      const v7Response = renderWithProps({
+      const view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         autoFocus: true,
         format: `- ${adapterToUse.formats.year}`,
       });
-      expectFieldValueV7(v7Response.getSectionsContainer(), '- YYYY');
+      expectFieldValueV7(view.getSectionsContainer(), '- YYYY');
       expect(getCleanedSelectedContent()).to.equal('YYYY');
-      v7Response.unmount();
+      view.unmount();
 
       // Text with v6 input
       renderWithProps({
@@ -109,10 +109,10 @@ describe('<DateField /> - Selection', () => {
 
     it('should select day on desktop (v6 only)', () => {
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      const view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
 
       const input = getTextbox();
-      v6Response.selectSection('day');
+      view.selectSection('day');
 
       expectFieldValueV6(input, 'MM/DD/YYYY');
       expect(getCleanedSelectedContent()).to.equal('DD');
@@ -122,45 +122,45 @@ describe('<DateField /> - Selection', () => {
   describe('Click', () => {
     it('should select the clicked selection when the input is already focused', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
-      v7Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      v7Response.selectSection('month');
+      view.selectSection('month');
       expect(getCleanedSelectedContent()).to.equal('MM');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
 
-      v6Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      v6Response.selectSection('month');
+      view.selectSection('month');
       expect(getCleanedSelectedContent()).to.equal('MM');
     });
 
     it('should not change the selection when clicking on the only already selected section', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
 
-      v7Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      v7Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
 
-      v6Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
 
-      v6Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
     });
   });
@@ -168,40 +168,40 @@ describe('<DateField /> - Selection', () => {
   describe('key: Ctrl + A', () => {
     it('should select all sections', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
-      v7Response.selectSection('month');
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      view.selectSection('month');
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
       expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
       fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
       expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY');
     });
 
     it('should select all sections with start separator', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: `- ${adapterToUse.formats.year}`,
       });
-      v7Response.selectSection('year');
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      view.selectSection('year');
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
       expect(getCleanedSelectedContent()).to.equal('- YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: `- ${adapterToUse.formats.year}`,
       });
       const input = getTextbox();
-      v6Response.selectSection('year');
+      view.selectSection('year');
       fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
       expect(getCleanedSelectedContent()).to.equal('- YYYY');
     });
@@ -210,17 +210,17 @@ describe('<DateField /> - Selection', () => {
   describe('key: ArrowRight', () => {
     it('should move selection to the next section when one section is selected', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
-      v7Response.selectSection('day');
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
-      fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('YYYY');
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
       const input = getTextbox();
-      v6Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
       fireEvent.keyDown(input, { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('YYYY');
@@ -228,17 +228,17 @@ describe('<DateField /> - Selection', () => {
 
     it('should stay on the current section when the last section is selected', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
-      v7Response.selectSection('year');
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      view.selectSection('year');
       expect(getCleanedSelectedContent()).to.equal('YYYY');
-      fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('YYYY');
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
       const input = getTextbox();
-      v6Response.selectSection('year');
+      view.selectSection('year');
       expect(getCleanedSelectedContent()).to.equal('YYYY');
       fireEvent.keyDown(input, { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('YYYY');
@@ -246,22 +246,22 @@ describe('<DateField /> - Selection', () => {
 
     it('should select the last section when all the sections are selected', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
-      v7Response.selectSection('month');
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
       expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY');
 
-      fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getSectionsContainer(), { key: 'ArrowRight' });
       expect(getCleanedSelectedContent()).to.equal('YYYY');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
       fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
@@ -275,17 +275,17 @@ describe('<DateField /> - Selection', () => {
   describe('key: ArrowLeft', () => {
     it('should move selection to the previous section when one section is selected', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
-      v7Response.selectSection('day');
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
-      fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('MM');
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
       const input = getTextbox();
-      v6Response.selectSection('day');
+      view.selectSection('day');
       expect(getCleanedSelectedContent()).to.equal('DD');
       fireEvent.keyDown(input, { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('MM');
@@ -293,17 +293,17 @@ describe('<DateField /> - Selection', () => {
 
     it('should stay on the current section when the first section is selected', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
-      v7Response.selectSection('month');
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      view.selectSection('month');
       expect(getCleanedSelectedContent()).to.equal('MM');
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('MM');
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
       expect(getCleanedSelectedContent()).to.equal('MM');
       fireEvent.keyDown(input, { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('MM');
@@ -311,22 +311,22 @@ describe('<DateField /> - Selection', () => {
 
     it('should select the first section when all the sections are selected', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
-      v7Response.selectSection('month');
+      let view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      view.selectSection('month');
 
       // Select all sections
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
       expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY');
 
-      fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getSectionsContainer(), { key: 'ArrowLeft' });
       expect(getCleanedSelectedContent()).to.equal('MM');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false });
+      view = renderWithProps({ enableAccessibleFieldDOMStructure: false });
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
 
       // Select all sections
       fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
diff --git a/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx
index cd0885e18eef..2abe7bd407d2 100644
--- a/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx
+++ b/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx
@@ -26,15 +26,15 @@ describe('<DateTimeField /> - Editing', () => {
       const onChange = spy();
       const referenceDate = adapterToUse.date('2012-05-03T14:30:00');
 
-      const v7Response = renderWithProps({
+      const view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange,
         referenceDate,
         format: adapterToUse.formats.month,
       });
 
-      v7Response.selectSection('month');
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+      view.selectSection('month');
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' });
 
       // All sections not present should equal the one from the referenceDate, and the month should equal January (because it's an ArrowUp on an empty month).
       expect(onChange.lastCall.firstArg).toEqualDateTime(adapterToUse.setMonth(referenceDate, 0));
@@ -45,7 +45,7 @@ describe('<DateTimeField /> - Editing', () => {
       const value = adapterToUse.date('2018-11-03T22:15:00');
       const referenceDate = adapterToUse.date('2012-05-03T14:30:00');
 
-      const v7Response = renderWithProps({
+      const view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange,
         referenceDate,
@@ -53,8 +53,8 @@ describe('<DateTimeField /> - Editing', () => {
         format: adapterToUse.formats.month,
       });
 
-      v7Response.selectSection('month');
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+      view.selectSection('month');
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' });
 
       // Should equal the initial `value` prop with one less month.
       expect(onChange.lastCall.firstArg).toEqualDateTime(adapterToUse.setMonth(value, 11));
@@ -65,7 +65,7 @@ describe('<DateTimeField /> - Editing', () => {
       const defaultValue = adapterToUse.date('2018-11-03T22:15:00');
       const referenceDate = adapterToUse.date('2012-05-03T14:30:00');
 
-      const v7Response = renderWithProps({
+      const view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange,
         referenceDate,
@@ -73,8 +73,8 @@ describe('<DateTimeField /> - Editing', () => {
         format: adapterToUse.formats.month,
       });
 
-      v7Response.selectSection('month');
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+      view.selectSection('month');
+      fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' });
 
       // Should equal the initial `defaultValue` prop with one less month.
       expect(onChange.lastCall.firstArg).toEqualDateTime(adapterToUse.setMonth(defaultValue, 11));
@@ -84,14 +84,14 @@ describe('<DateTimeField /> - Editing', () => {
       it('should only keep year when granularity = month', () => {
         const onChange = spy();
 
-        const v7Response = renderWithProps({
+        const view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           onChange,
           format: adapterToUse.formats.month,
         });
 
-        v7Response.selectSection('month');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+        view.selectSection('month');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' });
 
         expect(onChange.lastCall.firstArg).toEqualDateTime('2012-01-01');
       });
@@ -99,14 +99,14 @@ describe('<DateTimeField /> - Editing', () => {
       it('should only keep year and month when granularity = day', () => {
         const onChange = spy();
 
-        const v7Response = renderWithProps({
+        const view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           onChange,
           format: adapterToUse.formats.dayOfMonth,
         });
 
-        v7Response.selectSection('day');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+        view.selectSection('day');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' });
 
         expect(onChange.lastCall.firstArg).toEqualDateTime('2012-05-01');
       });
@@ -114,20 +114,20 @@ describe('<DateTimeField /> - Editing', () => {
       it('should only keep up to the hours when granularity = minutes', () => {
         const onChange = spy();
 
-        const v7Response = renderWithProps({
+        const view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           onChange,
           format: adapterToUse.formats.fullTime24h,
         });
 
-        v7Response.selectSection('hours');
+        view.selectSection('hours');
 
         // Set hours
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' });
 
         // Set minutes
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowRight' });
-        fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowUp' });
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' });
+        fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowUp' });
 
         expect(onChange.lastCall.firstArg).toEqualDateTime('2012-05-03T00:00:00.000Z');
       });
@@ -138,15 +138,15 @@ describe('<DateTimeField /> - Editing', () => {
         const onChange = spy();
         const minDate = adapterToUse.date('2030-05-05T18:30:00');
 
-        const v7Response = renderWithProps({
+        const view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           onChange,
           minDate,
           format: adapterToUse.formats.month,
         });
 
-        v7Response.selectSection('month');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+        view.selectSection('month');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' });
 
         // Respect the granularity and the minDate
         expect(onChange.lastCall.firstArg).toEqualDateTime('2030-01-01T00:00');
@@ -156,15 +156,15 @@ describe('<DateTimeField /> - Editing', () => {
         const onChange = spy();
         const minDate = adapterToUse.date('2007-05-05T18:30:00');
 
-        const v7Response = renderWithProps({
+        const view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           onChange,
           minDate,
           format: adapterToUse.formats.month,
         });
 
-        v7Response.selectSection('month');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+        view.selectSection('month');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' });
 
         // Respect the granularity but not the minDate
         expect(onChange.lastCall.firstArg).toEqualDateTime('2012-01-01T00:00');
@@ -174,15 +174,15 @@ describe('<DateTimeField /> - Editing', () => {
         const onChange = spy();
         const maxDate = adapterToUse.date('2007-05-05T18:30:00');
 
-        const v7Response = renderWithProps({
+        const view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           onChange,
           maxDate,
           format: adapterToUse.formats.month,
         });
 
-        v7Response.selectSection('month');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+        view.selectSection('month');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' });
 
         // Respect the granularity and the minDate
         expect(onChange.lastCall.firstArg).toEqualDateTime('2007-01-01T00:00');
@@ -192,15 +192,15 @@ describe('<DateTimeField /> - Editing', () => {
         const onChange = spy();
         const maxDate = adapterToUse.date('2030-05-05T18:30:00');
 
-        const v7Response = renderWithProps({
+        const view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           onChange,
           maxDate,
           format: adapterToUse.formats.month,
         });
 
-        v7Response.selectSection('month');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+        view.selectSection('month');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' });
 
         // Respect the granularity but not the maxDate
         expect(onChange.lastCall.firstArg).toEqualDateTime('2012-01-01T00:00');
@@ -209,17 +209,17 @@ describe('<DateTimeField /> - Editing', () => {
   });
 
   it('should correctly update `value` when both `format` and `value` are changed', () => {
-    const v7Response = renderWithProps({
+    const view = renderWithProps({
       enableAccessibleFieldDOMStructure: true,
       value: null,
       format: 'P',
     });
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
+    expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
 
-    v7Response.setProps({
+    view.setProps({
       format: 'Pp',
       value: adapterToUse.date('2012-05-03T14:30:00'),
     });
-    expectFieldValueV7(v7Response.getSectionsContainer(), '05/03/2012, 02:30 PM');
+    expectFieldValueV7(view.getSectionsContainer(), '05/03/2012, 02:30 PM');
   });
 });
diff --git a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx
index 1cc3a46e7972..9ff18ca2bf5e 100644
--- a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx
+++ b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx
@@ -46,16 +46,16 @@ describe('<DateTimeField /> - Timezone', () => {
 
     it('should use default timezone for rendering and onChange when no value and no timezone prop are provided', () => {
       const onChange = spy();
-      const v7Response = renderWithProps({
+      const view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         onChange,
         format,
       });
 
-      const expectedDate = fillEmptyValue(v7Response, 'default');
+      const expectedDate = fillEmptyValue(view, 'default');
 
       // Check the rendered value (uses default timezone, e.g: UTC, see TZ env variable)
-      expectFieldValueV7(v7Response.getSectionsContainer(), '12/31/2022 23');
+      expectFieldValueV7(view.getSectionsContainer(), '12/31/2022 23');
 
       // Check the `onChange` value (uses default timezone, e.g: UTC, see TZ env variable)
       const actualDate = onChange.lastCall.firstArg;
@@ -70,16 +70,16 @@ describe('<DateTimeField /> - Timezone', () => {
       describe(`Timezone: ${timezone}`, () => {
         it('should use timezone prop for onChange and rendering when no value is provided', () => {
           const onChange = spy();
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             onChange,
             format,
             timezone,
           });
-          const expectedDate = fillEmptyValue(v7Response, timezone);
+          const expectedDate = fillEmptyValue(view, timezone);
 
           // Check the rendered value (uses timezone prop)
-          expectFieldValueV7(v7Response.getSectionsContainer(), '12/31/2022 23');
+          expectFieldValueV7(view.getSectionsContainer(), '12/31/2022 23');
 
           // Check the `onChange` value (uses timezone prop)
           const actualDate = onChange.lastCall.firstArg;
@@ -89,7 +89,7 @@ describe('<DateTimeField /> - Timezone', () => {
 
         it('should use timezone prop for rendering and value timezone for onChange when a value is provided', () => {
           const onChange = spy();
-          const v7Response = renderWithProps({
+          const view = renderWithProps({
             enableAccessibleFieldDOMStructure: true,
             value: adapter.date(undefined, timezone),
             onChange,
@@ -97,11 +97,11 @@ describe('<DateTimeField /> - Timezone', () => {
             timezone: 'America/Chicago',
           });
 
-          v7Response.selectSection('month');
-          fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowDown' });
+          view.selectSection('month');
+          fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowDown' });
 
           // Check the rendered value (uses America/Chicago timezone)
-          expectFieldValueV7(v7Response.getSectionsContainer(), '05/14/2022 19');
+          expectFieldValueV7(view.getSectionsContainer(), '05/14/2022 19');
 
           // Check the `onChange` value (uses timezone prop)
           const expectedDate = adapter.addMonths(adapter.date(undefined, timezone), -1);
@@ -125,16 +125,16 @@ describe('<DateTimeField /> - Timezone', () => {
     });
 
     it('should update the field when time zone changes (timestamp remains the same)', () => {
-      const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+      const view = renderWithProps({ enableAccessibleFieldDOMStructure: true });
 
       const date = adapter.date('2020-06-18T14:30:10.000Z').setZone('UTC');
-      v7Response.setProps({ value: date });
+      view.setProps({ value: date });
 
-      expectFieldValueV7(v7Response.getSectionsContainer(), '06/18/2020 02:30 PM');
+      expectFieldValueV7(view.getSectionsContainer(), '06/18/2020 02:30 PM');
 
-      v7Response.setProps({ value: date.setZone('America/Los_Angeles') });
+      view.setProps({ value: date.setZone('America/Los_Angeles') });
 
-      expectFieldValueV7(v7Response.getSectionsContainer(), '06/18/2020 07:30 AM');
+      expectFieldValueV7(view.getSectionsContainer(), '06/18/2020 07:30 AM');
     });
   });
 });
diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx
index b3ed68ab6851..4078e7548eb3 100644
--- a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx
@@ -3,9 +3,10 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import { TransitionProps } from '@mui/material/transitions';
 import { inputBaseClasses } from '@mui/material/InputBase';
-import { fireEvent, screen, userEvent } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { createPickerRenderer, adapterToUse, openPicker } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -46,7 +47,7 @@ describe('<DesktopDatePicker />', () => {
       expect(handleViewChange.callCount).to.equal(1);
 
       // Dismiss the picker
-      userEvent.keyPress(document.activeElement!, { key: 'Escape' });
+      fireUserEvent.keyPress(document.activeElement!, { key: 'Escape' });
 
       openPicker({ type: 'date', variant: 'desktop' });
       expect(handleViewChange.callCount).to.equal(2);
@@ -71,7 +72,7 @@ describe('<DesktopDatePicker />', () => {
       expect(handleViewChange.callCount).to.equal(1);
 
       // Dismiss the picker
-      userEvent.keyPress(document.activeElement!, { key: 'Escape' });
+      fireUserEvent.keyPress(document.activeElement!, { key: 'Escape' });
 
       openPicker({ type: 'date', variant: 'desktop' });
       expect(handleViewChange.callCount).to.equal(2);
@@ -88,7 +89,7 @@ describe('<DesktopDatePicker />', () => {
       expect(screen.getByRole('radio', { checked: true, name: '2018' })).not.to.equal(null);
 
       // Dismiss the picker
-      userEvent.keyPress(document.activeElement!, { key: 'Escape' });
+      fireUserEvent.keyPress(document.activeElement!, { key: 'Escape' });
       setProps({ views: ['month', 'year'] });
       openPicker({ type: 'date', variant: 'desktop' });
       // wait for all pending changes to be flushed
@@ -125,7 +126,7 @@ describe('<DesktopDatePicker />', () => {
       expect(screen.getByRole('radio', { checked: true, name: 'January' })).not.to.equal(null);
 
       // Dismiss the picker
-      userEvent.keyPress(document.activeElement!, { key: 'Escape' });
+      fireUserEvent.keyPress(document.activeElement!, { key: 'Escape' });
       setProps({ view: 'year' });
       openPicker({ type: 'date', variant: 'desktop' });
       // wait for all pending changes to be flushed
@@ -220,7 +221,7 @@ describe('<DesktopDatePicker />', () => {
 
       render(<DesktopDatePicker onOpen={onOpen} />);
 
-      userEvent.mousePress(screen.getByLabelText(/Choose date/));
+      fireUserEvent.mousePress(screen.getByLabelText(/Choose date/));
 
       expect(onOpen.callCount).to.equal(1);
       expect(screen.queryByRole('dialog')).toBeVisible();
@@ -244,14 +245,14 @@ describe('<DesktopDatePicker />', () => {
       openPicker({ type: 'date', variant: 'desktop' });
 
       // Select year
-      userEvent.mousePress(screen.getByRole('radio', { name: '2025' }));
+      fireUserEvent.mousePress(screen.getByRole('radio', { name: '2025' }));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2025, 0, 1));
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
 
       // Change the date (same value)
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '1' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '1' }));
       expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
       expect(onAccept.callCount).to.equal(1);
       expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2025, 0, 1));
diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx
index 0357d40ba542..782794ba18eb 100644
--- a/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -11,6 +11,7 @@ import {
 } from 'test/utils/pickers';
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DesktopDatePicker /> - Describes', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
@@ -62,7 +63,7 @@ describe('<DesktopDatePicker /> - Describes', () => {
       const newValue = applySameValue ? value : adapterToUse.addDays(value, 1);
 
       if (isOpened) {
-        userEvent.mousePress(
+        fireUserEvent.mousePress(
           screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }),
         );
       } else {
diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx
index 808dce9bbcf9..4ef2b7327fab 100644
--- a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx
@@ -25,7 +25,7 @@ describe('<DesktopDatePicker /> - Field', () => {
 
     it('should be able to reset a single section', () => {
       // Test with v7 input
-      const v7Response = renderWithProps(
+      let view = renderWithProps(
         {
           enableAccessibleFieldDOMStructure: true as const,
           format: `${adapterToUse.formats.month} ${adapterToUse.formats.dayOfMonth}`,
@@ -33,22 +33,22 @@ describe('<DesktopDatePicker /> - Field', () => {
         { componentFamily: 'picker' },
       );
 
-      v7Response.selectSection('month');
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM DD');
+      view.selectSection('month');
+      expectFieldValueV7(view.getSectionsContainer(), 'MMMM DD');
 
-      v7Response.pressKey(0, 'N');
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'November DD');
+      view.pressKey(0, 'N');
+      expectFieldValueV7(view.getSectionsContainer(), 'November DD');
 
-      v7Response.pressKey(1, '4');
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'November 04');
+      view.pressKey(1, '4');
+      expectFieldValueV7(view.getSectionsContainer(), 'November 04');
 
-      v7Response.pressKey(1, '');
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'November DD');
+      view.pressKey(1, '');
+      expectFieldValueV7(view.getSectionsContainer(), 'November DD');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps(
+      view = renderWithProps(
         {
           enableAccessibleFieldDOMStructure: false as const,
           format: `${adapterToUse.formats.month} ${adapterToUse.formats.dayOfMonth}`,
@@ -57,7 +57,7 @@ describe('<DesktopDatePicker /> - Field', () => {
       );
 
       const input = getTextbox();
-      v6Response.selectSection('month');
+      view.selectSection('month');
       expectFieldPlaceholderV6(input, 'MMMM DD');
 
       fireEvent.change(input, { target: { value: 'N DD' } }); // Press "N"
@@ -73,21 +73,21 @@ describe('<DesktopDatePicker /> - Field', () => {
     it('should adapt the default field format based on the props of the picker', () => {
       const testFormat = (props: DesktopDatePickerProps<any, any>, expectedFormat: string) => {
         // Test with v7 input
-        const v7Response = renderWithProps(
+        let view = renderWithProps(
           { ...props, enableAccessibleFieldDOMStructure: true as const },
           { componentFamily: 'picker' },
         );
-        expectFieldValueV7(v7Response.getSectionsContainer(), expectedFormat);
-        v7Response.unmount();
+        expectFieldValueV7(view.getSectionsContainer(), expectedFormat);
+        view.unmount();
 
         // Test with v6 input
-        const v6Response = renderWithProps(
+        view = renderWithProps(
           { ...props, enableAccessibleFieldDOMStructure: false as const },
           { componentFamily: 'picker' },
         );
         const input = getTextbox();
         expectFieldPlaceholderV6(input, expectedFormat);
-        v6Response.unmount();
+        view.unmount();
       };
 
       testFormat({ views: ['year'] }, 'YYYY');
@@ -171,7 +171,7 @@ describe('<DesktopDatePicker /> - Field', () => {
 
   describeAdapters('Timezone', DesktopDatePicker, ({ adapter, renderWithProps }) => {
     it('should clear the selected section when all sections are completed when using timezones', () => {
-      const v7Response = renderWithProps(
+      const view = renderWithProps(
         {
           enableAccessibleFieldDOMStructure: true as const,
           value: adapter.date()!,
@@ -181,11 +181,11 @@ describe('<DesktopDatePicker /> - Field', () => {
         { componentFamily: 'picker' },
       );
 
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'June 2022');
-      v7Response.selectSection('month');
+      expectFieldValueV7(view.getSectionsContainer(), 'June 2022');
+      view.selectSection('month');
 
-      v7Response.pressKey(0, '');
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM 2022');
+      view.pressKey(0, '');
+      expectFieldValueV7(view.getSectionsContainer(), 'MMMM 2022');
     });
   });
 });
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx
index ade01ebb4a70..fbaa72781475 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
 import { adapterToUse, createPickerRenderer, openPicker } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DesktopDateTimePicker />', () => {
   const { render } = createPickerRenderer({
@@ -17,7 +18,7 @@ describe('<DesktopDateTimePicker />', () => {
 
       render(<DesktopDateTimePicker onOpen={onOpen} defaultValue={null} />);
 
-      userEvent.mousePress(screen.getByLabelText(/Choose date/));
+      fireUserEvent.mousePress(screen.getByLabelText(/Choose date/));
 
       expect(onOpen.callCount).to.equal(1);
       expect(screen.queryByRole('dialog')).toBeVisible();
@@ -41,23 +42,23 @@ describe('<DesktopDateTimePicker />', () => {
       openPicker({ type: 'date-time', variant: 'desktop' });
 
       // Select year
-      userEvent.mousePress(screen.getByRole('radio', { name: '2025' }));
+      fireUserEvent.mousePress(screen.getByRole('radio', { name: '2025' }));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2025, 0, 1, 11, 55));
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
 
       // Change the date (same value)
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '1' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '1' }));
       expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
       // Change the hours (same value)
-      userEvent.mousePress(screen.getByRole('option', { name: '11 hours' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '11 hours' }));
       expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
       // Change the minutes (same value)
-      userEvent.mousePress(screen.getByRole('option', { name: '55 minutes' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '55 minutes' }));
       expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
       // Change the meridiem (same value)
-      userEvent.mousePress(screen.getByRole('option', { name: 'AM' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: 'AM' }));
       expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
       expect(onAccept.callCount).to.equal(1);
       expect(onClose.callCount).to.equal(1);
@@ -81,26 +82,26 @@ describe('<DesktopDateTimePicker />', () => {
     openPicker({ type: 'date-time', variant: 'desktop' });
 
     // Change the date multiple times to check that picker doesn't close after cycling through all views internally
-    userEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
-    userEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
-    userEvent.mousePress(screen.getByRole('gridcell', { name: '4' }));
-    userEvent.mousePress(screen.getByRole('gridcell', { name: '5' }));
+    fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
+    fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' }));
+    fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '4' }));
+    fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '5' }));
     expect(onChange.callCount).to.equal(4);
     expect(onAccept.callCount).to.equal(0);
     expect(onClose.callCount).to.equal(0);
 
     // Change the hours
-    userEvent.mousePress(screen.getByRole('option', { name: '10 hours' }));
-    userEvent.mousePress(screen.getByRole('option', { name: '9 hours' }));
+    fireUserEvent.mousePress(screen.getByRole('option', { name: '10 hours' }));
+    fireUserEvent.mousePress(screen.getByRole('option', { name: '9 hours' }));
     expect(onChange.callCount).to.equal(6);
     expect(onAccept.callCount).to.equal(0);
     expect(onClose.callCount).to.equal(0);
 
     // Change the minutes
-    userEvent.mousePress(screen.getByRole('option', { name: '50 minutes' }));
+    fireUserEvent.mousePress(screen.getByRole('option', { name: '50 minutes' }));
     expect(onChange.callCount).to.equal(7);
     // Change the meridiem
-    userEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
+    fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
     expect(onChange.callCount).to.equal(8);
     expect(onAccept.callCount).to.equal(1);
     expect(onClose.callCount).to.equal(1);
@@ -118,10 +119,10 @@ describe('<DesktopDateTimePicker />', () => {
         />,
       );
 
-      userEvent.mousePress(screen.getByLabelText(/Choose date/));
+      fireUserEvent.mousePress(screen.getByLabelText(/Choose date/));
 
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
-      userEvent.mousePress(screen.getByRole('option', { name: '03:00 AM' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '03:00 AM' }));
 
       expect(onChange.callCount).to.equal(2);
       expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 2, 3, 0, 0));
@@ -139,9 +140,9 @@ describe('<DesktopDateTimePicker />', () => {
         />,
       );
 
-      userEvent.mousePress(screen.getByLabelText(/Choose date/));
+      fireUserEvent.mousePress(screen.getByLabelText(/Choose date/));
 
-      userEvent.mousePress(screen.getByRole('option', { name: '03:00 AM' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '03:00 AM' }));
 
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 3, 0, 0));
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx
index 04ba5bf60006..dc66bec63c58 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx
@@ -1,4 +1,4 @@
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -12,6 +12,7 @@ import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker
 import { expect } from 'chai';
 import * as React from 'react';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DesktopDateTimePicker /> - Describes', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
@@ -84,20 +85,22 @@ describe('<DesktopDateTimePicker /> - Describes', () => {
         : adapterToUse.addMinutes(adapterToUse.addHours(adapterToUse.addDays(value, 1), 1), 5);
 
       if (isOpened) {
-        userEvent.mousePress(
+        fireUserEvent.mousePress(
           screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }),
         );
         const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale();
         const hours = adapterToUse.format(newValue, hasMeridiem ? 'hours12h' : 'hours24h');
         const hoursNumber = adapterToUse.getHours(newValue);
-        userEvent.mousePress(screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }));
-        userEvent.mousePress(
+        fireUserEvent.mousePress(
+          screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }),
+        );
+        fireUserEvent.mousePress(
           screen.getByRole('option', { name: `${adapterToUse.getMinutes(newValue)} minutes` }),
         );
         if (hasMeridiem) {
           // meridiem is an extra view on `DesktopDateTimePicker`
           // we need to click it to finish selection
-          userEvent.mousePress(
+          fireUserEvent.mousePress(
             screen.getByRole('option', { name: hoursNumber >= 12 ? 'PM' : 'AM' }),
           );
         }
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx
index 3a951470e5f3..54877db6fa12 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx
@@ -19,35 +19,35 @@ describe('<DesktopDateTimePicker /> - Field', () => {
   });
 
   it('should pass the ampm prop to the field', () => {
-    const v7Response = renderWithProps({
+    const view = renderWithProps({
       enableAccessibleFieldDOMStructure: true as const,
       ampm: true,
     });
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY hh:mm aa');
+    expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY hh:mm aa');
 
-    v7Response.setProps({ ampm: false });
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY hh:mm');
+    view.setProps({ ampm: false });
+    expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY hh:mm');
   });
 
   it('should adapt the default field format based on the props of the picker', () => {
     const testFormat = (props: DesktopDateTimePickerProps<any, any>, expectedFormat: string) => {
       // Test with v7 input
-      const v7Response = renderWithProps(
+      let view = renderWithProps(
         { ...props, enableAccessibleFieldDOMStructure: true as const },
         { componentFamily: 'picker' },
       );
-      expectFieldValueV7(v7Response.getSectionsContainer(), expectedFormat);
-      v7Response.unmount();
+      expectFieldValueV7(view.getSectionsContainer(), expectedFormat);
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps(
+      view = renderWithProps(
         { ...props, enableAccessibleFieldDOMStructure: false as const },
         { componentFamily: 'picker' },
       );
       const input = getTextbox();
       expectFieldPlaceholderV6(input, expectedFormat);
-      v6Response.unmount();
+      view.unmount();
     };
 
     testFormat({ views: ['day', 'hours', 'minutes'], ampm: false }, 'DD hh:mm');
diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx
index b520cad77727..b60fa37d20fb 100644
--- a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
 import { createPickerRenderer, openPicker } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DesktopTimePicker />', () => {
   const { render } = createPickerRenderer({
@@ -76,7 +77,7 @@ describe('<DesktopTimePicker />', () => {
 
       openPicker({ type: 'time', variant: 'desktop' });
 
-      userEvent.mousePress(screen.getByRole('option', { name: '09:00 AM' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '09:00 AM' }));
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 9, 0));
       expect(onAccept.callCount).to.equal(1);
@@ -93,17 +94,17 @@ describe('<DesktopTimePicker />', () => {
 
       openPicker({ type: 'time', variant: 'desktop' });
 
-      userEvent.mousePress(screen.getByRole('option', { name: '2 hours' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '2 hours' }));
       expect(onChange.callCount).to.equal(1);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
 
-      userEvent.mousePress(screen.getByRole('option', { name: '15 minutes' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '15 minutes' }));
       expect(onChange.callCount).to.equal(2);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
 
-      userEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
       expect(onChange.callCount).to.equal(3);
       expect(onAccept.callCount).to.equal(1);
       expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 14, 15));
@@ -119,22 +120,22 @@ describe('<DesktopTimePicker />', () => {
 
       openPicker({ type: 'time', variant: 'desktop' });
 
-      userEvent.mousePress(screen.getByRole('option', { name: '15 minutes' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '15 minutes' }));
       expect(onChange.callCount).to.equal(1);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
 
-      userEvent.mousePress(screen.getByRole('option', { name: '2 hours' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '2 hours' }));
       expect(onChange.callCount).to.equal(2);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
 
-      userEvent.mousePress(screen.getByRole('option', { name: '25 minutes' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '25 minutes' }));
       expect(onChange.callCount).to.equal(3);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
 
-      userEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
       expect(onChange.callCount).to.equal(4);
       expect(onAccept.callCount).to.equal(1);
       expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 14, 25));
@@ -150,7 +151,7 @@ describe('<DesktopTimePicker />', () => {
 
       openPicker({ type: 'time', variant: 'desktop' });
 
-      userEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
       expect(onChange.callCount).to.equal(1);
       expect(onAccept.callCount).to.equal(1);
       expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 12, 0));
diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx
index 3b6e6eb28868..2fe4730f6fd1 100644
--- a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -12,6 +12,7 @@ import {
 } from 'test/utils/pickers';
 import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DesktopTimePicker /> - Describes', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
@@ -76,14 +77,16 @@ describe('<DesktopTimePicker /> - Describes', () => {
         const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale();
         const hours = adapterToUse.format(newValue, hasMeridiem ? 'hours12h' : 'hours24h');
         const hoursNumber = adapterToUse.getHours(newValue);
-        userEvent.mousePress(screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }));
-        userEvent.mousePress(
+        fireUserEvent.mousePress(
+          screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }),
+        );
+        fireUserEvent.mousePress(
           screen.getByRole('option', { name: `${adapterToUse.getMinutes(newValue)} minutes` }),
         );
         if (hasMeridiem) {
           // meridiem is an extra view on `DesktopTimePicker`
           // we need to click it to finish selection
-          userEvent.mousePress(
+          fireUserEvent.mousePress(
             screen.getByRole('option', { name: hoursNumber >= 12 ? 'PM' : 'AM' }),
           );
         }
diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx
index 10d1848a5fe3..88c95f981503 100644
--- a/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx
@@ -16,35 +16,35 @@ describe('<DesktopTimePicker /> - Field', () => {
   });
 
   it('should pass the ampm prop to the field', () => {
-    const v7Response = renderWithProps(
+    const view = renderWithProps(
       { enableAccessibleFieldDOMStructure: true as const, ampm: true },
       { componentFamily: 'picker' },
     );
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'hh:mm aa');
+    expectFieldValueV7(view.getSectionsContainer(), 'hh:mm aa');
 
-    v7Response.setProps({ ampm: false });
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'hh:mm');
+    view.setProps({ ampm: false });
+    expectFieldValueV7(view.getSectionsContainer(), 'hh:mm');
   });
 
   it('should adapt the default field format based on the props of the picker', () => {
     const testFormat = (props: DesktopTimePickerProps<any, any>, expectedFormat: string) => {
       // Test with v7 input
-      const v7Response = renderWithProps(
+      let view = renderWithProps(
         { ...props, enableAccessibleFieldDOMStructure: true as const },
         { componentFamily: 'picker' },
       );
-      expectFieldValueV7(v7Response.getSectionsContainer(), expectedFormat);
-      v7Response.unmount();
+      expectFieldValueV7(view.getSectionsContainer(), expectedFormat);
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps(
+      view = renderWithProps(
         { ...props, enableAccessibleFieldDOMStructure: false as const },
         { componentFamily: 'picker' },
       );
       const input = getTextbox();
       expectFieldPlaceholderV6(input, expectedFormat);
-      v6Response.unmount();
+      view.unmount();
     };
 
     testFormat({ views: ['hours'], ampm: false }, 'hh');
diff --git a/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx b/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx
index 4f6617cc90c6..96fb9bd96fa6 100644
--- a/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx
+++ b/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx
@@ -93,16 +93,15 @@ describe('<DigitalClock />', () => {
   });
 
   it('forwards list class to MenuList', () => {
-    const { getByRole } = render(<DigitalClock classes={{ list: 'foo' }} />);
+    render(<DigitalClock classes={{ list: 'foo' }} />);
 
-    const list = getByRole('listbox');
-    expect(list).to.have.class('foo');
+    expect(screen.getByRole('listbox')).to.have.class('foo');
   });
 
   it('forwards item class to clock item', () => {
-    const { getAllByRole } = render(<DigitalClock classes={{ item: 'bar' }} />);
+    render(<DigitalClock classes={{ item: 'bar' }} />);
 
-    const options = getAllByRole('option');
+    const options = screen.getAllByRole('option');
     expect(options[0]).to.have.class('bar');
   });
 });
diff --git a/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx b/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx
index 9dc25d08aef5..070c9b9243f5 100644
--- a/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx
+++ b/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { spy } from 'sinon';
 import { expect } from 'chai';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
 import { getDateOffset, describeAdapters } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 const TIMEZONE_TO_TEST = ['UTC', 'system', 'America/New_York'];
 
@@ -25,7 +26,7 @@ describe('<DigitalClock /> - Timezone', () => {
       const onChange = spy();
       render(<DigitalClock onChange={onChange} />);
 
-      userEvent.mousePress(screen.getByRole('option', { name: '08:00 AM' }));
+      fireUserEvent.mousePress(screen.getByRole('option', { name: '08:00 AM' }));
 
       const expectedDate = adapter.setHours(adapter.date(), 8);
 
@@ -44,7 +45,7 @@ describe('<DigitalClock /> - Timezone', () => {
           const onChange = spy();
           render(<DigitalClock onChange={onChange} timezone={timezone} />);
 
-          userEvent.mousePress(screen.getByRole('option', { name: '08:00 AM' }));
+          fireUserEvent.mousePress(screen.getByRole('option', { name: '08:00 AM' }));
 
           const expectedDate = adapter.setHours(
             adapter.startOfDay(adapter.date(undefined, timezone)),
@@ -75,7 +76,7 @@ describe('<DigitalClock /> - Timezone', () => {
             (adapter.getHours(value) + offsetDiff / 60 + 24) % 24,
           );
 
-          userEvent.mousePress(screen.getByRole('option', { name: '08:30 PM' }));
+          fireUserEvent.mousePress(screen.getByRole('option', { name: '08:30 PM' }));
 
           const actualDate = onChange.lastCall.firstArg;
 
diff --git a/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx b/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx
index 1095449d3312..3dc67b806538 100644
--- a/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { fireEvent, screen, userEvent } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
 import { PickersDay } from '@mui/x-date-pickers/PickersDay';
 import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';
 import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
@@ -13,6 +13,7 @@ import {
   openPicker,
   getFieldSectionsContainer,
 } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<MobileDatePicker />', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
@@ -155,7 +156,7 @@ describe('<MobileDatePicker />', () => {
 
       render(<MobileDatePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />);
 
-      userEvent.mousePress(getFieldSectionsContainer());
+      fireUserEvent.mousePress(getFieldSectionsContainer());
 
       expect(onOpen.callCount).to.equal(1);
       expect(screen.queryByRole('dialog')).toBeVisible();
@@ -188,17 +189,17 @@ describe('<MobileDatePicker />', () => {
     });
 
     it('should update internal state when controlled value is updated', () => {
-      const v7Response = renderWithProps({
+      const view = renderWithProps({
         enableAccessibleFieldDOMStructure: true as const,
         value: adapterToUse.date('2019-01-01'),
       });
 
       // Set a date
-      expectFieldValueV7(v7Response.getSectionsContainer(), '01/01/2019');
+      expectFieldValueV7(view.getSectionsContainer(), '01/01/2019');
 
       // Clean value using external control
-      v7Response.setProps({ value: null });
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
+      view.setProps({ value: null });
+      expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
 
       // Open and Dismiss the picker
       openPicker({ type: 'date', variant: 'mobile' });
@@ -207,7 +208,7 @@ describe('<MobileDatePicker />', () => {
       clock.runToLast();
 
       // Verify it's still a clean value
-      expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY');
+      expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY');
     });
   });
 });
diff --git a/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx b/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx
index 5dfe64dc6e89..b988c49e5827 100644
--- a/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { screen, userEvent, fireEvent } from '@mui/internal-test-utils';
+import { screen, fireEvent } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -12,6 +12,7 @@ import {
 } from 'test/utils/pickers';
 import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<MobileDatePicker /> - Describes', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
@@ -64,7 +65,7 @@ describe('<MobileDatePicker /> - Describes', () => {
       }
 
       const newValue = applySameValue ? value : adapterToUse.addDays(value, 1);
-      userEvent.mousePress(
+      fireUserEvent.mousePress(
         screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }),
       );
 
diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx
index ad9c3641efbb..34849b1b5dc0 100644
--- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { fireTouchChangedEvent, screen, userEvent } from '@mui/internal-test-utils';
+import { fireTouchChangedEvent, screen } from '@mui/internal-test-utils';
 import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
 import {
   adapterToUse,
@@ -10,6 +10,7 @@ import {
   getClockTouchEvent,
   getFieldSectionsContainer,
 } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<MobileDateTimePicker />', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
@@ -98,7 +99,7 @@ describe('<MobileDateTimePicker />', () => {
 
       render(<MobileDateTimePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />);
 
-      userEvent.mousePress(getFieldSectionsContainer());
+      fireUserEvent.mousePress(getFieldSectionsContainer());
 
       expect(onOpen.callCount).to.equal(1);
       expect(screen.queryByRole('dialog')).toBeVisible();
@@ -131,8 +132,8 @@ describe('<MobileDateTimePicker />', () => {
       expect(onClose.callCount).to.equal(0);
 
       // Change the year view
-      userEvent.mousePress(screen.getByLabelText(/switch to year view/));
-      userEvent.mousePress(screen.getByText('2010', { selector: 'button' }));
+      fireUserEvent.mousePress(screen.getByLabelText(/switch to year view/));
+      fireUserEvent.mousePress(screen.getByText('2010', { selector: 'button' }));
 
       expect(onChange.callCount).to.equal(1);
       expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2010, 0, 1));
@@ -140,7 +141,7 @@ describe('<MobileDateTimePicker />', () => {
       clock.runToLast();
 
       // Change the date
-      userEvent.mousePress(screen.getByRole('gridcell', { name: '15' }));
+      fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '15' }));
       expect(onChange.callCount).to.equal(2);
       expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2010, 0, 15));
 
diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx
index 4d1d819ad773..7db743bb1c2e 100644
--- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { screen, userEvent, fireEvent, fireTouchChangedEvent } from '@mui/internal-test-utils';
+import { screen, fireEvent, fireTouchChangedEvent } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -13,6 +13,7 @@ import {
 } from 'test/utils/pickers';
 import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<MobileDateTimePicker /> - Describes', () => {
   const { render, clock } = createPickerRenderer({
@@ -78,7 +79,7 @@ describe('<MobileDateTimePicker /> - Describes', () => {
       const newValue = applySameValue
         ? value
         : adapterToUse.addMinutes(adapterToUse.addHours(adapterToUse.addDays(value, 1), 1), 5);
-      userEvent.mousePress(
+      fireUserEvent.mousePress(
         screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }),
       );
       const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale();
@@ -97,7 +98,9 @@ describe('<MobileDateTimePicker /> - Describes', () => {
       if (hasMeridiem) {
         const newHours = adapterToUse.getHours(newValue);
         // select appropriate meridiem
-        userEvent.mousePress(screen.getByRole('button', { name: newHours >= 12 ? 'PM' : 'AM' }));
+        fireUserEvent.mousePress(
+          screen.getByRole('button', { name: newHours >= 12 ? 'PM' : 'AM' }),
+        );
       }
 
       // Close the picker
@@ -107,7 +110,7 @@ describe('<MobileDateTimePicker /> - Describes', () => {
         clock.runToLast();
       } else {
         // return to the date view in case we'd like to repeat the selection process
-        userEvent.mousePress(screen.getByRole('tab', { name: 'pick date' }));
+        fireUserEvent.mousePress(screen.getByRole('tab', { name: 'pick date' }));
       }
 
       return newValue;
diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx
index 2a8aae0ea83c..413a025f2002 100644
--- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx
@@ -14,14 +14,14 @@ describe('<MobileDateTimePicker /> - Field', () => {
   });
 
   it('should pass the ampm prop to the field', () => {
-    const v7Response = renderWithProps({
+    const view = renderWithProps({
       enableAccessibleFieldDOMStructure: true as const,
       ampm: true,
     });
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY hh:mm aa');
+    expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY hh:mm aa');
 
-    v7Response.setProps({ ampm: false });
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY hh:mm');
+    view.setProps({ ampm: false });
+    expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY hh:mm');
   });
 });
diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
index 5bf9dade08f8..16e28b5b3c29 100644
--- a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { spy } from 'sinon';
 import { expect } from 'chai';
-import { fireTouchChangedEvent, screen, userEvent, act } from '@mui/internal-test-utils';
+import { fireTouchChangedEvent, screen, act } from '@mui/internal-test-utils';
 import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
 import {
   createPickerRenderer,
@@ -10,6 +10,7 @@ import {
   getClockTouchEvent,
   getFieldSectionsContainer,
 } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<MobileTimePicker />', () => {
   const { render } = createPickerRenderer({ clock: 'fake' });
@@ -20,7 +21,7 @@ describe('<MobileTimePicker />', () => {
 
       render(<MobileTimePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />);
 
-      userEvent.mousePress(getFieldSectionsContainer());
+      fireUserEvent.mousePress(getFieldSectionsContainer());
 
       expect(onOpen.callCount).to.equal(1);
       expect(screen.queryByRole('dialog')).toBeVisible();
diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx
index 79b4c2029072..8a694129a784 100644
--- a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { screen, fireEvent, userEvent, fireTouchChangedEvent } from '@mui/internal-test-utils';
+import { screen, fireEvent, fireTouchChangedEvent } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -14,6 +14,7 @@ import {
 } from 'test/utils/pickers';
 import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<MobileTimePicker /> - Describes', () => {
   const { render, clock } = createPickerRenderer({
@@ -92,7 +93,9 @@ describe('<MobileTimePicker /> - Describes', () => {
       if (hasMeridiem) {
         const newHours = adapterToUse.getHours(newValue);
         // select appropriate meridiem
-        userEvent.mousePress(screen.getByRole('button', { name: newHours >= 12 ? 'PM' : 'AM' }));
+        fireUserEvent.mousePress(
+          screen.getByRole('button', { name: newHours >= 12 ? 'PM' : 'AM' }),
+        );
       }
 
       // Close the picker
@@ -102,7 +105,7 @@ describe('<MobileTimePicker /> - Describes', () => {
         clock.runToLast();
       } else {
         // return to the hours view in case we'd like to repeat the selection process
-        userEvent.mousePress(screen.getByRole('button', { name: 'Open previous view' }));
+        fireUserEvent.mousePress(screen.getByRole('button', { name: 'Open previous view' }));
       }
 
       return newValue;
diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx
index 206189acc74a..befd20099764 100644
--- a/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx
@@ -14,14 +14,14 @@ describe('<MobileTimePicker /> - Field', () => {
   });
 
   it('should pass the ampm prop to the field', () => {
-    const v7Response = renderWithProps(
+    const view = renderWithProps(
       { enableAccessibleFieldDOMStructure: true as const, ampm: true },
       { componentFamily: 'picker' },
     );
 
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'hh:mm aa');
+    expectFieldValueV7(view.getSectionsContainer(), 'hh:mm aa');
 
-    v7Response.setProps({ ampm: false });
-    expectFieldValueV7(v7Response.getSectionsContainer(), 'hh:mm');
+    view.setProps({ ampm: false });
+    expectFieldValueV7(view.getSectionsContainer(), 'hh:mm');
   });
 });
diff --git a/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx b/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx
index f439b851f2c3..ef370265decd 100644
--- a/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx
+++ b/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { userEvent, screen } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -9,6 +9,7 @@ import {
 } from 'test/utils/pickers';
 import { MonthCalendar, monthCalendarClasses as classes } from '@mui/x-date-pickers/MonthCalendar';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<MonthCalendar /> - Describes', () => {
   const { render, clock } = createPickerRenderer({ clock: 'fake' });
@@ -54,7 +55,7 @@ describe('<MonthCalendar /> - Describes', () => {
     setNewValue: (value) => {
       const newValue = adapterToUse.addMonths(value, 1);
 
-      userEvent.mousePress(
+      fireUserEvent.mousePress(
         screen.getByRole('radio', { name: adapterToUse.format(newValue, 'month') }),
       );
 
diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx
index c4837e507ce7..465baad26cee 100644
--- a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx
+++ b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { PickersActionBar } from '@mui/x-date-pickers/PickersActionBar';
 import { createPickerRenderer } from 'test/utils/pickers';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<PickersActionBar />', () => {
   const { render } = createPickerRenderer({
@@ -44,7 +45,7 @@ describe('<PickersActionBar />', () => {
       />,
     );
 
-    userEvent.mousePress(screen.getByText(/clear/i));
+    fireUserEvent.mousePress(screen.getByText(/clear/i));
     expect(onClear.callCount).to.equal(1);
   });
 
@@ -64,7 +65,7 @@ describe('<PickersActionBar />', () => {
       />,
     );
 
-    userEvent.mousePress(screen.getByText(/cancel/i));
+    fireUserEvent.mousePress(screen.getByText(/cancel/i));
     expect(onCancel.callCount).to.equal(1);
   });
 
@@ -84,7 +85,7 @@ describe('<PickersActionBar />', () => {
       />,
     );
 
-    userEvent.mousePress(screen.getByText(/ok/i));
+    fireUserEvent.mousePress(screen.getByText(/ok/i));
     expect(onAccept.callCount).to.equal(1);
   });
 
@@ -104,7 +105,7 @@ describe('<PickersActionBar />', () => {
       />,
     );
 
-    userEvent.mousePress(screen.getByText(/today/i));
+    fireUserEvent.mousePress(screen.getByText(/today/i));
     expect(onSetToday.callCount).to.equal(1);
   });
 
diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx
index 8e2e37371b5d..f5a04623b4af 100644
--- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { fireTouchChangedEvent, screen, getAllByRole, fireEvent } from '@mui/internal-test-utils';
+import { fireTouchChangedEvent, screen, within, fireEvent } from '@mui/internal-test-utils';
 import { adapterToUse, createPickerRenderer, describeValidation } from 'test/utils/pickers';
 import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
 import { describeConformance } from 'test/utils/describeConformance';
@@ -78,7 +78,7 @@ describe('<StaticTimePicker />', () => {
 
     // hours are not disabled
     const hoursContainer = screen.getByRole('listbox');
-    const hours = getAllByRole(hoursContainer, 'option');
+    const hours = within(hoursContainer).getAllByRole('option');
     const disabledHours = hours.filter((day) => day.getAttribute('aria-disabled') === 'true');
 
     expect(hours.length).to.equal(12);
@@ -128,7 +128,7 @@ describe('<StaticTimePicker />', () => {
 
     // hours are disabled
     const hoursContainer = screen.getByRole('listbox');
-    const hours = getAllByRole(hoursContainer, 'option');
+    const hours = within(hoursContainer).getAllByRole('option');
     const disabledHours = hours.filter((hour) => hour.getAttribute('aria-disabled') === 'true');
     expect(hours.length).to.equal(12);
     expect(disabledHours.length).to.equal(12);
diff --git a/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx b/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx
index 36bfb4c6597b..5ecc40f8b19c 100644
--- a/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx
+++ b/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx
@@ -1,13 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import {
-  fireEvent,
-  fireTouchChangedEvent,
-  screen,
-  within,
-  getAllByRole,
-} from '@mui/internal-test-utils';
+import { fireEvent, fireTouchChangedEvent, screen, within } from '@mui/internal-test-utils';
 import { TimeClock } from '@mui/x-date-pickers/TimeClock';
 import { createPickerRenderer, adapterToUse, timeClockHandler } from 'test/utils/pickers';
 
@@ -166,7 +160,7 @@ describe('<TimeClock />', () => {
 
     // hours are not disabled
     const hoursContainer = screen.getByRole('listbox');
-    const hours = getAllByRole(hoursContainer, 'option');
+    const hours = within(hoursContainer).getAllByRole('option');
     const disabledHours = hours.filter((hour) => hour.getAttribute('aria-disabled') === 'true');
 
     expect(hours.length).to.equal(12);
@@ -194,7 +188,7 @@ describe('<TimeClock />', () => {
 
     // hours are disabled
     const hoursContainer = screen.getByRole('listbox');
-    const hours = getAllByRole(hoursContainer, 'option');
+    const hours = within(hoursContainer).getAllByRole('option');
     const disabledHours = hours.filter((hour) => hour.getAttribute('aria-disabled') === 'true');
 
     expect(hours.length).to.equal(12);
diff --git a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx
index d9736f41ad51..9ddc968fd060 100644
--- a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx
+++ b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx
@@ -497,27 +497,27 @@ describe('<TimeField /> - Editing', () => {
 
     it('should go to the next section when pressing `2` in a 12-hours format', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: adapter.formats.fullTime12h,
       });
 
-      v7Response.selectSection('hours');
+      view.selectSection('hours');
 
-      v7Response.pressKey(0, '2');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '02:mm aa');
+      view.pressKey(0, '2');
+      expectFieldValueV7(view.getSectionsContainer(), '02:mm aa');
       expect(getCleanedSelectedContent()).to.equal('mm');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: adapter.formats.fullTime12h,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('hours');
+      view.selectSection('hours');
 
       // Press "2"
       fireEvent.change(input, { target: { value: '2:mm aa' } });
@@ -527,32 +527,32 @@ describe('<TimeField /> - Editing', () => {
 
     it('should go to the next section when pressing `1` then `3` in a 12-hours format', () => {
       // Test with v7 input
-      const v7Response = renderWithProps({
+      let view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         format: adapter.formats.fullTime12h,
       });
 
-      v7Response.selectSection('hours');
+      view.selectSection('hours');
 
-      v7Response.pressKey(0, '1');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '01:mm aa');
+      view.pressKey(0, '1');
+      expectFieldValueV7(view.getSectionsContainer(), '01:mm aa');
       expect(getCleanedSelectedContent()).to.equal('01');
 
       // Press "3"
-      v7Response.pressKey(0, '3');
-      expectFieldValueV7(v7Response.getSectionsContainer(), '03:mm aa');
+      view.pressKey(0, '3');
+      expectFieldValueV7(view.getSectionsContainer(), '03:mm aa');
       expect(getCleanedSelectedContent()).to.equal('mm');
 
-      v7Response.unmount();
+      view.unmount();
 
       // Test with v6 input
-      const v6Response = renderWithProps({
+      view = renderWithProps({
         enableAccessibleFieldDOMStructure: false,
         format: adapter.formats.fullTime12h,
       });
 
       const input = getTextbox();
-      v6Response.selectSection('hours');
+      view.selectSection('hours');
 
       // Press "1"
       fireEvent.change(input, { target: { value: '1:mm aa' } });
@@ -638,30 +638,30 @@ describe('<TimeField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV7,
         });
 
-        v7Response.selectSection('hours');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowDown' });
+        view.selectSection('hours');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowDown' });
 
         expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2010, 3, 3, 2, 3, 3));
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
 
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           enableAccessibleFieldDOMStructure: false,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV6,
         });
 
         const input = getTextbox();
-        v6Response.selectSection('hours');
+        view.selectSection('hours');
         fireEvent.keyDown(input, { key: 'ArrowDown' });
 
         expect(onChangeV6.lastCall.firstArg).toEqualDateTime(new Date(2010, 3, 3, 2, 3, 3));
@@ -671,31 +671,31 @@ describe('<TimeField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV7,
           format: adapter.formats.fullTime24h,
         });
 
-        v7Response.selectSection('hours');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true });
-        v7Response.pressKey(null, '');
-        fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'ArrowLeft' });
+        view.selectSection('hours');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true });
+        view.pressKey(null, '');
+        fireEvent.keyDown(view.getSectionsContainer(), { key: 'ArrowLeft' });
 
-        v7Response.pressKey(0, '3');
-        expectFieldValueV7(v7Response.getSectionsContainer(), '03:mm');
+        view.pressKey(0, '3');
+        expectFieldValueV7(view.getSectionsContainer(), '03:mm');
 
-        v7Response.pressKey(1, '4');
-        expectFieldValueV7(v7Response.getSectionsContainer(), '03:04');
+        view.pressKey(1, '4');
+        expectFieldValueV7(view.getSectionsContainer(), '03:04');
         expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2010, 3, 3, 3, 4, 3));
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
 
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           enableAccessibleFieldDOMStructure: false,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV6,
@@ -703,7 +703,7 @@ describe('<TimeField /> - Editing', () => {
         });
 
         const input = getTextbox();
-        v6Response.selectSection('hours');
+        view.selectSection('hours');
         fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
         fireEvent.change(input, { target: { value: '' } });
         fireEvent.keyDown(input, { key: 'ArrowLeft' });
@@ -720,24 +720,24 @@ describe('<TimeField /> - Editing', () => {
         // Test with v7 input
         const onChangeV7 = spy();
 
-        const v7Response = renderWithProps({
+        let view = renderWithProps({
           enableAccessibleFieldDOMStructure: true,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV7,
           format: adapter.formats.hours24h,
         });
 
-        v7Response.selectSection('hours');
-        fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowDown' });
+        view.selectSection('hours');
+        fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowDown' });
 
         expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2010, 3, 3, 2, 3, 3));
 
-        v7Response.unmount();
+        view.unmount();
 
         // Test with v6 input
         const onChangeV6 = spy();
 
-        const v6Response = renderWithProps({
+        view = renderWithProps({
           enableAccessibleFieldDOMStructure: false,
           defaultValue: adapter.date('2010-04-03T03:03:03'),
           onChange: onChangeV6,
@@ -745,7 +745,7 @@ describe('<TimeField /> - Editing', () => {
         });
 
         const input = getTextbox();
-        v6Response.selectSection('hours');
+        view.selectSection('hours');
         fireEvent.keyDown(input, { key: 'ArrowDown' });
 
         expect(onChangeV6.lastCall.firstArg).toEqualDateTime(new Date(2010, 3, 3, 2, 3, 3));
diff --git a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx
index e2b1c722d71a..87eeb7fee9f4 100644
--- a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx
+++ b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { userEvent, screen } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { YearCalendar, yearCalendarClasses as classes } from '@mui/x-date-pickers/YearCalendar';
 import {
   createPickerRenderer,
@@ -9,6 +9,7 @@ import {
   describeValue,
 } from 'test/utils/pickers';
 import { describeConformance } from 'test/utils/describeConformance';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<YearCalendar /> - Describes', () => {
   const { render, clock } = createPickerRenderer({
@@ -51,7 +52,7 @@ describe('<YearCalendar /> - Describes', () => {
     },
     setNewValue: (value) => {
       const newValue = adapterToUse.addYears(value, 1);
-      userEvent.mousePress(
+      fireUserEvent.mousePress(
         screen.getByRole('radio', { name: adapterToUse.getYear(newValue).toString() }),
       );
 
diff --git a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx
index f9a7fc614478..3d7436f158ea 100644
--- a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx
+++ b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx
@@ -75,28 +75,22 @@ describe(`RTL - test arrows navigation`, () => {
     const expectedValues = ['hh', 'mm', 'YYYY', 'MM', 'DD', 'DD'];
 
     // Test with v7 input
-    const v7Response = renderWithProps(
-      { enableAccessibleFieldDOMStructure: true },
-      { direction: 'rtl' },
-    );
+    let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }, { direction: 'rtl' });
 
-    v7Response.selectSection('hours');
+    view.selectSection('hours');
 
     expectedValues.forEach((expectedValue) => {
       expect(getCleanedSelectedContent()).to.equal(expectedValue);
-      fireEvent.keyDown(v7Response.getActiveSection(undefined), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(undefined), { key: 'ArrowRight' });
     });
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps(
-      { enableAccessibleFieldDOMStructure: false },
-      { direction: 'rtl' },
-    );
+    view = renderWithProps({ enableAccessibleFieldDOMStructure: false }, { direction: 'rtl' });
 
     const input = getTextbox();
-    v6Response.selectSection('hours');
+    view.selectSection('hours');
 
     expectedValues.forEach((expectedValue) => {
       expect(getCleanedSelectedContent()).to.equal(expectedValue);
@@ -108,28 +102,22 @@ describe(`RTL - test arrows navigation`, () => {
     const expectedValues = ['DD', 'MM', 'YYYY', 'mm', 'hh', 'hh'];
 
     // Test with v7 input
-    const v7Response = renderWithProps(
-      { enableAccessibleFieldDOMStructure: true },
-      { direction: 'rtl' },
-    );
+    let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }, { direction: 'rtl' });
 
-    v7Response.selectSection('day');
+    view.selectSection('day');
 
     expectedValues.forEach((expectedValue) => {
       expect(getCleanedSelectedContent()).to.equal(expectedValue);
-      fireEvent.keyDown(v7Response.getActiveSection(undefined), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getActiveSection(undefined), { key: 'ArrowLeft' });
     });
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps(
-      { enableAccessibleFieldDOMStructure: false },
-      { direction: 'rtl' },
-    );
+    view = renderWithProps({ enableAccessibleFieldDOMStructure: false }, { direction: 'rtl' });
 
     const input = getTextbox();
-    v6Response.selectSection('day');
+    view.selectSection('day');
 
     expectedValues.forEach((expectedValue) => {
       expect(getCleanedSelectedContent()).to.equal(expectedValue);
@@ -142,7 +130,7 @@ describe(`RTL - test arrows navigation`, () => {
     const expectedValues = ['11', '54', '1397', '02', '05', '05'];
 
     // Test with v7 input
-    const v7Response = renderWithProps(
+    let view = renderWithProps(
       {
         enableAccessibleFieldDOMStructure: true,
         defaultValue: adapter.date('2018-04-25T11:54:00'),
@@ -150,17 +138,17 @@ describe(`RTL - test arrows navigation`, () => {
       { direction: 'rtl' },
     );
 
-    v7Response.selectSection('hours');
+    view.selectSection('hours');
 
     expectedValues.forEach((expectedValue) => {
       expect(getCleanedSelectedContent()).to.equal(expectedValue);
-      fireEvent.keyDown(v7Response.getActiveSection(undefined), { key: 'ArrowRight' });
+      fireEvent.keyDown(view.getActiveSection(undefined), { key: 'ArrowRight' });
     });
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps(
+    view = renderWithProps(
       {
         defaultValue: adapter.date('2018-04-25T11:54:00'),
         enableAccessibleFieldDOMStructure: false,
@@ -169,7 +157,7 @@ describe(`RTL - test arrows navigation`, () => {
     );
 
     const input = getTextbox();
-    v6Response.selectSection('hours');
+    view.selectSection('hours');
 
     expectedValues.forEach((expectedValue) => {
       expect(getCleanedSelectedContent()).to.equal(expectedValue);
@@ -182,7 +170,7 @@ describe(`RTL - test arrows navigation`, () => {
     const expectedValues = ['05', '02', '1397', '54', '11', '11'];
 
     // Test with v7 input
-    const v7Response = renderWithProps(
+    let view = renderWithProps(
       {
         enableAccessibleFieldDOMStructure: true,
         defaultValue: adapter.date('2018-04-25T11:54:00'),
@@ -190,17 +178,17 @@ describe(`RTL - test arrows navigation`, () => {
       { direction: 'rtl' },
     );
 
-    v7Response.selectSection('day');
+    view.selectSection('day');
 
     expectedValues.forEach((expectedValue) => {
       expect(getCleanedSelectedContent()).to.equal(expectedValue);
-      fireEvent.keyDown(v7Response.getActiveSection(undefined), { key: 'ArrowLeft' });
+      fireEvent.keyDown(view.getActiveSection(undefined), { key: 'ArrowLeft' });
     });
 
-    v7Response.unmount();
+    view.unmount();
 
     // Test with v6 input
-    const v6Response = renderWithProps(
+    view = renderWithProps(
       {
         defaultValue: adapter.date('2018-04-25T11:54:00'),
         enableAccessibleFieldDOMStructure: false,
@@ -209,7 +197,7 @@ describe(`RTL - test arrows navigation`, () => {
     );
 
     const input = getTextbox();
-    v6Response.selectSection('day');
+    view.selectSection('day');
 
     expectedValues.forEach((expectedValue) => {
       expect(getCleanedSelectedContent()).to.equal(expectedValue);
@@ -265,16 +253,16 @@ adapterToTest.forEach((adapterName) => {
       expectedValue: TDate;
       sectionConfig: ReturnType<typeof getDateSectionConfigFromFormatToken>;
     }) => {
-      const v7Response = renderWithProps({
+      const view = renderWithProps({
         enableAccessibleFieldDOMStructure: true,
         defaultValue: initialValue,
         format,
       });
-      v7Response.selectSection(sectionConfig.type);
-      fireEvent.keyDown(v7Response.getActiveSection(0), { key });
+      view.selectSection(sectionConfig.type);
+      fireEvent.keyDown(view.getActiveSection(0), { key });
 
       expectFieldValueV7(
-        v7Response.getSectionsContainer(),
+        view.getSectionsContainer(),
         cleanValueStr(adapter.formatByString(expectedValue, format), sectionConfig),
       );
     };
diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx
index 9e01b6229860..feae408bdcc7 100644
--- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx
+++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx
@@ -76,54 +76,54 @@ describeTreeView<
 
   describe('itemReordering prop', () => {
     it('should allow to drag and drop items when props.itemsReordering={true}', () => {
-      const response = render({
+      const view = render({
         experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
         items: [{ id: '1' }, { id: '2' }, { id: '3' }],
         itemsReordering: true,
       });
 
-      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
-      expect(response.getItemIdTree()).to.deep.equal([
+      dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2'));
+      expect(view.getItemIdTree()).to.deep.equal([
         { id: '2', children: [{ id: '1' }] },
         { id: '3' },
       ]);
     });
 
     it('should not allow to drag and drop items when props.itemsReordering={false}', () => {
-      const response = render({
+      const view = render({
         experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
         items: [{ id: '1' }, { id: '2' }, { id: '3' }],
         itemsReordering: false,
       });
 
-      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
-      expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
+      dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2'));
+      expect(view.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
     });
 
     it('should not allow to drag and drop items when props.itemsReordering is not defined', () => {
-      const response = render({
+      const view = render({
         experimentalFeatures: { indentationAtItemLevel: true },
         items: [{ id: '1' }, { id: '2' }, { id: '3' }],
       });
 
-      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
-      expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
+      dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2'));
+      expect(view.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
     });
 
     it('should allow to expand the new parent of the dragged item when it was not expandable before', () => {
-      const response = render({
+      const view = render({
         experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
         items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
         itemsReordering: true,
         defaultExpandedItems: ['1'],
       });
 
-      dragEvents.fullDragSequence(response.getItemRoot('1.1'), response.getItemContent('2'));
+      dragEvents.fullDragSequence(view.getItemRoot('1.1'), view.getItemContent('2'));
 
-      fireEvent.focus(response.getItemRoot('2'));
-      fireEvent.keyDown(response.getItemRoot('2'), { key: 'Enter' });
+      fireEvent.focus(view.getItemRoot('2'));
+      fireEvent.keyDown(view.getItemRoot('2'), { key: 'Enter' });
 
-      expect(response.getItemIdTree()).to.deep.equal([
+      expect(view.getItemIdTree()).to.deep.equal([
         { id: '1', children: [] },
         { id: '2', children: [{ id: '1.1' }] },
       ]);
@@ -133,14 +133,14 @@ describeTreeView<
   describe('onItemPositionChange prop', () => {
     it('should call onItemPositionChange when an item is moved', () => {
       const onItemPositionChange = spy();
-      const response = render({
+      const view = render({
         experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
         items: [{ id: '1' }, { id: '2' }, { id: '3' }],
         itemsReordering: true,
         onItemPositionChange,
       });
 
-      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
+      dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2'));
       expect(onItemPositionChange.callCount).to.equal(1);
       expect(onItemPositionChange.lastCall.firstArg).to.deep.equal({
         itemId: '1',
@@ -152,27 +152,27 @@ describeTreeView<
 
   describe('isItemReorderable prop', () => {
     it('should not allow to drag an item when isItemReorderable returns false', () => {
-      const response = render({
+      const view = render({
         experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
         items: [{ id: '1' }, { id: '2' }, { id: '3' }],
         itemsReordering: true,
         canMoveItemToNewPosition: () => false,
       });
 
-      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
-      expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
+      dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2'));
+      expect(view.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
     });
 
     it('should allow to drag an item when isItemReorderable returns true', () => {
-      const response = render({
+      const view = render({
         experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
         items: [{ id: '1' }, { id: '2' }, { id: '3' }],
         itemsReordering: true,
         canMoveItemToNewPosition: () => true,
       });
 
-      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
-      expect(response.getItemIdTree()).to.deep.equal([
+      dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2'));
+      expect(view.getItemIdTree()).to.deep.equal([
         { id: '2', children: [{ id: '1' }] },
         { id: '3' },
       ]);
@@ -182,14 +182,14 @@ describeTreeView<
   describe('canMoveItemToNewPosition prop', () => {
     it('should call canMoveItemToNewPosition with the correct parameters', () => {
       const canMoveItemToNewPosition = spy();
-      const response = render({
+      const view = render({
         experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
         items: [{ id: '1' }, { id: '2' }, { id: '3' }],
         itemsReordering: true,
         canMoveItemToNewPosition,
       });
 
-      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
+      dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2'));
       expect(canMoveItemToNewPosition.lastCall.firstArg).to.deep.equal({
         itemId: '1',
         oldPosition: { parentId: null, index: 0 },
@@ -198,27 +198,27 @@ describeTreeView<
     });
 
     it('should not allow to drop an item when canMoveItemToNewPosition returns false', () => {
-      const response = render({
+      const view = render({
         experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
         items: [{ id: '1' }, { id: '2' }, { id: '3' }],
         itemsReordering: true,
         canMoveItemToNewPosition: () => false,
       });
 
-      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
-      expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
+      dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2'));
+      expect(view.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
     });
 
     it('should allow to drop an item when canMoveItemToNewPosition returns true', () => {
-      const response = render({
+      const view = render({
         experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
         items: [{ id: '1' }, { id: '2' }, { id: '3' }],
         itemsReordering: true,
         canMoveItemToNewPosition: () => true,
       });
 
-      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
-      expect(response.getItemIdTree()).to.deep.equal([
+      dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2'));
+      expect(view.getItemIdTree()).to.deep.equal([
         { id: '2', children: [{ id: '1' }] },
         { id: '3' },
       ]);
diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx
index d85f3e7aa395..f893aec46d2a 100644
--- a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx
+++ b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx
@@ -21,12 +21,12 @@ describeTreeView<[]>('TreeItem component', ({ render, treeItemComponentName }) =
         </div>
       ));
 
-      const response = render({
+      const view = render({
         items: [{ id: '1' }],
         slotProps: { item: { ContentComponent } },
       });
 
-      expect(response.getItemContent('1').textContent).to.equal('MOCK CONTENT COMPONENT');
+      expect(view.getItemContent('1').textContent).to.equal('MOCK CONTENT COMPONENT');
     });
 
     it('should use the ContentProps prop when defined', function test() {
@@ -40,12 +40,12 @@ describeTreeView<[]>('TreeItem component', ({ render, treeItemComponentName }) =
         </div>
       ));
 
-      const response = render({
+      const view = render({
         items: [{ id: '1' }],
         slotProps: { item: { ContentComponent, ContentProps: { customProp: 'ABCDEF' } as any } },
       });
 
-      expect(response.getItemContent('1').textContent).to.equal('ABCDEF');
+      expect(view.getItemContent('1').textContent).to.equal('ABCDEF');
     });
 
     it('should render TreeItem when itemId prop is escaping characters without throwing an error', function test() {
@@ -53,11 +53,11 @@ describeTreeView<[]>('TreeItem component', ({ render, treeItemComponentName }) =
         this.skip();
       }
 
-      const response = render({
+      const view = render({
         items: [{ id: 'C:\\\\', label: 'ABCDEF' }],
       });
 
-      expect(response.getItemContent('C:\\\\').textContent).to.equal('ABCDEF');
+      expect(view.getItemContent('C:\\\\').textContent).to.equal('ABCDEF');
     });
   });
 });
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.test.tsx
index 418a8c459674..8019dcba99bb 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.test.tsx
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.test.tsx
@@ -17,63 +17,63 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
   ({ render, setup }) => {
     describe('model props (expandedItems, defaultExpandedItems, onExpandedItemsChange)', () => {
       it('should not expand items when no default state and no control state are defined', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
         });
 
-        expect(response.isItemExpanded('1')).to.equal(false);
-        expect(response.getAllTreeItemIds()).to.deep.equal(['1', '2']);
+        expect(view.isItemExpanded('1')).to.equal(false);
+        expect(view.getAllTreeItemIds()).to.deep.equal(['1', '2']);
       });
 
       it('should use the default state when defined', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           defaultExpandedItems: ['1'],
         });
 
-        expect(response.isItemExpanded('1')).to.equal(true);
-        expect(response.getAllTreeItemIds()).to.deep.equal(['1', '1.1', '2']);
+        expect(view.isItemExpanded('1')).to.equal(true);
+        expect(view.getAllTreeItemIds()).to.deep.equal(['1', '1.1', '2']);
       });
 
       it('should use the controlled state when defined', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           expandedItems: ['1'],
         });
 
-        expect(response.isItemExpanded('1')).to.equal(true);
-        expect(response.getItemRoot('1.1')).toBeVisible();
+        expect(view.isItemExpanded('1')).to.equal(true);
+        expect(view.getItemRoot('1.1')).toBeVisible();
       });
 
       it('should use the controlled state instead of the default state when both are defined', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           expandedItems: ['1'],
           defaultExpandedItems: ['2'],
         });
 
-        expect(response.isItemExpanded('1')).to.equal(true);
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
 
       it('should react to controlled state update', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           expandedItems: [],
         });
 
-        response.setProps({ expandedItems: ['1'] });
-        expect(response.isItemExpanded('1')).to.equal(true);
+        view.setProps({ expandedItems: ['1'] });
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
 
       it('should call the onExpandedItemsChange callback when the model is updated (add expanded item to empty list)', () => {
         const onExpandedItemsChange = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           onExpandedItemsChange,
         });
 
-        fireEvent.click(response.getItemContent('1'));
+        fireEvent.click(view.getItemContent('1'));
 
         expect(onExpandedItemsChange.callCount).to.equal(1);
         expect(onExpandedItemsChange.lastCall.args[1]).to.deep.equal(['1']);
@@ -82,7 +82,7 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
       it('should call the onExpandedItemsChange callback when the model is updated (add expanded item to non-empty list)', () => {
         const onExpandedItemsChange = spy();
 
-        const response = render({
+        const view = render({
           items: [
             { id: '1', children: [{ id: '1.1' }] },
             { id: '2', children: [{ id: '2.1' }] },
@@ -91,7 +91,7 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
           defaultExpandedItems: ['1'],
         });
 
-        fireEvent.click(response.getItemContent('2'));
+        fireEvent.click(view.getItemContent('2'));
 
         expect(onExpandedItemsChange.callCount).to.equal(1);
         expect(onExpandedItemsChange.lastCall.args[1]).to.deep.equal(['2', '1']);
@@ -100,7 +100,7 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
       it('should call the onExpandedItemsChange callback when the model is updated (remove expanded item)', () => {
         const onExpandedItemsChange = spy();
 
-        const response = render({
+        const view = render({
           items: [
             { id: '1', children: [{ id: '1.1' }] },
             { id: '2', children: [{ id: '2.1' }] },
@@ -109,35 +109,35 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
           defaultExpandedItems: ['1'],
         });
 
-        fireEvent.click(response.getItemContent('1'));
+        fireEvent.click(view.getItemContent('1'));
 
         expect(onExpandedItemsChange.callCount).to.equal(1);
         expect(onExpandedItemsChange.lastCall.args[1]).to.deep.equal([]);
       });
 
       it('should warn when switching from controlled to uncontrolled', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }],
           expandedItems: [],
         });
 
         expect(() => {
-          response.setProps({ expandedItems: undefined });
+          view.setProps({ expandedItems: undefined });
         }).toErrorDev(
           'MUI X: A component is changing the controlled expandedItems state of TreeView to be uncontrolled.',
         );
       });
 
       it('should warn and not react to update when updating the default state', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           defaultExpandedItems: ['1'],
         });
 
         expect(() => {
-          response.setProps({ defaultExpandedItems: ['2'] });
-          expect(response.isItemExpanded('1')).to.equal(true);
-          expect(response.isItemExpanded('2')).to.equal(false);
+          view.setProps({ defaultExpandedItems: ['2'] });
+          expect(view.isItemExpanded('1')).to.equal(true);
+          expect(view.isItemExpanded('2')).to.equal(false);
         }).toErrorDev(
           'MUI X: A component is changing the default expandedItems state of an uncontrolled TreeView after being initialized. To suppress this warning opt to use a controlled TreeView.',
         );
@@ -146,65 +146,65 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
 
     describe('item click interaction', () => {
       it('should expand collapsed item when clicking on an item content', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
         });
 
-        expect(response.isItemExpanded('1')).to.equal(false);
-        fireEvent.click(response.getItemContent('1'));
-        expect(response.isItemExpanded('1')).to.equal(true);
+        expect(view.isItemExpanded('1')).to.equal(false);
+        fireEvent.click(view.getItemContent('1'));
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
 
       it('should collapse expanded item when clicking on an item content', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           defaultExpandedItems: ['1'],
         });
 
-        expect(response.isItemExpanded('1')).to.equal(true);
-        fireEvent.click(response.getItemContent('1'));
-        expect(response.isItemExpanded('1')).to.equal(false);
+        expect(view.isItemExpanded('1')).to.equal(true);
+        fireEvent.click(view.getItemContent('1'));
+        expect(view.isItemExpanded('1')).to.equal(false);
       });
 
       it('should not expand collapsed item when clicking on a disabled item content', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', disabled: true, children: [{ id: '1.1' }] }, { id: '2' }],
         });
 
-        expect(response.isItemExpanded('1')).to.equal(false);
-        fireEvent.click(response.getItemContent('1'));
-        expect(response.isItemExpanded('1')).to.equal(false);
+        expect(view.isItemExpanded('1')).to.equal(false);
+        fireEvent.click(view.getItemContent('1'));
+        expect(view.isItemExpanded('1')).to.equal(false);
       });
 
       it('should not collapse expanded item when clicking on a disabled item', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', disabled: true, children: [{ id: '1.1' }] }, { id: '2' }],
           defaultExpandedItems: ['1'],
         });
 
-        expect(response.isItemExpanded('1')).to.equal(true);
-        fireEvent.click(response.getItemContent('1'));
-        expect(response.isItemExpanded('1')).to.equal(true);
+        expect(view.isItemExpanded('1')).to.equal(true);
+        fireEvent.click(view.getItemContent('1'));
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
 
       it('should expand collapsed item when clicking on an item label', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
         });
 
-        expect(response.isItemExpanded('1')).to.equal(false);
-        fireEvent.click(response.getItemLabel('1'));
-        expect(response.isItemExpanded('1')).to.equal(true);
+        expect(view.isItemExpanded('1')).to.equal(false);
+        fireEvent.click(view.getItemLabel('1'));
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
 
       it('should expand collapsed item when clicking on an item icon container', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
         });
 
-        expect(response.isItemExpanded('1')).to.equal(false);
-        fireEvent.click(response.getItemIconContainer('1'));
-        expect(response.isItemExpanded('1')).to.equal(true);
+        expect(view.isItemExpanded('1')).to.equal(false);
+        fireEvent.click(view.getItemIconContainer('1'));
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
 
       it('should be able to limit the expansion to the icon', function test() {
@@ -245,16 +245,16 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
           );
         });
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           slots: { item: CustomTreeItem },
         });
 
-        expect(response.isItemExpanded('1')).to.equal(false);
-        fireEvent.click(response.getItemContent('1'));
-        expect(response.isItemExpanded('1')).to.equal(false);
-        fireEvent.click(response.getItemIconContainer('1'));
-        expect(response.isItemExpanded('1')).to.equal(true);
+        expect(view.isItemExpanded('1')).to.equal(false);
+        fireEvent.click(view.getItemContent('1'));
+        expect(view.isItemExpanded('1')).to.equal(false);
+        fireEvent.click(view.getItemIconContainer('1'));
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
     });
 
@@ -262,28 +262,28 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
     // This `describe` only tests basics scenarios, more complex scenarios are tested in this file's other `describe`.
     describe('aria-expanded item attribute', () => {
       it('should have the attribute `aria-expanded=false` if collapsed', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
         });
 
-        expect(response.getItemRoot('1')).to.have.attribute('aria-expanded', 'false');
+        expect(view.getItemRoot('1')).to.have.attribute('aria-expanded', 'false');
       });
 
       it('should have the attribute `aria-expanded=true` if expanded', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
         });
 
-        expect(response.getItemRoot('1')).to.have.attribute('aria-expanded', 'true');
+        expect(view.getItemRoot('1')).to.have.attribute('aria-expanded', 'true');
       });
 
       it('should not have the attribute `aria-expanded` if no children are present', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }],
         });
 
-        expect(response.getItemRoot('1')).not.to.have.attribute('aria-expanded');
+        expect(view.getItemRoot('1')).not.to.have.attribute('aria-expanded');
       });
     });
 
@@ -291,12 +291,12 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
       it('should call the onItemExpansionToggle callback when expanding an item', () => {
         const onItemExpansionToggle = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           onItemExpansionToggle,
         });
 
-        fireEvent.click(response.getItemContent('1'));
+        fireEvent.click(view.getItemContent('1'));
         expect(onItemExpansionToggle.callCount).to.equal(1);
         expect(onItemExpansionToggle.lastCall.args[1]).to.equal('1');
         expect(onItemExpansionToggle.lastCall.args[2]).to.equal(true);
@@ -305,13 +305,13 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
       it('should call the onItemExpansionToggle callback when collapsing an item', () => {
         const onItemExpansionToggle = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
           onItemExpansionToggle,
         });
 
-        fireEvent.click(response.getItemContent('1'));
+        fireEvent.click(view.getItemContent('1'));
         expect(onItemExpansionToggle.callCount).to.equal(1);
         expect(onItemExpansionToggle.lastCall.args[1]).to.equal('1');
         expect(onItemExpansionToggle.lastCall.args[2]).to.equal(false);
@@ -322,16 +322,16 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
       it('should expand a collapsed item when calling the setItemExpansion method with `isExpanded=true`', () => {
         const onItemExpansionToggle = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           onItemExpansionToggle,
         });
 
         act(() => {
-          response.apiRef.current.setItemExpansion({} as any, '1', true);
+          view.apiRef.current.setItemExpansion({} as any, '1', true);
         });
 
-        expect(response.isItemExpanded('1')).to.equal(true);
+        expect(view.isItemExpanded('1')).to.equal(true);
         expect(onItemExpansionToggle.callCount).to.equal(1);
         expect(onItemExpansionToggle.lastCall.args[1]).to.equal('1');
         expect(onItemExpansionToggle.lastCall.args[2]).to.equal(true);
@@ -340,17 +340,17 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
       it('should collapse an expanded item when calling the setItemExpansion method with `isExpanded=false`', () => {
         const onItemExpansionToggle = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
           onItemExpansionToggle,
         });
 
         act(() => {
-          response.apiRef.current.setItemExpansion({} as any, '1', false);
+          view.apiRef.current.setItemExpansion({} as any, '1', false);
         });
 
-        expect(response.isItemExpanded('1')).to.equal(false);
+        expect(view.isItemExpanded('1')).to.equal(false);
         expect(onItemExpansionToggle.callCount).to.equal(1);
         expect(onItemExpansionToggle.lastCall.args[1]).to.equal('1');
         expect(onItemExpansionToggle.lastCall.args[2]).to.equal(false);
@@ -359,33 +359,33 @@ describeTreeView<[UseTreeViewExpansionSignature]>(
       it('should do nothing when calling the setItemExpansion method with `isExpanded=true` on an already expanded item', () => {
         const onItemExpansionToggle = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
           onItemExpansionToggle,
         });
 
         act(() => {
-          response.apiRef.current.setItemExpansion({} as any, '1', true);
+          view.apiRef.current.setItemExpansion({} as any, '1', true);
         });
 
-        expect(response.isItemExpanded('1')).to.equal(true);
+        expect(view.isItemExpanded('1')).to.equal(true);
         expect(onItemExpansionToggle.callCount).to.equal(0);
       });
 
       it('should do nothing when calling the setItemExpansion method with `isExpanded=false` on an already collapsed item', () => {
         const onItemExpansionToggle = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           onItemExpansionToggle,
         });
 
         act(() => {
-          response.apiRef.current.setItemExpansion({} as any, '1', false);
+          view.apiRef.current.setItemExpansion({} as any, '1', false);
         });
 
-        expect(response.isItemExpanded('1')).to.equal(false);
+        expect(view.isItemExpanded('1')).to.equal(false);
         expect(onItemExpansionToggle.callCount).to.equal(0);
       });
     });
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.test.tsx
index 6bd9dc244893..94cf0c21ea63 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.test.tsx
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.test.tsx
@@ -20,107 +20,107 @@ describeTreeView<
   ({ render, renderFromJSX, TreeItemComponent, treeViewComponentName, TreeViewComponent }) => {
     describe('basic behavior', () => {
       it('should allow to focus an item', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
         });
 
-        fireEvent.focus(response.getItemRoot('2'));
-        expect(response.getFocusedItemId()).to.equal('2');
+        fireEvent.focus(view.getItemRoot('2'));
+        expect(view.getFocusedItemId()).to.equal('2');
 
-        fireEvent.focus(response.getItemRoot('1'));
-        expect(response.getFocusedItemId()).to.equal('1');
+        fireEvent.focus(view.getItemRoot('1'));
+        expect(view.getFocusedItemId()).to.equal('1');
       });
 
       it('should move the focus when the focused item is removed', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
         });
 
-        fireEvent.focus(response.getItemRoot('2'));
-        expect(response.getFocusedItemId()).to.equal('2');
+        fireEvent.focus(view.getItemRoot('2'));
+        expect(view.getFocusedItemId()).to.equal('2');
 
-        response.setItems([{ id: '1' }]);
-        expect(response.getFocusedItemId()).to.equal('1');
+        view.setItems([{ id: '1' }]);
+        expect(view.getFocusedItemId()).to.equal('1');
       });
     });
 
     describe('tabIndex HTML attribute', () => {
       it('should set tabIndex={0} on the first item if none are selected', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
         });
 
-        expect(response.getItemRoot('1').tabIndex).to.equal(0);
-        expect(response.getItemRoot('2').tabIndex).to.equal(-1);
+        expect(view.getItemRoot('1').tabIndex).to.equal(0);
+        expect(view.getItemRoot('2').tabIndex).to.equal(-1);
       });
 
       it('should set tabIndex={0} on the selected item (single selection)', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
           selectedItems: '2',
         });
 
-        expect(response.getItemRoot('1').tabIndex).to.equal(-1);
-        expect(response.getItemRoot('2').tabIndex).to.equal(0);
+        expect(view.getItemRoot('1').tabIndex).to.equal(-1);
+        expect(view.getItemRoot('2').tabIndex).to.equal(0);
       });
 
       it('should set tabIndex={0} on the first selected item (multi selection)', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }, { id: '3' }],
           selectedItems: ['2', '3'],
           multiSelect: true,
         });
 
-        expect(response.getItemRoot('1').tabIndex).to.equal(-1);
-        expect(response.getItemRoot('2').tabIndex).to.equal(0);
-        expect(response.getItemRoot('3').tabIndex).to.equal(-1);
+        expect(view.getItemRoot('1').tabIndex).to.equal(-1);
+        expect(view.getItemRoot('2').tabIndex).to.equal(0);
+        expect(view.getItemRoot('3').tabIndex).to.equal(-1);
       });
 
       it('should set tabIndex={0} on the first item if the selected item is not visible', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2', children: [{ id: '2.1' }] }],
           selectedItems: '2.1',
         });
 
-        expect(response.getItemRoot('1').tabIndex).to.equal(0);
-        expect(response.getItemRoot('2').tabIndex).to.equal(-1);
+        expect(view.getItemRoot('1').tabIndex).to.equal(0);
+        expect(view.getItemRoot('2').tabIndex).to.equal(-1);
       });
 
       it('should set tabIndex={0} on the first item if the no selected item is visible', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2', children: [{ id: '2.1' }, { id: '2.2' }] }],
           selectedItems: ['2.1', '2.2'],
           multiSelect: true,
         });
 
-        expect(response.getItemRoot('1').tabIndex).to.equal(0);
-        expect(response.getItemRoot('2').tabIndex).to.equal(-1);
+        expect(view.getItemRoot('1').tabIndex).to.equal(0);
+        expect(view.getItemRoot('2').tabIndex).to.equal(-1);
       });
     });
 
     describe('focusItem api method', () => {
       it('should focus the item', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
         });
 
         act(() => {
-          response.apiRef.current.focusItem({} as any, '2');
+          view.apiRef.current.focusItem({} as any, '2');
         });
 
-        expect(response.getFocusedItemId()).to.equal('2');
+        expect(view.getFocusedItemId()).to.equal('2');
       });
 
       it('should not focus item if parent is collapsed', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2', children: [{ id: '2.1' }] }],
         });
 
         act(() => {
-          response.apiRef.current.focusItem({} as any, '2.1');
+          view.apiRef.current.focusItem({} as any, '2.1');
         });
 
-        expect(response.getFocusedItemId()).to.equal(null);
+        expect(view.getFocusedItemId()).to.equal(null);
       });
     });
 
@@ -128,13 +128,13 @@ describeTreeView<
       it('should be called when an item is focused', () => {
         const onItemFocus = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1' }],
           onItemFocus,
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
 
         expect(onItemFocus.callCount).to.equal(1);
@@ -145,47 +145,47 @@ describeTreeView<
     describe('disabledItemsFocusable prop', () => {
       describe('disabledItemFocusable={false}', () => {
         it('should prevent focus by mouse', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }],
             disabledItemsFocusable: false,
           });
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.getFocusedItemId()).to.equal(null);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.getFocusedItemId()).to.equal(null);
         });
 
         it('should tab tabIndex={-1} on the disabled item and tabIndex={0} on the first non-disabled item', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }, { id: '2' }, { id: '3' }],
             disabledItemsFocusable: false,
           });
 
-          expect(response.getItemRoot('1').tabIndex).to.equal(-1);
-          expect(response.getItemRoot('2').tabIndex).to.equal(0);
-          expect(response.getItemRoot('3').tabIndex).to.equal(-1);
+          expect(view.getItemRoot('1').tabIndex).to.equal(-1);
+          expect(view.getItemRoot('2').tabIndex).to.equal(0);
+          expect(view.getItemRoot('3').tabIndex).to.equal(-1);
         });
       });
 
       describe('disabledItemFocusable={true}', () => {
         it('should prevent focus by mouse', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }],
             disabledItemsFocusable: true,
           });
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.getFocusedItemId()).to.equal(null);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.getFocusedItemId()).to.equal(null);
         });
 
         it('should tab tabIndex={0} on the disabled item and tabIndex={-1} on the other items', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }, { id: '2' }, { id: '3' }],
             disabledItemsFocusable: true,
           });
 
-          expect(response.getItemRoot('1').tabIndex).to.equal(0);
-          expect(response.getItemRoot('2').tabIndex).to.equal(-1);
-          expect(response.getItemRoot('3').tabIndex).to.equal(-1);
+          expect(view.getItemRoot('1').tabIndex).to.equal(0);
+          expect(view.getItemRoot('2').tabIndex).to.equal(-1);
+          expect(view.getItemRoot('3').tabIndex).to.equal(-1);
         });
       });
     });
@@ -227,19 +227,19 @@ describeTreeView<
         );
       }
 
-      const response = renderFromJSX(<MyComponent />);
+      const view = renderFromJSX(<MyComponent />);
 
-      fireEvent.focus(response.getItemRoot('1'));
-      expect(response.getFocusedItemId()).to.equal('1');
+      fireEvent.focus(view.getItemRoot('1'));
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' });
-      expect(response.getFocusedItemId()).to.equal('1.1');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' });
+      expect(view.getFocusedItemId()).to.equal('1.1');
 
-      fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowUp' });
-      expect(response.getFocusedItemId()).to.equal('1');
+      fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowUp' });
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' });
-      expect(response.getFocusedItemId()).to.equal('1.1');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' });
+      expect(view.getFocusedItemId()).to.equal('1.1');
     });
   },
 );
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.test.tsx
index ac5880d8b71f..78c339bd7440 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.test.tsx
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.test.tsx
@@ -13,11 +13,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>(
   'useTreeViewIcons plugin',
   ({ render }) => {
     describe('slots (expandIcon, collapseIcon, endIcon, icon)', () => {
-      const getIconTestId = (response: DescribeTreeViewRendererReturnValue<any>, itemId: string) =>
-        response.getItemIconContainer(itemId).querySelector(`div`)?.dataset.testid;
+      const getIconTestId = (view: DescribeTreeViewRendererReturnValue<any>, itemId: string) =>
+        view.getItemIconContainer(itemId).querySelector(`div`)?.dataset.testid;
 
       it('should render the expandIcon slot defined on the tree if no icon slot is defined on the item and the item is collapsed', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           slots: {
             expandIcon: () => <div data-testid="treeExpandIcon" />,
@@ -26,11 +26,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>(
           },
         });
 
-        expect(getIconTestId(response, '1')).to.equal('treeExpandIcon');
+        expect(getIconTestId(view, '1')).to.equal('treeExpandIcon');
       });
 
       it('should render the collapseIcon slot defined on the tree if no icon is defined on the item and the item is expanded', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           slots: {
             expandIcon: () => <div data-testid="treeExpandIcon" />,
@@ -40,11 +40,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>(
           defaultExpandedItems: ['1'],
         });
 
-        expect(getIconTestId(response, '1')).to.equal('treeCollapseIcon');
+        expect(getIconTestId(view, '1')).to.equal('treeCollapseIcon');
       });
 
       it('should render the endIcon slot defined on the tree if no icon is defined on the item and the item has no children', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }],
           slots: {
             expandIcon: () => <div data-testid="treeExpandIcon" />,
@@ -53,11 +53,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>(
           },
         });
 
-        expect(getIconTestId(response, '1')).to.equal('treeEndIcon');
+        expect(getIconTestId(view, '1')).to.equal('treeEndIcon');
       });
 
       it('should render the expandIcon slot defined on the item if the item is collapsed', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           slots: {
             expandIcon: () => <div data-testid="treeExpandIcon" />,
@@ -75,11 +75,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>(
           },
         });
 
-        expect(getIconTestId(response, '1')).to.equal('itemExpandIcon');
+        expect(getIconTestId(view, '1')).to.equal('itemExpandIcon');
       });
 
       it('should render the collapseIcon slot defined on the item if the item is expanded', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           slots: {
             expandIcon: () => <div data-testid="treeExpandIcon" />,
@@ -98,11 +98,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>(
           defaultExpandedItems: ['1'],
         });
 
-        expect(getIconTestId(response, '1')).to.equal('itemCollapseIcon');
+        expect(getIconTestId(view, '1')).to.equal('itemCollapseIcon');
       });
 
       it('should render the endIcon slot defined on the tree if the item has no children', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }],
           slots: {
             expandIcon: () => <div data-testid="treeExpandIcon" />,
@@ -120,11 +120,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>(
           },
         });
 
-        expect(getIconTestId(response, '1')).to.equal('itemEndIcon');
+        expect(getIconTestId(view, '1')).to.equal('itemEndIcon');
       });
 
       it('should render the icon slot defined on the item if the item is collapsed', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           slots: {
             expandIcon: () => <div data-testid="treeExpandIcon" />,
@@ -143,11 +143,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>(
           },
         });
 
-        expect(getIconTestId(response, '1')).to.equal('itemIcon');
+        expect(getIconTestId(view, '1')).to.equal('itemIcon');
       });
 
       it('should render the icon slot defined on the item if the item is expanded', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           slots: {
             expandIcon: () => <div data-testid="treeExpandIcon" />,
@@ -167,11 +167,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>(
           defaultExpandedItems: ['1'],
         });
 
-        expect(getIconTestId(response, '1')).to.equal('itemIcon');
+        expect(getIconTestId(view, '1')).to.equal('itemIcon');
       });
 
       it('should render the icon slot defined on the item if the item has no children', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }],
           slots: {
             expandIcon: () => <div data-testid="treeExpandIcon" />,
@@ -190,7 +190,7 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>(
           },
         });
 
-        expect(getIconTestId(response, '1')).to.equal('itemIcon');
+        expect(getIconTestId(view, '1')).to.equal('itemIcon');
       });
     });
   },
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx
index 7c2a65c072f6..1fda8500521e 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx
@@ -40,7 +40,7 @@ describeTreeView<
         this.skip();
       }
 
-      const response = render({
+      const view = render({
         items: [{ id: '1' }],
         slotProps: {
           item: {
@@ -49,62 +49,62 @@ describeTreeView<
         },
       });
 
-      expect(response.getItemRoot('1')).to.have.attribute('id', 'customId');
+      expect(view.getItemRoot('1')).to.have.attribute('id', 'customId');
     });
 
     describe('items prop / JSX Tree Item', () => {
       it('should support removing an item', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
         });
 
-        response.setItems([{ id: '1' }]);
-        expect(response.getAllTreeItemIds()).to.deep.equal(['1']);
+        view.setItems([{ id: '1' }]);
+        expect(view.getAllTreeItemIds()).to.deep.equal(['1']);
       });
 
       it('should support adding an item at the end', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }],
         });
 
-        response.setItems([{ id: '1' }, { id: '2' }]);
-        expect(response.getAllTreeItemIds()).to.deep.equal(['1', '2']);
+        view.setItems([{ id: '1' }, { id: '2' }]);
+        expect(view.getAllTreeItemIds()).to.deep.equal(['1', '2']);
       });
 
       it('should support adding an item at the beginning', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '2' }],
         });
 
-        response.setItems([{ id: '1' }, { id: '2' }]);
-        expect(response.getAllTreeItemIds()).to.deep.equal(['1', '2']);
+        view.setItems([{ id: '1' }, { id: '2' }]);
+        expect(view.getAllTreeItemIds()).to.deep.equal(['1', '2']);
       });
 
       it('should update indexes when two items are swapped', () => {
         const onSelectedItemsChange = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }, { id: '3' }],
           multiSelect: true,
           onSelectedItemsChange,
         });
 
-        response.setItems([{ id: '1' }, { id: '3' }, { id: '2' }]);
-        expect(response.getAllTreeItemIds()).to.deep.equal(['1', '3', '2']);
+        view.setItems([{ id: '1' }, { id: '3' }, { id: '2' }]);
+        expect(view.getAllTreeItemIds()).to.deep.equal(['1', '3', '2']);
 
         // Check if the internal state is updated by running a range selection
-        fireEvent.click(response.getItemContent('1'));
-        fireEvent.click(response.getItemContent('3'), { shiftKey: true });
+        fireEvent.click(view.getItemContent('1'));
+        fireEvent.click(view.getItemContent('3'), { shiftKey: true });
         expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal(['1', '3']);
       });
 
       it('should not mark an item as expandable if its children is an empty array', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [] }],
           defaultExpandedItems: ['1'],
         });
 
-        expect(response.getItemRoot('1')).not.to.have.attribute('aria-expanded');
+        expect(view.getItemRoot('1')).not.to.have.attribute('aria-expanded');
       });
 
       it('should mark an item as not expandable if it has only empty conditional arrays', function test() {
@@ -112,7 +112,7 @@ describeTreeView<
           this.skip();
         }
 
-        const response = renderFromJSX(
+        const view = renderFromJSX(
           <TreeViewComponent defaultExpandedItems={['1']}>
             <TreeItemComponent itemId="1" label="1" data-testid="1">
               {[]}
@@ -121,7 +121,7 @@ describeTreeView<
           </TreeViewComponent>,
         );
 
-        expect(response.isItemExpanded('1')).to.equal(false);
+        expect(view.isItemExpanded('1')).to.equal(false);
       });
 
       it('should mark an item as expandable if it has two array as children, one of which is empty (SimpleTreeView only)', function test() {
@@ -129,7 +129,7 @@ describeTreeView<
           this.skip();
         }
 
-        const response = renderFromJSX(
+        const view = renderFromJSX(
           <TreeViewComponent defaultExpandedItems={['1']}>
             <TreeItemComponent itemId="1" label="1" data-testid="1">
               {[]}
@@ -138,7 +138,7 @@ describeTreeView<
           </TreeViewComponent>,
         );
 
-        expect(response.isItemExpanded('1')).to.equal(true);
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
 
       it('should mark an item as not expandable if it has one array containing an empty array as a children (SimpleTreeView only)', function test() {
@@ -146,7 +146,7 @@ describeTreeView<
           this.skip();
         }
 
-        const response = renderFromJSX(
+        const view = renderFromJSX(
           <TreeViewComponent defaultExpandedItems={['1']}>
             <TreeItemComponent itemId="1" label="1" data-testid="1">
               {[[]]}
@@ -154,32 +154,32 @@ describeTreeView<
           </TreeViewComponent>,
         );
 
-        expect(response.isItemExpanded('1')).to.equal(false);
+        expect(view.isItemExpanded('1')).to.equal(false);
       });
     });
 
     describe('disabled prop', () => {
       it('should not have the attribute `aria-disabled` if disabled is not defined', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2', disabled: false }, { id: '3', disabled: true }],
         });
 
-        expect(response.getItemRoot('1')).not.to.have.attribute('aria-disabled');
-        expect(response.getItemRoot('2')).not.to.have.attribute('aria-disabled');
-        expect(response.getItemRoot('3')).to.have.attribute('aria-disabled');
+        expect(view.getItemRoot('1')).not.to.have.attribute('aria-disabled');
+        expect(view.getItemRoot('2')).not.to.have.attribute('aria-disabled');
+        expect(view.getItemRoot('3')).to.have.attribute('aria-disabled');
       });
 
       it('should disable all descendants of a disabled item', () => {
-        const response = render({
+        const view = render({
           items: [
             { id: '1', disabled: true, children: [{ id: '1.1', children: [{ id: '1.1.1' }] }] },
           ],
           defaultExpandedItems: ['1', '1.1'],
         });
 
-        expect(response.getItemRoot('1')).to.have.attribute('aria-disabled', 'true');
-        expect(response.getItemRoot('1.1')).to.have.attribute('aria-disabled', 'true');
-        expect(response.getItemRoot('1.1.1')).to.have.attribute('aria-disabled', 'true');
+        expect(view.getItemRoot('1')).to.have.attribute('aria-disabled', 'true');
+        expect(view.getItemRoot('1.1')).to.have.attribute('aria-disabled', 'true');
+        expect(view.getItemRoot('1.1.1')).to.have.attribute('aria-disabled', 'true');
       });
     });
 
@@ -187,12 +187,12 @@ describeTreeView<
       it('should call onItemClick when clicking on the content of an item', () => {
         const onItemClick = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1' }],
           onItemClick,
         });
 
-        fireEvent.click(response.getItemContent('1'));
+        fireEvent.click(view.getItemContent('1'));
         expect(onItemClick.callCount).to.equal(1);
         expect(onItemClick.lastCall.lastArg).to.equal('1');
       });
@@ -200,13 +200,13 @@ describeTreeView<
       it('should not call onItemClick for the ancestors on the clicked item', () => {
         const onItemClick = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
           onItemClick,
         });
 
-        fireEvent.click(response.getItemContent('1.1'));
+        fireEvent.click(view.getItemContent('1.1'));
         expect(onItemClick.callCount).to.equal(1);
         expect(onItemClick.lastCall.lastArg).to.equal('1.1');
       });
@@ -220,32 +220,32 @@ describeTreeView<
         }
 
         it('should return the tree', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           });
 
-          expect(response.apiRef.current.getItem('1')).to.deep.equal({
+          expect(view.apiRef.current.getItem('1')).to.deep.equal({
             id: '1',
             children: [{ id: '1.1' }],
           });
         });
 
         it('should have up to date tree when props.items changes', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           });
 
-          response.setItems([{ id: '1' }, { id: '2' }]);
+          view.setItems([{ id: '1' }, { id: '2' }]);
 
-          expect(response.apiRef.current.getItem('1')).to.deep.equal({ id: '1' });
+          expect(view.apiRef.current.getItem('1')).to.deep.equal({ id: '1' });
         });
 
         it('should contain custom item properties', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', customProp: 'foo' }],
           });
 
-          expect(response.apiRef.current.getItem('1')).to.deep.equal({
+          expect(view.apiRef.current.getItem('1')).to.deep.equal({
             id: '1',
             customProp: 'foo',
           });
@@ -254,21 +254,19 @@ describeTreeView<
 
       describe('getItemDOMElement', () => {
         it('should return the DOM element of the item', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }],
           });
 
-          expect(response.apiRef.current.getItemDOMElement('1')).to.equal(
-            response.getItemRoot('1'),
-          );
+          expect(view.apiRef.current.getItemDOMElement('1')).to.equal(view.getItemRoot('1'));
         });
 
         it("should return the null when the item doesn't exist", () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }],
           });
 
-          expect(response.apiRef.current.getItemDOMElement('2')).to.equal(null);
+          expect(view.apiRef.current.getItemDOMElement('2')).to.equal(null);
         });
       });
 
@@ -279,34 +277,32 @@ describeTreeView<
         }
 
         it('should return the tree', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           });
 
-          expect(response.apiRef.current.getItemTree()).to.deep.equal([
+          expect(view.apiRef.current.getItemTree()).to.deep.equal([
             { id: '1', children: [{ id: '1.1' }] },
             { id: '2' },
           ]);
         });
 
         it('should have up to date tree when props.items changes', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           });
 
-          response.setItems([{ id: '1' }, { id: '2' }]);
+          view.setItems([{ id: '1' }, { id: '2' }]);
 
-          expect(response.apiRef.current.getItemTree()).to.deep.equal([{ id: '1' }, { id: '2' }]);
+          expect(view.apiRef.current.getItemTree()).to.deep.equal([{ id: '1' }, { id: '2' }]);
         });
 
         it('should contain custom item properties', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', customProp: 'foo' }],
           });
 
-          expect(response.apiRef.current.getItemTree()).to.deep.equal([
-            { id: '1', customProp: 'foo' },
-          ]);
+          expect(view.apiRef.current.getItemTree()).to.deep.equal([{ id: '1', customProp: 'foo' }]);
         });
       });
 
@@ -317,35 +313,29 @@ describeTreeView<
         }
 
         it('should return the children of an item in their rendering order', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', children: [{ id: '1.1' }, { id: '1.2' }] }],
           });
 
-          expect(response.apiRef.current.getItemOrderedChildrenIds('1')).to.deep.equal([
-            '1.1',
-            '1.2',
-          ]);
+          expect(view.apiRef.current.getItemOrderedChildrenIds('1')).to.deep.equal(['1.1', '1.2']);
         });
 
         it('should work for the root items', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
           });
 
-          expect(response.apiRef.current.getItemOrderedChildrenIds(null)).to.deep.equal(['1', '2']);
+          expect(view.apiRef.current.getItemOrderedChildrenIds(null)).to.deep.equal(['1', '2']);
         });
 
         it('should have up to date children when props.items changes', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           });
 
-          response.setItems([{ id: '1', children: [{ id: '1.1' }, { id: '1.2' }] }]);
+          view.setItems([{ id: '1', children: [{ id: '1.1' }, { id: '1.2' }] }]);
 
-          expect(response.apiRef.current.getItemOrderedChildrenIds('1')).to.deep.equal([
-            '1.1',
-            '1.2',
-          ]);
+          expect(view.apiRef.current.getItemOrderedChildrenIds('1')).to.deep.equal(['1.1', '1.2']);
         });
       });
     });
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx
index 790fc886213b..f15ef9c93251 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx
@@ -21,302 +21,302 @@ describeTreeView<
   describe('Navigation (focus and expansion)', () => {
     describe('key: ArrowDown', () => {
       it('should move the focus to a sibling item', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' });
-        expect(response.getFocusedItemId()).to.equal('2');
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' });
+        expect(view.getFocusedItemId()).to.equal('2');
       });
 
       it('should move the focus to a child item', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' });
-        expect(response.getFocusedItemId()).to.equal('1.1');
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' });
+        expect(view.getFocusedItemId()).to.equal('1.1');
       });
 
       it('should move the focus to a child item with a dynamic tree', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           defaultExpandedItems: ['1'],
         });
 
-        response.setItems([{ id: '2' }]);
-        response.setItems([{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }]);
+        view.setItems([{ id: '2' }]);
+        view.setItems([{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }]);
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' });
-        expect(response.getFocusedItemId()).to.equal('1.1');
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' });
+        expect(view.getFocusedItemId()).to.equal('1.1');
       });
 
       it("should move the focus to a parent's sibling", () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }, { id: '2' }] }],
           defaultExpandedItems: ['1'],
         });
 
         act(() => {
-          response.getItemRoot('1.1').focus();
+          view.getItemRoot('1.1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowDown' });
-        expect(response.getFocusedItemId()).to.equal('2');
+        fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowDown' });
+        expect(view.getFocusedItemId()).to.equal('2');
       });
 
       it('should skip disabled items', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }],
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' });
-        expect(response.getFocusedItemId()).to.equal('3');
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' });
+        expect(view.getFocusedItemId()).to.equal('3');
       });
 
       it('should not skip disabled items if disabledItemsFocusable={true}', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }],
           disabledItemsFocusable: true,
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' });
-        expect(response.getFocusedItemId()).to.equal('2');
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' });
+        expect(view.getFocusedItemId()).to.equal('2');
       });
     });
 
     describe('key: ArrowUp', () => {
       it('should move the focus to a sibling item', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
         });
 
         act(() => {
-          response.getItemRoot('2').focus();
+          view.getItemRoot('2').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowUp' });
-        expect(response.getFocusedItemId()).to.equal('1');
+        fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowUp' });
+        expect(view.getFocusedItemId()).to.equal('1');
       });
 
       it('should move the focus to a parent', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
         });
 
         act(() => {
-          response.getItemRoot('1.1').focus();
+          view.getItemRoot('1.1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowUp' });
-        expect(response.getFocusedItemId()).to.equal('1');
+        fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowUp' });
+        expect(view.getFocusedItemId()).to.equal('1');
       });
 
       it("should move the focus to a sibling's child", () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
           defaultExpandedItems: ['1'],
         });
 
         act(() => {
-          response.getItemRoot('2').focus();
+          view.getItemRoot('2').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowUp' });
-        expect(response.getFocusedItemId()).to.equal('1.1');
+        fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowUp' });
+        expect(view.getFocusedItemId()).to.equal('1.1');
       });
 
       it('should skip disabled items', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }],
         });
 
         act(() => {
-          response.getItemRoot('3').focus();
+          view.getItemRoot('3').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp' });
-        expect(response.getFocusedItemId()).to.equal('1');
+        fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp' });
+        expect(view.getFocusedItemId()).to.equal('1');
       });
 
       it('should not skip disabled items if disabledItemsFocusable={true}', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }],
           disabledItemsFocusable: true,
         });
 
         act(() => {
-          response.getItemRoot('3').focus();
+          view.getItemRoot('3').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp' });
-        expect(response.getFocusedItemId()).to.equal('2');
+        fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp' });
+        expect(view.getFocusedItemId()).to.equal('2');
       });
     });
 
     describe('key: ArrowRight', () => {
       it('should open the item and not move the focus if the focus is on a closed item', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowRight' });
-        expect(response.isItemExpanded('1')).to.equal(true);
-        expect(response.getFocusedItemId()).to.equal('1');
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowRight' });
+        expect(view.isItemExpanded('1')).to.equal(true);
+        expect(view.getFocusedItemId()).to.equal('1');
       });
 
       it('should move the focus to the first child if the focus is on an open item', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowRight' });
-        expect(response.getFocusedItemId()).to.equal('1.1');
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowRight' });
+        expect(view.getFocusedItemId()).to.equal('1.1');
       });
 
       it('should do nothing if the focus is on a leaf', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
         });
 
         act(() => {
-          response.getItemRoot('1.1').focus();
+          view.getItemRoot('1.1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowRight' });
-        expect(response.getFocusedItemId()).to.equal('1.1');
+        fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowRight' });
+        expect(view.getFocusedItemId()).to.equal('1.1');
       });
 
       it('should not expand an item with children if it is collapsed but disabled even if disabledItemsFocusable={true}', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', disabled: true, children: [{ id: '1.1' }] }],
           disabledItemsFocusable: true,
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowRight' });
-        expect(response.isItemExpanded('1')).to.equal(false);
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowRight' });
+        expect(view.isItemExpanded('1')).to.equal(false);
       });
     });
 
     describe('key: ArrowLeft', () => {
       it('should close the item if the focus is on an open item', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowLeft' });
-        expect(response.isItemExpanded('1')).to.equal(false);
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowLeft' });
+        expect(view.isItemExpanded('1')).to.equal(false);
       });
 
       it("should move focus to the item's parent if the focus is on a child item that is a leaf", () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
         });
 
         act(() => {
-          response.getItemRoot('1.1').focus();
+          view.getItemRoot('1.1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowLeft' });
-        expect(response.getFocusedItemId()).to.equal('1');
-        expect(response.isItemExpanded('1')).to.equal(true);
+        fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowLeft' });
+        expect(view.getFocusedItemId()).to.equal('1');
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
 
       it("should move the focus to the item's parent if the focus is on a child item that is closed", () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1', children: [{ id: '1.1.1' }] }] }],
           defaultExpandedItems: ['1'],
         });
 
         act(() => {
-          response.getItemRoot('1.1').focus();
+          view.getItemRoot('1.1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowLeft' });
-        expect(response.getFocusedItemId()).to.equal('1');
-        expect(response.isItemExpanded('1')).to.equal(true);
+        fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowLeft' });
+        expect(view.getFocusedItemId()).to.equal('1');
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
 
       it('should do nothing if the focus is on a root item that is closed', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowLeft' });
-        expect(response.getFocusedItemId()).to.equal('1');
-        expect(response.isItemExpanded('1')).to.equal(false);
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowLeft' });
+        expect(view.getFocusedItemId()).to.equal('1');
+        expect(view.isItemExpanded('1')).to.equal(false);
       });
 
       it('should do nothing if the focus is on a root item that is a leaf', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }],
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowLeft' });
-        expect(response.getFocusedItemId()).to.equal('1');
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowLeft' });
+        expect(view.getFocusedItemId()).to.equal('1');
       });
 
       it('should not collapse an item with children if it is collapsed but disabled even if disabledItemsFocusable={true}', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', disabled: true, children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
           disabledItemsFocusable: true,
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowLeft' });
-        expect(response.isItemExpanded('1')).to.equal(true);
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowLeft' });
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
     });
 
     describe('key: Home', () => {
       it('should move the focus to the first item in the tree', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
         });
 
         act(() => {
-          response.getItemRoot('4').focus();
+          view.getItemRoot('4').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('4'), { key: 'Home' });
-        expect(response.getFocusedItemId()).to.equal('1');
+        fireEvent.keyDown(view.getItemRoot('4'), { key: 'Home' });
+        expect(view.getFocusedItemId()).to.equal('1');
       });
     });
 
     describe('key: End', () => {
       it('should move the focus to the last item in the tree when the last item is not expanded', () => {
-        const response = render({
+        const view = render({
           items: [
             { id: '1' },
             { id: '2' },
@@ -326,14 +326,14 @@ describeTreeView<
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'End' });
-        expect(response.getFocusedItemId()).to.equal('4');
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'End' });
+        expect(view.getFocusedItemId()).to.equal('4');
       });
 
       it('should move the focus to the last item in the tree when the last item is expanded', () => {
-        const response = render({
+        const view = render({
           items: [
             { id: '1' },
             { id: '2' },
@@ -344,16 +344,16 @@ describeTreeView<
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'End' });
-        expect(response.getFocusedItemId()).to.equal('4.1.1');
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'End' });
+        expect(view.getFocusedItemId()).to.equal('4.1.1');
       });
     });
 
     describe('key: * (asterisk)', () => {
       it('should expand all items that are at the same depth as the current item (depth = 0)', () => {
-        const response = render({
+        const view = render({
           items: [
             { id: '1', children: [{ id: '1.1' }] },
             { id: '2', children: [{ id: '2.1' }] },
@@ -363,22 +363,22 @@ describeTreeView<
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
 
-        expect(response.isItemExpanded('1')).to.equal(false);
-        expect(response.isItemExpanded('2')).to.equal(false);
-        expect(response.isItemExpanded('3')).to.equal(false);
+        expect(view.isItemExpanded('1')).to.equal(false);
+        expect(view.isItemExpanded('2')).to.equal(false);
+        expect(view.isItemExpanded('3')).to.equal(false);
 
-        fireEvent.keyDown(response.getItemRoot('1'), { key: '*' });
-        expect(response.isItemExpanded('1')).to.equal(true);
-        expect(response.isItemExpanded('2')).to.equal(true);
-        expect(response.isItemExpanded('3')).to.equal(true);
-        expect(response.isItemExpanded('3.1')).to.equal(false);
+        fireEvent.keyDown(view.getItemRoot('1'), { key: '*' });
+        expect(view.isItemExpanded('1')).to.equal(true);
+        expect(view.isItemExpanded('2')).to.equal(true);
+        expect(view.isItemExpanded('3')).to.equal(true);
+        expect(view.isItemExpanded('3.1')).to.equal(false);
       });
 
       it('should expand all items that are at the same depth as the current item (depth = 1)', () => {
-        const response = render({
+        const view = render({
           items: [
             { id: '1', children: [{ id: '1.1' }] },
             { id: '2', children: [{ id: '2.1' }] },
@@ -397,60 +397,60 @@ describeTreeView<
         });
 
         act(() => {
-          response.getItemRoot('3.1').focus();
+          view.getItemRoot('3.1').focus();
         });
 
-        expect(response.isItemExpanded('1')).to.equal(false);
-        expect(response.isItemExpanded('2')).to.equal(false);
-        expect(response.isItemExpanded('3')).to.equal(true);
-        expect(response.isItemExpanded('3.1')).to.equal(false);
+        expect(view.isItemExpanded('1')).to.equal(false);
+        expect(view.isItemExpanded('2')).to.equal(false);
+        expect(view.isItemExpanded('3')).to.equal(true);
+        expect(view.isItemExpanded('3.1')).to.equal(false);
 
-        fireEvent.keyDown(response.getItemRoot('3.1'), { key: '*' });
-        expect(response.isItemExpanded('1')).to.equal(false);
-        expect(response.isItemExpanded('2')).to.equal(false);
-        expect(response.isItemExpanded('3')).to.equal(true);
-        expect(response.isItemExpanded('3.1')).to.equal(true);
-        expect(response.isItemExpanded('3.1.2')).to.equal(false);
+        fireEvent.keyDown(view.getItemRoot('3.1'), { key: '*' });
+        expect(view.isItemExpanded('1')).to.equal(false);
+        expect(view.isItemExpanded('2')).to.equal(false);
+        expect(view.isItemExpanded('3')).to.equal(true);
+        expect(view.isItemExpanded('3.1')).to.equal(true);
+        expect(view.isItemExpanded('3.1.2')).to.equal(false);
       });
     });
 
     describe('key: Enter', () => {
       it('should expand an item with children if it is collapsed', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' });
-        expect(response.isItemExpanded('1')).to.equal(true);
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' });
+        expect(view.isItemExpanded('1')).to.equal(true);
       });
 
       it('should collapse an item with children if it is expanded', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' });
-        expect(response.isItemExpanded('1')).to.equal(false);
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' });
+        expect(view.isItemExpanded('1')).to.equal(false);
       });
 
       it('should not expand an item with children if it is collapsed but disabled even if disabledItemsFocusable={true}', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', disabled: true, children: [{ id: '1.1' }] }],
           disabledItemsFocusable: true,
         });
 
         act(() => {
-          response.getItemRoot('1').focus();
+          view.getItemRoot('1').focus();
         });
-        fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' });
-        expect(response.isItemExpanded('1')).to.equal(false);
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' });
+        expect(view.isItemExpanded('1')).to.equal(false);
       });
     });
   });
@@ -459,119 +459,119 @@ describeTreeView<
     describe('single selection', () => {
       describe('key: Space', () => {
         it('should select the focused item when Space is pressed', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' });
-          expect(response.isItemSelected('1')).to.equal(true);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' });
+          expect(view.isItemSelected('1')).to.equal(true);
         });
 
         it('should not un-select the focused item when Space is pressed', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['1'],
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' });
-          expect(response.isItemSelected('1')).to.equal(true);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' });
+          expect(view.isItemSelected('1')).to.equal(true);
         });
 
         it('should not select the focused item when Space is pressed and disableSelection={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             disableSelection: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' });
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' });
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not select the focused item when Space is pressed and the item is disabled', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }, { id: '2' }],
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' });
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' });
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not select the focused item when Space is pressed and the item is disabled even if disabledItemsFocusable={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }, { id: '2' }],
             disabledItemsFocusable: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' });
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' });
+          expect(view.isItemSelected('1')).to.equal(false);
         });
       });
 
       describe('key: Enter', () => {
         it('should select the focused item when Enter is pressed', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' });
-          expect(response.isItemSelected('1')).to.equal(true);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' });
+          expect(view.isItemSelected('1')).to.equal(true);
         });
 
         it('should not un-select the focused item when Enter is pressed', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['1'],
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' });
-          expect(response.isItemSelected('1')).to.equal(true);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' });
+          expect(view.isItemSelected('1')).to.equal(true);
         });
 
         it('should not select the focused item when Enter is pressed and disableSelection={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             disableSelection: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' });
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' });
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not select the focused item when Enter is pressed and the item is disabled even if disabledItemsFocusable={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }, { id: '2' }],
             disabledItemsFocusable: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' });
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' });
+          expect(view.isItemSelected('1')).to.equal(false);
         });
       });
     });
@@ -579,179 +579,179 @@ describeTreeView<
     describe('multi selection', () => {
       describe('key: Space', () => {
         it('should select the focused item without un-selecting the other selected items when Space is pressed', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             multiSelect: true,
             defaultSelectedItems: ['1'],
           });
 
           act(() => {
-            response.getItemRoot('2').focus();
+            view.getItemRoot('2').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('2'), { key: ' ' });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']);
+          fireEvent.keyDown(view.getItemRoot('2'), { key: ' ' });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']);
         });
 
         it('should un-select the focused item when Space is pressed', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             multiSelect: true,
             defaultSelectedItems: ['1', '2'],
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
         });
 
         it('should select the focused item without un-selecting the other selected items when Space is pressed while holding Ctrl', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             multiSelect: true,
             defaultSelectedItems: ['1'],
           });
 
           act(() => {
-            response.getItemRoot('2').focus();
+            view.getItemRoot('2').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('2'), { key: ' ', ctrlKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']);
+          fireEvent.keyDown(view.getItemRoot('2'), { key: ' ', ctrlKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']);
         });
 
         it('should un-select the focused item when Space is pressed while holding Ctrl', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             multiSelect: true,
             defaultSelectedItems: ['1', '2'],
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: ' ', ctrlKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: ' ', ctrlKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
         });
 
         it('should not select the focused item when Space is pressed and disableSelection={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             multiSelect: true,
             disableSelection: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' });
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
 
         it('should not select the focused item when Space is pressed and the item is disabled', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }, { id: '2' }],
             multiSelect: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' });
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
 
         it('should not select the focused item when Space is pressed and the item is disabled even if disabledItemsFocusable={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }, { id: '2' }],
             multiSelect: true,
             disabledItemsFocusable: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' });
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
       });
 
       describe('key: ArrowDown', () => {
         it('should expand the selection range when ArrowDown is pressed while holding Shift from a selected item', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             defaultSelectedItems: ['2'],
           });
 
           act(() => {
-            response.getItemRoot('2').focus();
+            view.getItemRoot('2').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']);
+          fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']);
         });
 
         it('should not un-select the item below the focused item when ArrowDown is pressed while holding Shift from a selected item', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             defaultSelectedItems: ['2', '3'],
           });
 
           act(() => {
-            response.getItemRoot('2').focus();
+            view.getItemRoot('2').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']);
+          fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']);
         });
 
         it('should un-select the focused item when ArrowDown is pressed while holding Shift and the item below have been selected in the same range', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             defaultSelectedItems: ['3'],
           });
 
           act(() => {
-            response.getItemRoot('3').focus();
+            view.getItemRoot('3').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']);
+          fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']);
 
-          fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['3']);
+          fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['3']);
         });
 
         it('should not select any item when ArrowDown is pressed while holding Shift and disabledSelection={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             multiSelect: true,
             disableSelection: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
 
         it('should select the next non-disabled item when ArrowDown is pressed while holding Shift', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }],
             multiSelect: true,
             defaultSelectedItems: ['1'],
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']);
         });
 
         it('should not select the next item when ArrowDown is pressed while holding Shift if the next item is disabled and disabledItemsFocusable={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }],
             multiSelect: true,
             disabledItemsFocusable: true,
@@ -759,104 +759,104 @@ describeTreeView<
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
-          expect(response.getFocusedItemId()).to.equal('2');
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
+          expect(view.getFocusedItemId()).to.equal('2');
         });
 
         it('should select the next item when ArrowDown is pressed while holding Shift if the focused item is disabled and disabledItemsFocusable={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }, { id: '2' }, { id: '3' }],
             multiSelect: true,
             disabledItemsFocusable: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
         });
       });
 
       describe('key: ArrowUp', () => {
         it('should expand the selection range when ArrowUp is pressed while holding Shift from a selected item', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             defaultSelectedItems: ['3'],
           });
 
           act(() => {
-            response.getItemRoot('3').focus();
+            view.getItemRoot('3').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']);
+          fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']);
         });
 
         it('should not un-select the item above the focused item when ArrowUp is pressed while holding Shift from a selected item', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             defaultSelectedItems: ['2', '3'],
           });
 
           act(() => {
-            response.getItemRoot('3').focus();
+            view.getItemRoot('3').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']);
+          fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']);
         });
 
         it('should un-select the focused item when ArrowUp is pressed while holding Shift and the item above have been selected in the same range', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             defaultSelectedItems: ['2'],
           });
 
           act(() => {
-            response.getItemRoot('2').focus();
+            view.getItemRoot('2').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']);
+          fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']);
 
-          fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
         });
 
         it('should not select any item when ArrowUp is pressed while holding Shift and disabledSelection={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             multiSelect: true,
             disableSelection: true,
           });
 
           act(() => {
-            response.getItemRoot('2').focus();
+            view.getItemRoot('2').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowUp', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowUp', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
 
         it('should select the next non-disabled item when ArrowUp is pressed while holding Shift', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }],
             multiSelect: true,
             defaultSelectedItems: ['3'],
           });
 
           act(() => {
-            response.getItemRoot('3').focus();
+            view.getItemRoot('3').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']);
+          fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']);
         });
 
         it('should not select the next item when ArrowUp is pressed while holding Shift if the next item is disabled and disabledItemsFocusable={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }],
             multiSelect: true,
             disabledItemsFocusable: true,
@@ -864,67 +864,67 @@ describeTreeView<
           });
 
           act(() => {
-            response.getItemRoot('3').focus();
+            view.getItemRoot('3').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['3']);
-          expect(response.getFocusedItemId()).to.equal('2');
+          fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['3']);
+          expect(view.getFocusedItemId()).to.equal('2');
         });
 
         it('should select the previous item when ArrowUp is pressed while holding Shift if the focused item is disabled and disabledItemsFocusable={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3', disabled: true }],
             multiSelect: true,
             disabledItemsFocusable: true,
           });
 
           act(() => {
-            response.getItemRoot('3').focus();
+            view.getItemRoot('3').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
         });
       });
 
       describe('key: Home', () => {
         it('should select select the focused item and all the items above when Home is pressed while holding Shift + Ctrl', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2', children: [{ id: '2.1' }] }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             defaultExpandedItems: ['2'],
           });
 
           act(() => {
-            response.getItemRoot('3').focus();
+            view.getItemRoot('3').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('3'), {
+          fireEvent.keyDown(view.getItemRoot('3'), {
             key: 'Home',
             shiftKey: true,
             ctrlKey: true,
           });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']);
         });
 
         it('should not select any item when Home is pressed while holding Shift + Ctrl and disableSelection={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             disableSelection: true,
           });
 
           act(() => {
-            response.getItemRoot('3').focus();
+            view.getItemRoot('3').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('3'), {
+          fireEvent.keyDown(view.getItemRoot('3'), {
             key: 'Home',
             shiftKey: true,
             ctrlKey: true,
           });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
 
         it('should not select disabled items when Home is pressed while holding Shift + Ctrl', () => {
-          const response = render({
+          const view = render({
             items: [
               { id: '1' },
               { id: '2', disabled: true, children: [{ id: '2.1' }] },
@@ -936,56 +936,56 @@ describeTreeView<
           });
 
           act(() => {
-            response.getItemRoot('3').focus();
+            view.getItemRoot('3').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('3'), {
+          fireEvent.keyDown(view.getItemRoot('3'), {
             key: 'Home',
             shiftKey: true,
             ctrlKey: true,
           });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']);
         });
       });
 
       describe('key: End', () => {
         it('should select select the focused item and all the items below when End is pressed while holding Shift + Ctrl', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2', children: [{ id: '2.1' }] }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             defaultExpandedItems: ['2'],
           });
 
           act(() => {
-            response.getItemRoot('2').focus();
+            view.getItemRoot('2').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('2'), {
+          fireEvent.keyDown(view.getItemRoot('2'), {
             key: 'End',
             shiftKey: true,
             ctrlKey: true,
           });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3', '4']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3', '4']);
         });
 
         it('should not select any item when End is pressed while holding Shift + Ctrl and disableSelection={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             disableSelection: true,
           });
 
           act(() => {
-            response.getItemRoot('2').focus();
+            view.getItemRoot('2').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('2'), {
+          fireEvent.keyDown(view.getItemRoot('2'), {
             key: 'End',
             shiftKey: true,
             ctrlKey: true,
           });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
 
         it('should not select disabled items when End is pressed while holding Shift + Ctrl', () => {
-          const response = render({
+          const view = render({
             items: [
               { id: '1' },
               { id: '2' },
@@ -997,47 +997,47 @@ describeTreeView<
           });
 
           act(() => {
-            response.getItemRoot('2').focus();
+            view.getItemRoot('2').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('2'), {
+          fireEvent.keyDown(view.getItemRoot('2'), {
             key: 'End',
             shiftKey: true,
             ctrlKey: true,
           });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '4']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '4']);
         });
       });
 
       describe('key: Ctrl + A', () => {
         it('should select all items when Ctrl + A is pressed', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
             multiSelect: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'a', ctrlKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2', '3', '4']);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'a', ctrlKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2', '3', '4']);
         });
 
         it('should not select any item when Ctrl + A is pressed and disableSelection={true}', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
             multiSelect: true,
             disableSelection: true,
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'a', ctrlKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'a', ctrlKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
 
         it('should not select disabled items when Ctrl + A is pressed', () => {
-          const response = render({
+          const view = render({
             items: [
               { id: '1' },
               { id: '2', disabled: true, children: [{ id: '2.1' }] },
@@ -1048,10 +1048,10 @@ describeTreeView<
           });
 
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'a', ctrlKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3', '4']);
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'a', ctrlKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3', '4']);
         });
       });
     });
@@ -1059,7 +1059,7 @@ describeTreeView<
 
   describe('Type-ahead', () => {
     it('should move the focus to the next item with a name that starts with the typed character', () => {
-      const response = render({
+      const view = render({
         items: [
           { id: '1', label: 'one' },
           { id: '2', label: 'two' },
@@ -1069,45 +1069,45 @@ describeTreeView<
       });
 
       act(() => {
-        response.getItemRoot('1').focus();
+        view.getItemRoot('1').focus();
       });
-      expect(response.getFocusedItemId()).to.equal('1');
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: 't' });
-      expect(response.getFocusedItemId()).to.equal('2');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: 't' });
+      expect(view.getFocusedItemId()).to.equal('2');
 
-      fireEvent.keyDown(response.getItemRoot('2'), { key: 'f' });
-      expect(response.getFocusedItemId()).to.equal('4');
+      fireEvent.keyDown(view.getItemRoot('2'), { key: 'f' });
+      expect(view.getFocusedItemId()).to.equal('4');
 
-      fireEvent.keyDown(response.getItemRoot('4'), { key: 'o' });
-      expect(response.getFocusedItemId()).to.equal('1');
+      fireEvent.keyDown(view.getItemRoot('4'), { key: 'o' });
+      expect(view.getFocusedItemId()).to.equal('1');
     });
 
     it('should move to the next item in the displayed order when typing the same starting character', () => {
-      const response = render({
+      const view = render({
         items: [{ id: 'A1' }, { id: 'B1' }, { id: 'A2' }, { id: 'B3' }, { id: 'B2' }],
       });
 
       act(() => {
-        response.getItemRoot('A1').focus();
+        view.getItemRoot('A1').focus();
       });
-      expect(response.getFocusedItemId()).to.equal('A1');
+      expect(view.getFocusedItemId()).to.equal('A1');
 
-      fireEvent.keyDown(response.getItemRoot('A1'), { key: 'b' });
-      expect(response.getFocusedItemId()).to.equal('B1');
+      fireEvent.keyDown(view.getItemRoot('A1'), { key: 'b' });
+      expect(view.getFocusedItemId()).to.equal('B1');
 
-      fireEvent.keyDown(response.getItemRoot('B1'), { key: 'b' });
-      expect(response.getFocusedItemId()).to.equal('B3');
+      fireEvent.keyDown(view.getItemRoot('B1'), { key: 'b' });
+      expect(view.getFocusedItemId()).to.equal('B3');
 
-      fireEvent.keyDown(response.getItemRoot('B3'), { key: 'b' });
-      expect(response.getFocusedItemId()).to.equal('B2');
+      fireEvent.keyDown(view.getItemRoot('B3'), { key: 'b' });
+      expect(view.getFocusedItemId()).to.equal('B2');
 
-      fireEvent.keyDown(response.getItemRoot('B2'), { key: 'b' });
-      expect(response.getFocusedItemId()).to.equal('B1');
+      fireEvent.keyDown(view.getItemRoot('B2'), { key: 'b' });
+      expect(view.getFocusedItemId()).to.equal('B1');
     });
 
     it('should work with capitalized label', () => {
-      const response = render({
+      const view = render({
         items: [
           { id: '1', label: 'One' },
           { id: '2', label: 'Two' },
@@ -1117,18 +1117,18 @@ describeTreeView<
       });
 
       act(() => {
-        response.getItemRoot('1').focus();
+        view.getItemRoot('1').focus();
       });
-      expect(response.getFocusedItemId()).to.equal('1');
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: 't' });
-      expect(response.getFocusedItemId()).to.equal('2');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: 't' });
+      expect(view.getFocusedItemId()).to.equal('2');
 
-      fireEvent.keyDown(response.getItemRoot('2'), { key: 'f' });
-      expect(response.getFocusedItemId()).to.equal('4');
+      fireEvent.keyDown(view.getItemRoot('2'), { key: 'f' });
+      expect(view.getFocusedItemId()).to.equal('4');
 
-      fireEvent.keyDown(response.getItemRoot('4'), { key: 'o' });
-      expect(response.getFocusedItemId()).to.equal('1');
+      fireEvent.keyDown(view.getItemRoot('4'), { key: 'o' });
+      expect(view.getFocusedItemId()).to.equal('1');
     });
 
     it('should work with ReactElement label', function test() {
@@ -1137,7 +1137,7 @@ describeTreeView<
         this.skip();
       }
 
-      const response = render({
+      const view = render({
         items: [
           { id: '1', label: <span>one</span> },
           { id: '2', label: <span>two</span> },
@@ -1147,47 +1147,47 @@ describeTreeView<
       });
 
       act(() => {
-        response.getItemRoot('1').focus();
+        view.getItemRoot('1').focus();
       });
-      expect(response.getFocusedItemId()).to.equal('1');
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: 't' });
-      expect(response.getFocusedItemId()).to.equal('2');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: 't' });
+      expect(view.getFocusedItemId()).to.equal('2');
 
-      fireEvent.keyDown(response.getItemRoot('2'), { key: 'f' });
-      expect(response.getFocusedItemId()).to.equal('4');
+      fireEvent.keyDown(view.getItemRoot('2'), { key: 'f' });
+      expect(view.getFocusedItemId()).to.equal('4');
 
-      fireEvent.keyDown(response.getItemRoot('4'), { key: 'o' });
-      expect(response.getFocusedItemId()).to.equal('1');
+      fireEvent.keyDown(view.getItemRoot('4'), { key: 'o' });
+      expect(view.getFocusedItemId()).to.equal('1');
     });
 
     it('should work after adding / removing items', () => {
-      const response = render({
+      const view = render({
         items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }],
       });
 
       act(() => {
-        response.getItemRoot('1').focus();
+        view.getItemRoot('1').focus();
       });
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: '4' });
-      expect(response.getFocusedItemId()).to.equal('4');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: '4' });
+      expect(view.getFocusedItemId()).to.equal('4');
 
-      response.setItems([{ id: '1' }, { id: '2' }, { id: '3' }]);
-      expect(response.getFocusedItemId()).to.equal('1');
+      view.setItems([{ id: '1' }, { id: '2' }, { id: '3' }]);
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: '2' });
-      expect(response.getFocusedItemId()).to.equal('2');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: '2' });
+      expect(view.getFocusedItemId()).to.equal('2');
 
-      response.setItems([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]);
-      expect(response.getFocusedItemId()).to.equal('2');
+      view.setItems([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]);
+      expect(view.getFocusedItemId()).to.equal('2');
 
-      fireEvent.keyDown(response.getItemRoot('2'), { key: '4' });
-      expect(response.getFocusedItemId()).to.equal('4');
+      fireEvent.keyDown(view.getItemRoot('2'), { key: '4' });
+      expect(view.getFocusedItemId()).to.equal('4');
     });
 
     it('should not move focus when a modifier key and a letter are pressed', () => {
-      const response = render({
+      const view = render({
         items: [
           { id: '1', label: 'one' },
           { id: '2', label: 'two' },
@@ -1197,22 +1197,22 @@ describeTreeView<
       });
 
       act(() => {
-        response.getItemRoot('1').focus();
+        view.getItemRoot('1').focus();
       });
-      expect(response.getFocusedItemId()).to.equal('1');
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: 't', ctrlKey: true });
-      expect(response.getFocusedItemId()).to.equal('1');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: 't', ctrlKey: true });
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: 't', metaKey: true });
-      expect(response.getFocusedItemId()).to.equal('1');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: 't', metaKey: true });
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: 't', shiftKey: true });
-      expect(response.getFocusedItemId()).to.equal('1');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: 't', shiftKey: true });
+      expect(view.getFocusedItemId()).to.equal('1');
     });
 
     it('should work on disabled item when disabledItemsFocusable={true}', () => {
-      const response = render({
+      const view = render({
         items: [
           { id: '1', label: 'one', disabled: true },
           { id: '2', label: 'two', disabled: true },
@@ -1223,16 +1223,16 @@ describeTreeView<
       });
 
       act(() => {
-        response.getItemRoot('1').focus();
+        view.getItemRoot('1').focus();
       });
-      expect(response.getFocusedItemId()).to.equal('1');
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: 't' });
-      expect(response.getFocusedItemId()).to.equal('2');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: 't' });
+      expect(view.getFocusedItemId()).to.equal('2');
     });
 
     it('should not move focus on disabled item when disabledItemsFocusable={false}', () => {
-      const response = render({
+      const view = render({
         items: [
           { id: '1', label: 'one', disabled: true },
           { id: '2', label: 'two', disabled: true },
@@ -1243,12 +1243,12 @@ describeTreeView<
       });
 
       act(() => {
-        response.getItemRoot('1').focus();
+        view.getItemRoot('1').focus();
       });
-      expect(response.getFocusedItemId()).to.equal('1');
+      expect(view.getFocusedItemId()).to.equal('1');
 
-      fireEvent.keyDown(response.getItemRoot('1'), { key: 't' });
-      expect(response.getFocusedItemId()).to.equal('1');
+      fireEvent.keyDown(view.getItemRoot('1'), { key: 't' });
+      expect(view.getFocusedItemId()).to.equal('1');
     });
   });
 
@@ -1257,13 +1257,13 @@ describeTreeView<
       const handleTreeViewKeyDown = spy();
       const handleTreeItemKeyDown = spy();
 
-      const response = render({
+      const view = render({
         items: [{ id: '1' }],
         onKeyDown: handleTreeViewKeyDown,
         slotProps: { item: { onKeyDown: handleTreeItemKeyDown } },
       } as any);
 
-      const itemRoot = response.getItemRoot('1');
+      const itemRoot = view.getItemRoot('1');
       act(() => {
         itemRoot.focus();
       });
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.test.tsx
index 05fe270d5248..a89bbdbd8e05 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.test.tsx
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.test.tsx
@@ -13,17 +13,17 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', editable: false }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.doubleClick(response.getItemLabel('1'));
+          fireEvent.doubleClick(view.getItemLabel('1'));
 
-          expect(response.getItemLabelInput('1')).to.equal(null);
+          expect(view.getItemLabelInput('1')).to.equal(null);
         });
 
         it('should render labelInput when double clicked if item is editable', function test() {
@@ -31,17 +31,17 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', editable: true }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.doubleClick(response.getItemLabel('1'));
+          fireEvent.doubleClick(view.getItemLabel('1'));
 
-          expect(response.getItemLabelInput('1')).not.to.equal(null);
+          expect(view.getItemLabelInput('1')).not.to.equal(null);
         });
 
         it('should not render label when double clicked if item is editable', function test() {
@@ -49,17 +49,17 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', editable: true }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.doubleClick(response.getItemLabel('1'));
+          fireEvent.doubleClick(view.getItemLabel('1'));
 
-          expect(response.getItemLabel('1')).to.equal(null);
+          expect(view.getItemLabel('1')).to.equal(null);
         });
 
         it('should not render labelInput on Enter if item is not editable', function test() {
@@ -67,18 +67,18 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', editable: false }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' });
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' });
 
-          expect(response.getItemLabelInput('1')).to.equal(null);
-          expect(response.getItemLabel('1')).not.to.equal(null);
+          expect(view.getItemLabelInput('1')).to.equal(null);
+          expect(view.getItemLabel('1')).not.to.equal(null);
         });
 
         it('should render labelInput on Enter if item is editable', function test() {
@@ -86,17 +86,17 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', editable: true }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' });
+          fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' });
 
-          expect(response.getItemLabelInput('1')).not.to.equal(null);
+          expect(view.getItemLabelInput('1')).not.to.equal(null);
         });
 
         it('should unmount labelInput after save', function test() {
@@ -104,19 +104,19 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', label: 'test', editable: true }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.doubleClick(response.getItemLabel('1'));
-          fireEvent.keyDown(response.getItemLabelInput('1'), { key: 'Enter' });
+          fireEvent.doubleClick(view.getItemLabel('1'));
+          fireEvent.keyDown(view.getItemLabelInput('1'), { key: 'Enter' });
 
-          expect(response.getItemLabelInput('1')).to.equal(null);
-          expect(response.getItemLabel('1')).not.to.equal(null);
+          expect(view.getItemLabelInput('1')).to.equal(null);
+          expect(view.getItemLabel('1')).not.to.equal(null);
         });
 
         it('should unmount labelInput after cancel', function test() {
@@ -124,19 +124,19 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', label: 'test', editable: true }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.doubleClick(response.getItemLabel('1'));
-          fireEvent.keyDown(response.getItemLabelInput('1'), { key: 'Esc' });
+          fireEvent.doubleClick(view.getItemLabel('1'));
+          fireEvent.keyDown(view.getItemLabelInput('1'), { key: 'Esc' });
 
-          expect(response.getItemLabelInput('1')).to.equal(null);
-          expect(response.getItemLabel('1')).not.to.equal(null);
+          expect(view.getItemLabelInput('1')).to.equal(null);
+          expect(view.getItemLabel('1')).not.to.equal(null);
         });
       });
 
@@ -146,17 +146,17 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', label: 'test', editable: true }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.doubleClick(response.getItemLabel('1'));
+          fireEvent.doubleClick(view.getItemLabel('1'));
 
-          expect(response.getItemLabelInput('1').value).to.equal('test');
+          expect(view.getItemLabelInput('1').value).to.equal('test');
         });
 
         it('should save new value on Enter', function test() {
@@ -164,19 +164,19 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', label: 'test', editable: true }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.doubleClick(response.getItemLabel('1'));
-          fireEvent.change(response.getItemLabelInput('1'), { target: { value: 'new value' } });
-          fireEvent.keyDown(response.getItemLabelInput('1'), { key: 'Enter' });
+          fireEvent.doubleClick(view.getItemLabel('1'));
+          fireEvent.change(view.getItemLabelInput('1'), { target: { value: 'new value' } });
+          fireEvent.keyDown(view.getItemLabelInput('1'), { key: 'Enter' });
 
-          expect(response.getItemLabel('1').textContent).to.equal('new value');
+          expect(view.getItemLabel('1').textContent).to.equal('new value');
         });
 
         it('should hold new value on render after save', function test() {
@@ -184,20 +184,20 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', label: 'test', editable: true }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.doubleClick(response.getItemLabel('1'));
-          fireEvent.change(response.getItemLabelInput('1'), { target: { value: 'new value' } });
-          fireEvent.keyDown(response.getItemLabelInput('1'), { key: 'Enter' });
-          fireEvent.doubleClick(response.getItemLabel('1'));
+          fireEvent.doubleClick(view.getItemLabel('1'));
+          fireEvent.change(view.getItemLabelInput('1'), { target: { value: 'new value' } });
+          fireEvent.keyDown(view.getItemLabelInput('1'), { key: 'Enter' });
+          fireEvent.doubleClick(view.getItemLabel('1'));
 
-          expect(response.getItemLabelInput('1').value).to.equal('new value');
+          expect(view.getItemLabelInput('1').value).to.equal('new value');
         });
 
         it('should hold initial value on render after cancel', function test() {
@@ -205,21 +205,21 @@ describeTreeView<[UseTreeViewLabelSignature]>(
           if (treeViewComponentName.startsWith('SimpleTreeView')) {
             this.skip();
           }
-          const response = render({
+          const view = render({
             experimentalFeatures: { labelEditing: true },
             items: [{ id: '1', label: 'test', editable: true }],
             isItemEditable: (item) => item.editable,
           });
           act(() => {
-            response.getItemRoot('1').focus();
+            view.getItemRoot('1').focus();
           });
-          fireEvent.doubleClick(response.getItemLabel('1'));
-          fireEvent.change(response.getItemLabelInput('1'), { target: { value: 'new value' } });
-          fireEvent.keyDown(response.getItemLabelInput('1'), { key: 'Esc' });
-          expect(response.getItemLabel('1').textContent).to.equal('test');
+          fireEvent.doubleClick(view.getItemLabel('1'));
+          fireEvent.change(view.getItemLabelInput('1'), { target: { value: 'new value' } });
+          fireEvent.keyDown(view.getItemLabelInput('1'), { key: 'Esc' });
+          expect(view.getItemLabel('1').textContent).to.equal('test');
 
-          fireEvent.doubleClick(response.getItemLabel('1'));
-          expect(response.getItemLabelInput('1').value).to.equal('test');
+          fireEvent.doubleClick(view.getItemLabel('1'));
+          expect(view.getItemLabelInput('1').value).to.equal('test');
         });
       });
     });
@@ -229,15 +229,15 @@ describeTreeView<[UseTreeViewLabelSignature]>(
         if (treeViewComponentName.startsWith('SimpleTreeView')) {
           this.skip();
         }
-        const response = render({
+        const view = render({
           items: [{ id: '1', label: 'test' }],
         });
 
         act(() => {
-          response.apiRef.current.updateItemLabel('1', 'new value');
+          view.apiRef.current.updateItemLabel('1', 'new value');
         });
 
-        expect(response.getItemLabel('1').textContent).to.equal('new value');
+        expect(view.getItemLabel('1').textContent).to.equal('new value');
       });
     });
   },
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.test.tsx
index 3664db627d13..0f80094dc69a 100644
--- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.test.tsx
+++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.test.tsx
@@ -16,60 +16,60 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
   ({ render }) => {
     describe('model props (selectedItems, defaultSelectedItems, onSelectedItemsChange)', () => {
       it('should not select items when no default state and no control state are defined', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
         });
 
-        expect(response.isItemSelected('1')).to.equal(false);
+        expect(view.isItemSelected('1')).to.equal(false);
       });
 
       it('should use the default state when defined', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
           defaultSelectedItems: ['1'],
         });
 
-        expect(response.isItemSelected('1')).to.equal(true);
+        expect(view.isItemSelected('1')).to.equal(true);
       });
 
       it('should use the controlled state when defined', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
           selectedItems: ['1'],
         });
 
-        expect(response.isItemSelected('1')).to.equal(true);
+        expect(view.isItemSelected('1')).to.equal(true);
       });
 
       it('should use the controlled state instead of the default state when both are defined', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
           selectedItems: ['1'],
           defaultSelectedItems: ['2'],
         });
 
-        expect(response.isItemSelected('1')).to.equal(true);
+        expect(view.isItemSelected('1')).to.equal(true);
       });
 
       it('should react to controlled state update', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
           selectedItems: [],
         });
 
-        response.setProps({ selectedItems: ['1'] });
-        expect(response.isItemSelected('1')).to.equal(true);
+        view.setProps({ selectedItems: ['1'] });
+        expect(view.isItemSelected('1')).to.equal(true);
       });
 
       it('should call the onSelectedItemsChange callback when the model is updated (single selection and add selected item)', () => {
         const onSelectedItemsChange = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
           onSelectedItemsChange,
         });
 
-        fireEvent.click(response.getItemContent('1'));
+        fireEvent.click(view.getItemContent('1'));
 
         expect(onSelectedItemsChange.callCount).to.equal(1);
         expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal('1');
@@ -80,13 +80,13 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
       it.skip('should call onSelectedItemsChange callback when the model is updated (single selection and remove selected item', () => {
         const onSelectedItemsChange = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
           onSelectedItemsChange,
           defaultSelectedItems: ['1'],
         });
 
-        fireEvent.click(response.getItemContent('1'));
+        fireEvent.click(view.getItemContent('1'));
 
         expect(onSelectedItemsChange.callCount).to.equal(1);
         expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal([]);
@@ -95,13 +95,13 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
       it('should call the onSelectedItemsChange callback when the model is updated (multi selection and add selected item to empty list)', () => {
         const onSelectedItemsChange = spy();
 
-        const response = render({
+        const view = render({
           multiSelect: true,
           items: [{ id: '1' }, { id: '2' }],
           onSelectedItemsChange,
         });
 
-        fireEvent.click(response.getItemContent('1'));
+        fireEvent.click(view.getItemContent('1'));
 
         expect(onSelectedItemsChange.callCount).to.equal(1);
         expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal(['1']);
@@ -110,14 +110,14 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
       it('should call the onSelectedItemsChange callback when the model is updated (multi selection and add selected item to non-empty list)', () => {
         const onSelectedItemsChange = spy();
 
-        const response = render({
+        const view = render({
           multiSelect: true,
           items: [{ id: '1' }, { id: '2' }],
           onSelectedItemsChange,
           defaultSelectedItems: ['1'],
         });
 
-        fireEvent.click(response.getItemContent('2'), { ctrlKey: true });
+        fireEvent.click(view.getItemContent('2'), { ctrlKey: true });
 
         expect(onSelectedItemsChange.callCount).to.equal(1);
         expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal(['2', '1']);
@@ -126,41 +126,41 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
       it('should call the onSelectedItemsChange callback when the model is updated (multi selection and remove selected item)', () => {
         const onSelectedItemsChange = spy();
 
-        const response = render({
+        const view = render({
           multiSelect: true,
           items: [{ id: '1' }, { id: '2' }],
           onSelectedItemsChange,
           defaultSelectedItems: ['1'],
         });
 
-        fireEvent.click(response.getItemContent('1'), { ctrlKey: true });
+        fireEvent.click(view.getItemContent('1'), { ctrlKey: true });
 
         expect(onSelectedItemsChange.callCount).to.equal(1);
         expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal([]);
       });
 
       it('should warn when switching from controlled to uncontrolled', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
           selectedItems: [],
         });
 
         expect(() => {
-          response.setProps({ selectedItems: undefined });
+          view.setProps({ selectedItems: undefined });
         }).toErrorDev(
           'MUI X: A component is changing the controlled selectedItems state of TreeView to be uncontrolled.',
         );
       });
 
       it('should warn and not react to update when updating the default state', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
           defaultSelectedItems: ['1'],
         });
 
         expect(() => {
-          response.setProps({ defaultSelectedItems: ['2'] });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
+          view.setProps({ defaultSelectedItems: ['2'] });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
         }).toErrorDev(
           'MUI X: A component is changing the default selectedItems state of an uncontrolled TreeView after being initialized. To suppress this warning opt to use a controlled TreeView.',
         );
@@ -170,197 +170,197 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
     describe('item click interaction', () => {
       describe('single selection', () => {
         it('should select un-selected item when clicking on an item content', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.isItemSelected('1')).to.equal(true);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.isItemSelected('1')).to.equal(true);
         });
 
         it('should not un-select selected item when clicking on an item content', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: '1',
           });
 
-          expect(response.isItemSelected('1')).to.equal(true);
+          expect(view.isItemSelected('1')).to.equal(true);
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.isItemSelected('1')).to.equal(true);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.isItemSelected('1')).to.equal(true);
         });
 
         it('should not select an item when click and disableSelection', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             disableSelection: true,
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not select an item when clicking on a disabled item content', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }, { id: '2' }],
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
       });
 
       describe('multi selection', () => {
         it('should select un-selected item and remove other selected items when clicking on an item content', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['2'],
           });
 
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
         });
 
         it('should not un-select selected item when clicking on an item content', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['1'],
           });
 
-          expect(response.isItemSelected('1')).to.equal(true);
+          expect(view.isItemSelected('1')).to.equal(true);
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.isItemSelected('1')).to.equal(true);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.isItemSelected('1')).to.equal(true);
         });
 
         it('should un-select selected item when clicking on its content while holding Ctrl', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['1', '2'],
           });
 
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']);
-          fireEvent.click(response.getItemContent('1'), { ctrlKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']);
+          fireEvent.click(view.getItemContent('1'), { ctrlKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
         });
 
         it('should un-select selected item when clicking on its content while holding Meta', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['1', '2'],
           });
 
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']);
 
-          fireEvent.click(response.getItemContent('1'), { metaKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.click(view.getItemContent('1'), { metaKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
         });
 
         it('should not select an item when click and disableSelection', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }],
             disableSelection: true,
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not select an item when clicking on a disabled item content', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1', disabled: true }, { id: '2' }],
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should select un-selected item when clicking on its content while holding Ctrl', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }, { id: '3' }],
             defaultSelectedItems: ['1'],
           });
 
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
 
-          fireEvent.click(response.getItemContent('3'), { ctrlKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']);
+          fireEvent.click(view.getItemContent('3'), { ctrlKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']);
         });
 
         it('should do nothing when clicking on an item content on a fresh tree whil holding Shift', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }],
           });
 
-          fireEvent.click(response.getItemContent('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.click(view.getItemContent('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
 
         it('should expand the selection range when clicking on an item content below the last selected item while holding Shift', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }],
           });
 
-          fireEvent.click(response.getItemContent('2'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.click(view.getItemContent('2'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
 
-          fireEvent.click(response.getItemContent('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']);
+          fireEvent.click(view.getItemContent('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']);
         });
 
         it('should expand the selection range when clicking on an item content above the last selected item while holding Shift', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }],
           });
 
-          fireEvent.click(response.getItemContent('3'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['3']);
+          fireEvent.click(view.getItemContent('3'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['3']);
 
-          fireEvent.click(response.getItemContent('2'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']);
+          fireEvent.click(view.getItemContent('2'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']);
         });
 
         it('should expand the selection range when clicking on an item content while holding Shift after un-selecting another item', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }],
           });
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
 
-          fireEvent.click(response.getItemContent('2'), { ctrlKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']);
+          fireEvent.click(view.getItemContent('2'), { ctrlKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']);
 
-          fireEvent.click(response.getItemContent('2'), { ctrlKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
+          fireEvent.click(view.getItemContent('2'), { ctrlKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
 
-          fireEvent.click(response.getItemContent('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']);
+          fireEvent.click(view.getItemContent('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']);
         });
 
         it('should not expand the selection range when clicking on a disabled item content then clicking on an item content while holding Shift', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [
               { id: '1' },
@@ -371,15 +371,15 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
             ],
           });
 
-          fireEvent.click(response.getItemContent('2'));
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.click(view.getItemContent('2'));
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
 
-          fireEvent.click(response.getItemContent('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.click(view.getItemContent('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
 
         it('should not expand the selection range when clicking on an item content then clicking a disabled item content while holding Shift', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [
               { id: '1' },
@@ -390,28 +390,28 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
             ],
           });
 
-          fireEvent.click(response.getItemContent('2'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.click(view.getItemContent('2'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
 
-          fireEvent.click(response.getItemContent('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.click(view.getItemContent('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
         });
 
         it('should not select disabled items that are part of the selected range', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }],
           });
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
 
-          fireEvent.click(response.getItemContent('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']);
+          fireEvent.click(view.getItemContent('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']);
         });
 
         it('should not crash when selecting multiple items in a deeply nested tree', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [
               { id: '1', children: [{ id: '1.1', children: [{ id: '1.1.1' }] }] },
@@ -420,10 +420,10 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
             defaultExpandedItems: ['1', '1.1'],
           });
 
-          fireEvent.click(response.getItemContent('1.1.1'));
-          fireEvent.click(response.getItemContent('2'), { shiftKey: true });
+          fireEvent.click(view.getItemContent('1.1.1'));
+          fireEvent.click(view.getItemContent('2'), { shiftKey: true });
 
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1.1.1', '2']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1.1.1', '2']);
         });
       });
     });
@@ -431,213 +431,213 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
     describe('checkbox interaction', () => {
       describe('render checkbox when needed', () => {
         it('should not render a checkbox when checkboxSelection is not defined', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }],
           });
 
-          expect(response.getItemCheckbox('1')).to.equal(null);
+          expect(view.getItemCheckbox('1')).to.equal(null);
         });
 
         it('should not render a checkbox when checkboxSelection is false', () => {
-          const response = render({
+          const view = render({
             checkboxSelection: false,
             items: [{ id: '1' }],
           });
 
-          expect(response.getItemCheckbox('1')).to.equal(null);
+          expect(view.getItemCheckbox('1')).to.equal(null);
         });
 
         it('should render a checkbox when checkboxSelection is true', () => {
-          const response = render({
+          const view = render({
             checkboxSelection: true,
             items: [{ id: '1' }],
           });
 
-          expect(response.getItemCheckbox('1')).not.to.equal(null);
+          expect(view.getItemCheckbox('1')).not.to.equal(null);
         });
       });
 
       describe('single selection', () => {
         it('should not change selection when clicking on an item content', () => {
-          const response = render({
+          const view = render({
             checkboxSelection: true,
             items: [{ id: '1' }],
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should select un-selected item when clicking on an item checkbox', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             checkboxSelection: true,
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
 
-          fireEvent.click(response.getItemCheckboxInput('1'));
-          expect(response.isItemSelected('1')).to.equal(true);
+          fireEvent.click(view.getItemCheckboxInput('1'));
+          expect(view.isItemSelected('1')).to.equal(true);
         });
 
         it('should un-select selected item when clicking on an item checkbox', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: '1',
             checkboxSelection: true,
           });
 
-          expect(response.isItemSelected('1')).to.equal(true);
+          expect(view.isItemSelected('1')).to.equal(true);
 
-          fireEvent.click(response.getItemCheckboxInput('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemCheckboxInput('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not select an item when click and disableSelection', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             disableSelection: true,
             checkboxSelection: true,
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
 
-          fireEvent.click(response.getItemCheckboxInput('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemCheckboxInput('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not select an item when clicking on a disabled item checkbox', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1', disabled: true }, { id: '2' }],
             checkboxSelection: true,
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
-          fireEvent.click(response.getItemCheckboxInput('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemCheckboxInput('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
       });
 
       describe('multi selection', () => {
         it('should not change selection when clicking on an item content', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [{ id: '1' }],
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
 
-          fireEvent.click(response.getItemContent('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemContent('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should select un-selected item and keep other items selected when clicking on an item checkbox', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['2'],
           });
 
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
 
-          fireEvent.click(response.getItemCheckboxInput('1'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']);
+          fireEvent.click(view.getItemCheckboxInput('1'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']);
         });
 
         it('should un-select selected item when clicking on an item checkbox', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['1'],
           });
 
-          expect(response.isItemSelected('1')).to.equal(true);
+          expect(view.isItemSelected('1')).to.equal(true);
 
-          fireEvent.click(response.getItemCheckboxInput('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemCheckboxInput('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not select an item when click and disableSelection', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [{ id: '1' }, { id: '2' }],
             disableSelection: true,
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
 
-          fireEvent.click(response.getItemCheckboxInput('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemCheckboxInput('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not select an item when clicking on a disabled item content', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [{ id: '1', disabled: true }, { id: '2' }],
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
-          fireEvent.click(response.getItemCheckboxInput('1'));
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
+          fireEvent.click(view.getItemCheckboxInput('1'));
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should expand the selection range when clicking on an item checkbox below the last selected item while holding Shift', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }],
           });
 
-          fireEvent.click(response.getItemCheckboxInput('2'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.click(view.getItemCheckboxInput('2'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
 
-          fireEvent.click(response.getItemCheckboxInput('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']);
+          fireEvent.click(view.getItemCheckboxInput('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']);
         });
 
         it('should expand the selection range when clicking on an item checkbox above the last selected item while holding Shift', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }],
           });
 
-          fireEvent.click(response.getItemCheckboxInput('3'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['3']);
+          fireEvent.click(view.getItemCheckboxInput('3'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['3']);
 
-          fireEvent.click(response.getItemCheckboxInput('2'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']);
+          fireEvent.click(view.getItemCheckboxInput('2'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']);
         });
 
         it('should expand the selection range when clicking on an item checkbox while holding Shift after un-selecting another item', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }],
           });
 
-          fireEvent.click(response.getItemCheckboxInput('1'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
+          fireEvent.click(view.getItemCheckboxInput('1'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
 
-          fireEvent.click(response.getItemCheckboxInput('2'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']);
+          fireEvent.click(view.getItemCheckboxInput('2'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']);
 
-          fireEvent.click(response.getItemCheckboxInput('2'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
+          fireEvent.click(view.getItemCheckboxInput('2'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
 
-          fireEvent.click(response.getItemCheckboxInput('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']);
+          fireEvent.click(view.getItemCheckboxInput('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']);
         });
 
         it('should not expand the selection range when clicking on a disabled item checkbox then clicking on an item checkbox while holding Shift', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [
@@ -649,15 +649,15 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
             ],
           });
 
-          fireEvent.click(response.getItemCheckboxInput('2'));
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.click(view.getItemCheckboxInput('2'));
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
 
-          fireEvent.click(response.getItemCheckboxInput('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal([]);
+          fireEvent.click(view.getItemCheckboxInput('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal([]);
         });
 
         it('should not expand the selection range when clicking on an item checkbox then clicking a disabled item checkbox while holding Shift', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [
@@ -669,95 +669,95 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
             ],
           });
 
-          fireEvent.click(response.getItemCheckboxInput('2'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.click(view.getItemCheckboxInput('2'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
 
-          fireEvent.click(response.getItemCheckboxInput('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['2']);
+          fireEvent.click(view.getItemCheckboxInput('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['2']);
         });
 
         it('should not select disabled items that are part of the selected range', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             checkboxSelection: true,
             items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }],
           });
 
-          fireEvent.click(response.getItemCheckboxInput('1'));
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
+          fireEvent.click(view.getItemCheckboxInput('1'));
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
 
-          fireEvent.click(response.getItemCheckboxInput('3'), { shiftKey: true });
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']);
+          fireEvent.click(view.getItemCheckboxInput('3'), { shiftKey: true });
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']);
         });
       });
     });
 
     describe('aria-multiselectable tree attribute', () => {
       it('should have the attribute `aria-multiselectable=false if using single select`', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1' }, { id: '2' }],
         });
 
-        expect(response.getRoot()).to.have.attribute('aria-multiselectable', 'false');
+        expect(view.getRoot()).to.have.attribute('aria-multiselectable', 'false');
       });
 
       it('should have the attribute `aria-multiselectable=true if using multi select`', () => {
-        const response = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true });
+        const view = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true });
 
-        expect(response.getRoot()).to.have.attribute('aria-multiselectable', 'true');
+        expect(view.getRoot()).to.have.attribute('aria-multiselectable', 'true');
       });
     });
 
-    // The `aria-selected` attribute is used by the `response.isItemSelected` method.
+    // The `aria-selected` attribute is used by the `view.isItemSelected` method.
     // This `describe` only tests basics scenarios, more complex scenarios are tested in this file's other `describe`.
     describe('aria-selected item attribute', () => {
       describe('single selection', () => {
         it('should not have the attribute `aria-selected=false` if not selected', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
           });
 
-          expect(response.getItemRoot('1')).not.to.have.attribute('aria-selected');
+          expect(view.getItemRoot('1')).not.to.have.attribute('aria-selected');
         });
 
         it('should have the attribute `aria-selected=true` if selected', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: '1',
           });
 
-          expect(response.getItemRoot('1')).to.have.attribute('aria-selected', 'true');
+          expect(view.getItemRoot('1')).to.have.attribute('aria-selected', 'true');
         });
       });
 
       describe('multi selection', () => {
         it('should have the attribute `aria-selected=false` if not selected', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }],
           });
 
-          expect(response.getItemRoot('1')).to.have.attribute('aria-selected', 'false');
+          expect(view.getItemRoot('1')).to.have.attribute('aria-selected', 'false');
         });
 
         it('should have the attribute `aria-selected=true` if selected', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['1'],
           });
 
-          expect(response.getItemRoot('1')).to.have.attribute('aria-selected', 'true');
+          expect(view.getItemRoot('1')).to.have.attribute('aria-selected', 'true');
         });
 
         it('should have the attribute `aria-selected=false` if disabledSelection is true', () => {
-          const response = render({
+          const view = render({
             multiSelect: true,
             items: [{ id: '1' }, { id: '2' }],
             disableSelection: true,
           });
 
-          expect(response.getItemRoot('1')).to.have.attribute('aria-selected', 'false');
+          expect(view.getItemRoot('1')).to.have.attribute('aria-selected', 'false');
         });
       });
     });
@@ -766,13 +766,13 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
       it('should call the onItemSelectionToggle callback when selecting an item', () => {
         const onItemSelectionToggle = spy();
 
-        const response = render({
+        const view = render({
           multiSelect: true,
           items: [{ id: '1' }, { id: '2' }],
           onItemSelectionToggle,
         });
 
-        fireEvent.click(response.getItemContent('1'));
+        fireEvent.click(view.getItemContent('1'));
         expect(onItemSelectionToggle.callCount).to.equal(1);
         expect(onItemSelectionToggle.lastCall.args[1]).to.equal('1');
         expect(onItemSelectionToggle.lastCall.args[2]).to.equal(true);
@@ -781,14 +781,14 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
       it('should call the onItemSelectionToggle callback when un-selecting an item', () => {
         const onItemSelectionToggle = spy();
 
-        const response = render({
+        const view = render({
           multiSelect: true,
           items: [{ id: '1' }, { id: '2' }],
           defaultSelectedItems: ['1'],
           onItemSelectionToggle,
         });
 
-        fireEvent.click(response.getItemContent('1'), { ctrlKey: true });
+        fireEvent.click(view.getItemContent('1'), { ctrlKey: true });
         expect(onItemSelectionToggle.callCount).to.equal(1);
         expect(onItemSelectionToggle.lastCall.args[1]).to.equal('1');
         expect(onItemSelectionToggle.lastCall.args[2]).to.equal(false);
@@ -798,89 +798,89 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
     describe('selectItem api method', () => {
       describe('single selection', () => {
         it('should select un-selected item when shouldBeSelected is not defined', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
           });
 
           act(() => {
-            response.apiRef.current.selectItem({ itemId: '1', event: {} as any });
+            view.apiRef.current.selectItem({ itemId: '1', event: {} as any });
           });
 
-          expect(response.isItemSelected('1')).to.equal(true);
+          expect(view.isItemSelected('1')).to.equal(true);
         });
 
         it('should un-select selected item when shouldBeSelected is not defined', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['1'],
           });
 
           act(() => {
-            response.apiRef.current.selectItem({ itemId: '1', event: {} as any });
+            view.apiRef.current.selectItem({ itemId: '1', event: {} as any });
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not select an item when disableSelection is true', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             disableSelection: true,
           });
 
           act(() => {
-            response.apiRef.current.selectItem({ itemId: '1', event: {} as any });
+            view.apiRef.current.selectItem({ itemId: '1', event: {} as any });
           });
 
-          expect(response.isItemSelected('1')).to.equal(false);
+          expect(view.isItemSelected('1')).to.equal(false);
         });
 
         it('should not un-select an item when disableSelection is true', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['1'],
             disableSelection: true,
           });
 
           act(() => {
-            response.apiRef.current.selectItem({ itemId: '1', event: {} as any });
+            view.apiRef.current.selectItem({ itemId: '1', event: {} as any });
           });
 
-          expect(response.isItemSelected('1')).to.equal(true);
+          expect(view.isItemSelected('1')).to.equal(true);
         });
       });
 
       describe('multi selection', () => {
         it('should select un-selected item and remove other selected items when shouldBeSelected is not defined', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['2'],
             multiSelect: true,
           });
 
           act(() => {
-            response.apiRef.current.selectItem({ itemId: '1', event: {} as any });
+            view.apiRef.current.selectItem({ itemId: '1', event: {} as any });
           });
 
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1']);
         });
 
         it('should select un-selected item and keep other selected items when shouldBeSelected is not defined and keepExistingSelection is true', () => {
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             defaultSelectedItems: ['2'],
             multiSelect: true,
           });
 
           act(() => {
-            response.apiRef.current.selectItem({
+            view.apiRef.current.selectItem({
               itemId: '1',
               event: {} as any,
               keepExistingSelection: true,
             });
           });
 
-          expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']);
+          expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']);
         });
       });
 
@@ -889,13 +889,13 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
           const event = {} as any;
           const onItemSelectionToggle = spy();
 
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             onItemSelectionToggle,
           });
 
           act(() => {
-            response.apiRef.current.selectItem({ itemId: '1', event });
+            view.apiRef.current.selectItem({ itemId: '1', event });
           });
 
           expect(onItemSelectionToggle.callCount).to.equal(1);
@@ -908,14 +908,14 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]>
           const event = {} as any;
           const onItemSelectionToggle = spy();
 
-          const response = render({
+          const view = render({
             items: [{ id: '1' }, { id: '2' }],
             onItemSelectionToggle,
             defaultSelectedItems: '1',
           });
 
           act(() => {
-            response.apiRef.current.selectItem({ itemId: '1', event });
+            view.apiRef.current.selectItem({ itemId: '1', event });
           });
 
           expect(onItemSelectionToggle.callCount).to.equal(1);
diff --git a/packages/x-tree-view/src/internals/useTreeView/useTreeView.test.tsx b/packages/x-tree-view/src/internals/useTreeView/useTreeView.test.tsx
index 2fba6b0a8ab9..9489bec6a86f 100644
--- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.test.tsx
+++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.test.tsx
@@ -10,9 +10,9 @@ describeTreeView<[]>(
   'useTreeView hook',
   ({ render, renderFromJSX, treeViewComponentName, TreeViewComponent, TreeItemComponent }) => {
     it('should have the role="tree" on the root slot', () => {
-      const response = render({ items: [{ id: '1' }] });
+      const view = render({ items: [{ id: '1' }] });
 
-      expect(response.getRoot()).to.have.attribute('role', 'tree');
+      expect(view.getRoot()).to.have.attribute('role', 'tree');
     });
 
     it('should work inside a Portal', () => {
diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx
index e35e9df63ba0..8dc7de297623 100644
--- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx
+++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx
@@ -24,19 +24,19 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>(
   }) => {
     describe('role prop', () => {
       it('should have the role="treeitem" on the root slot', () => {
-        const response = render({ items: [{ id: '1' }] });
+        const view = render({ items: [{ id: '1' }] });
 
-        expect(response.getItemRoot('1')).to.have.attribute('role', 'treeitem');
+        expect(view.getItemRoot('1')).to.have.attribute('role', 'treeitem');
       });
 
       it('should have the role "group" on the groupTransition slot if the item is expandable', () => {
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
         });
 
         expect(
-          response.getItemRoot('1').querySelector(`.${treeItemClasses.groupTransition}`),
+          view.getItemRoot('1').querySelector(`.${treeItemClasses.groupTransition}`),
         ).to.have.attribute('role', 'group');
       });
     });
@@ -45,7 +45,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>(
       it('should call onClick when clicked, but not when children are clicked for TreeItem', () => {
         const onClick = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
           defaultExpandedItems: ['1'],
           slotProps: {
@@ -55,7 +55,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>(
           },
         });
 
-        fireEvent.click(response.getItemContent('1.1'));
+        fireEvent.click(view.getItemContent('1.1'));
         expect(onClick.callCount).to.equal(treeItemComponentName === 'TreeItem' ? 1 : 2);
         expect(onClick.lastCall.firstArg.target.parentElement.dataset.testid).to.equal('1.1');
       });
@@ -63,7 +63,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>(
       it('should call onClick even when the element is disabled', () => {
         const onClick = spy();
 
-        const response = render({
+        const view = render({
           items: [{ id: '1', disabled: true }],
           slotProps: {
             item: {
@@ -72,13 +72,13 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>(
           },
         });
 
-        fireEvent.click(response.getItemContent('1'));
+        fireEvent.click(view.getItemContent('1'));
         expect(onClick.callCount).to.equal(1);
       });
     });
 
     it('should be able to type in a child input', () => {
-      const response = render({
+      const view = render({
         items: [{ id: '1', children: [{ id: '1.1' }] }],
         defaultExpandedItems: ['1'],
         slotProps:
@@ -97,7 +97,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>(
               },
       });
 
-      const input = response.getItemRoot('1.1').querySelector('.icon-input')!;
+      const input = view.getItemRoot('1.1').querySelector('.icon-input')!;
       const keydownEvent = createEvent.keyDown(input, {
         key: 'a',
       });
@@ -123,9 +123,9 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>(
         return <TreeItemComponent {...props} />;
       }
 
-      let response: DescribeTreeViewRendererUtils;
+      let view: DescribeTreeViewRendererUtils;
       if (treeViewComponentName === 'SimpleTreeView') {
-        response = renderFromJSX(
+        view = renderFromJSX(
           <React.Fragment>
             <button type="button">Some focusable element</button>
             <TreeViewComponent>
@@ -135,7 +135,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>(
           </React.Fragment>,
         );
       } else {
-        response = renderFromJSX(
+        view = renderFromJSX(
           <React.Fragment>
             <button type="button">Some focusable element</button>
             <TreeViewComponent
@@ -153,10 +153,10 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>(
       }
 
       act(() => {
-        response.getItemRoot('2').focus();
+        view.getItemRoot('2').focus();
       });
 
-      expect(response.getFocusedItemId()).to.equal('2');
+      expect(view.getFocusedItemId()).to.equal('2');
 
       act(() => {
         screen.getByRole('button').focus();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f64fc37d586b..574f2b830cfb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -266,6 +266,9 @@ importers:
       eslint-plugin-react-hooks:
         specifier: ^4.6.2
         version: 4.6.2(eslint@8.57.0)
+      eslint-plugin-testing-library:
+        specifier: ^6.3.0
+        version: 6.3.0(eslint@8.57.0)(typescript@5.5.4)
       fast-glob:
         specifier: ^3.3.2
         version: 3.3.2
@@ -4118,6 +4121,9 @@ packages:
   '@types/retry@0.12.0':
     resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==}
 
+  '@types/semver@7.5.8':
+    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
+
   '@types/send@0.17.4':
     resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
 
@@ -4181,6 +4187,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@7.16.1':
     resolution: {integrity: sha512-nYpyv6ALte18gbMz323RM+vpFpTjfNdyakbf3nsLvF43uF9KeNC289SUEW3QLZ1xPtyINJ1dIsZOuWuSRIWygw==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -4195,10 +4205,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@7.16.1':
     resolution: {integrity: sha512-AQn9XqCzUXd4bAVEsAXM/Izk11Wx2u4H3BAfQVhSfzfDOm/wAON9nP7J5rpkCxts7E5TELmN845xTUCQrD1xIQ==}
     engines: {node: ^18.18.0 || >=20.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@7.16.1':
     resolution: {integrity: sha512-0vFPk8tMjj6apaAZ1HlwM8w7jbghC8jc1aRNJG5vN8Ym5miyhTQGMqU++kuBFDNKe9NcPeZ6x0zfSzV8xC1UlQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -4208,12 +4231,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@7.16.1':
     resolution: {integrity: sha512-WrFM8nzCowV0he0RlkotGDujx78xudsxnGMBHI88l5J8wEhED6yBwaSLP99ygfrzAjsQvcYQ94quDwI0d7E1fA==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.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@7.16.1':
     resolution: {integrity: sha512-Qlzzx4sE4u3FsHTPQAAQFJFNOuqtuY0LFrZHwQ8IHK705XxBiWOFkfKRWu6niB7hwfgnwIpO4jTC75ozW1PHWg==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -5902,6 +5935,12 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
+  eslint-plugin-testing-library@6.3.0:
+    resolution: {integrity: sha512-GYcEErTt6EGwE0bPDY+4aehfEBpB2gDBFKohir8jlATSUvzStEyzCx8QWB/14xeKc/AwyXkzScSzMHnFojkWrA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0, npm: '>=6'}
+    peerDependencies:
+      eslint: ^7.5.0 || ^8.0.0
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -9454,6 +9493,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.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
@@ -9461,6 +9503,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.16.2:
     resolution: {integrity: sha512-C1uWweJDgdtX2x600HjaFaucXTilT7tgUZHbOE4+ypskZ1OP8CRCSDkCxG6Vya9EwaFIVagWwpaVAn5wzypaqQ==}
     engines: {node: '>=18.0.0'}
@@ -13100,6 +13148,8 @@ snapshots:
 
   '@types/retry@0.12.0': {}
 
+  '@types/semver@7.5.8': {}
+
   '@types/send@0.17.4':
     dependencies:
       '@types/mime': 1.3.5
@@ -13183,6 +13233,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@7.16.1':
     dependencies:
       '@typescript-eslint/types': 7.16.1
@@ -13200,8 +13255,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/types@5.62.0': {}
+
   '@typescript-eslint/types@7.16.1': {}
 
+  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.5.4)':
+    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.3
+      tsutils: 3.21.0(typescript@5.5.4)
+    optionalDependencies:
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/typescript-estree@7.16.1(typescript@5.5.4)':
     dependencies:
       '@typescript-eslint/types': 7.16.1
@@ -13217,6 +13288,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.5.4)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.5.4)
+      eslint: 8.57.0
+      eslint-scope: 5.1.1
+      semver: 7.6.3
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@typescript-eslint/utils@7.16.1(eslint@8.57.0)(typescript@5.5.4)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
@@ -13228,6 +13314,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@7.16.1':
     dependencies:
       '@typescript-eslint/types': 7.16.1
@@ -15289,6 +15380,14 @@ snapshots:
       string.prototype.matchall: 4.0.11
       string.prototype.repeat: 1.0.0
 
+  eslint-plugin-testing-library@6.3.0(eslint@8.57.0)(typescript@5.5.4):
+    dependencies:
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.5.4)
+      eslint: 8.57.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -19465,10 +19564,17 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
+  tslib@1.14.1: {}
+
   tslib@2.6.2: {}
 
   tsscmp@1.0.6: {}
 
+  tsutils@3.21.0(typescript@5.5.4):
+    dependencies:
+      tslib: 1.14.1
+      typescript: 5.5.4
+
   tsx@4.16.2:
     dependencies:
       esbuild: 0.21.5
diff --git a/test/utils/fireUserEvent/fireUserEvent.ts b/test/utils/fireUserEvent/fireUserEvent.ts
new file mode 100644
index 000000000000..e64105388c27
--- /dev/null
+++ b/test/utils/fireUserEvent/fireUserEvent.ts
@@ -0,0 +1,30 @@
+import { fireEvent } from '@mui/internal-test-utils/createRenderer';
+
+/**
+ * @deprecated Use `pointer` from `@testing-library/user-event` instead.
+ */
+export function touch(target: Element): void {
+  fireEvent.touchStart(target);
+  fireEvent.touchEnd(target);
+}
+
+/**
+ * @param {...any} args The arguments to pass to `fireEvent.mouseDown`, `fireEvent.mouseUp`, and `fireEvent.click`.
+ * @deprecated Use `click` from `@testing-library/user-event` instead.
+ */
+export const mousePress: (...args: Parameters<(typeof fireEvent)['mouseUp']>) => void = (
+  target,
+  options,
+) => {
+  fireEvent.mouseDown(target, options);
+  fireEvent.mouseUp(target, options);
+  fireEvent.click(target, options);
+};
+
+/**
+ * @deprecated Use `keyboard` or `type` from `@testing-library/user-event` instead.
+ */
+export function keyPress(target: Element, options: { key: string; [key: string]: any }): void {
+  fireEvent.keyDown(target, options);
+  fireEvent.keyUp(target, options);
+}
diff --git a/test/utils/fireUserEvent/index.ts b/test/utils/fireUserEvent/index.ts
new file mode 100644
index 000000000000..b050ae5a78d0
--- /dev/null
+++ b/test/utils/fireUserEvent/index.ts
@@ -0,0 +1 @@
+export * as fireUserEvent from './fireUserEvent';
diff --git a/test/utils/pickers/describeValue/testControlledUnControlled.tsx b/test/utils/pickers/describeValue/testControlledUnControlled.tsx
index ae4e204f8252..e5dca22796b5 100644
--- a/test/utils/pickers/describeValue/testControlledUnControlled.tsx
+++ b/test/utils/pickers/describeValue/testControlledUnControlled.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import {
   getAllFieldInputRoot,
@@ -9,6 +9,7 @@ import {
   getFieldInputRoot,
 } from 'test/utils/pickers';
 import { DescribeValueOptions, DescribeValueTestSuite } from './describeValue.types';
+import { fireUserEvent } from '../../fireUserEvent';
 
 export const testControlledUnControlled: DescribeValueTestSuite<any, any> = (
   ElementToTest,
@@ -168,7 +169,7 @@ export const testControlledUnControlled: DescribeValueTestSuite<any, any> = (
         onChange: handleChange,
       });
       v7Response.selectSection(undefined);
-      userEvent.keyPress(v7Response.getActiveSection(0), { key: 'ArrowUp' });
+      fireUserEvent.keyPress(v7Response.getActiveSection(0), { key: 'ArrowUp' });
       expect(handleChange.callCount).to.equal(0);
     });
 
diff --git a/test/utils/pickers/describeValue/testPickerActionBar.tsx b/test/utils/pickers/describeValue/testPickerActionBar.tsx
index adbb86a48967..850189c47294 100644
--- a/test/utils/pickers/describeValue/testPickerActionBar.tsx
+++ b/test/utils/pickers/describeValue/testPickerActionBar.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import {
   adapterToUse,
   getExpectedOnChangeCount,
   expectPickerChangeHandlerValue,
 } from 'test/utils/pickers';
 import { DescribeValueTestSuite } from './describeValue.types';
+import { fireUserEvent } from '../../fireUserEvent';
 
 export const testPickerActionBar: DescribeValueTestSuite<any, 'picker'> = (
   ElementToTest,
@@ -49,7 +50,7 @@ export const testPickerActionBar: DescribeValueTestSuite<any, 'picker'> = (
         );
 
         // Clear the date
-        userEvent.mousePress(screen.getByText(/clear/i));
+        fireUserEvent.mousePress(screen.getByText(/clear/i));
         expect(onChange.callCount).to.equal(1);
         expectPickerChangeHandlerValue(pickerParams.type, onChange, emptyValue);
         expect(onAccept.callCount).to.equal(1);
@@ -75,7 +76,7 @@ export const testPickerActionBar: DescribeValueTestSuite<any, 'picker'> = (
         );
 
         // Clear the date
-        userEvent.mousePress(screen.getByText(/clear/i));
+        fireUserEvent.mousePress(screen.getByText(/clear/i));
         expect(onChange.callCount).to.equal(0);
         expect(onAccept.callCount).to.equal(0);
         expect(onClose.callCount).to.equal(1);
@@ -103,7 +104,7 @@ export const testPickerActionBar: DescribeValueTestSuite<any, 'picker'> = (
         setNewValue(values[0], { isOpened: true, selectSection, pressKey });
 
         // Cancel the modifications
-        userEvent.mousePress(screen.getByText(/cancel/i));
+        fireUserEvent.mousePress(screen.getByText(/cancel/i));
         expect(onChange.callCount).to.equal(
           getExpectedOnChangeCount(componentFamily, pickerParams) + 1,
         );
@@ -137,7 +138,7 @@ export const testPickerActionBar: DescribeValueTestSuite<any, 'picker'> = (
         );
 
         // Cancel the modifications
-        userEvent.mousePress(screen.getByText(/cancel/i));
+        fireUserEvent.mousePress(screen.getByText(/cancel/i));
         expect(onChange.callCount).to.equal(0);
         expect(onAccept.callCount).to.equal(0);
         expect(onClose.callCount).to.equal(1);
@@ -165,7 +166,7 @@ export const testPickerActionBar: DescribeValueTestSuite<any, 'picker'> = (
         setNewValue(values[0], { isOpened: true, selectSection, pressKey });
 
         // Accept the modifications
-        userEvent.mousePress(screen.getByText(/ok/i));
+        fireUserEvent.mousePress(screen.getByText(/ok/i));
         expect(onChange.callCount).to.equal(
           getExpectedOnChangeCount(componentFamily, pickerParams),
         ); // The accepted value as already been committed, don't call onChange again
@@ -192,7 +193,7 @@ export const testPickerActionBar: DescribeValueTestSuite<any, 'picker'> = (
         );
 
         // Accept the modifications
-        userEvent.mousePress(screen.getByText(/ok/i));
+        fireUserEvent.mousePress(screen.getByText(/ok/i));
         expect(onChange.callCount).to.equal(1);
         expect(onAccept.callCount).to.equal(1);
         expect(onClose.callCount).to.equal(1);
@@ -217,7 +218,7 @@ export const testPickerActionBar: DescribeValueTestSuite<any, 'picker'> = (
         );
 
         // Accept the modifications
-        userEvent.mousePress(screen.getByText(/ok/i));
+        fireUserEvent.mousePress(screen.getByText(/ok/i));
         expect(onChange.callCount).to.equal(0);
         expect(onAccept.callCount).to.equal(0);
         expect(onClose.callCount).to.equal(1);
@@ -242,7 +243,7 @@ export const testPickerActionBar: DescribeValueTestSuite<any, 'picker'> = (
           />,
         );
 
-        userEvent.mousePress(screen.getByText(/today/i));
+        fireUserEvent.mousePress(screen.getByText(/today/i));
 
         let startOfToday: any;
         if (pickerParams.type === 'date') {
diff --git a/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx b/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx
index b38b5a9d2bd3..d2e1d1494439 100644
--- a/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx
+++ b/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { getExpectedOnChangeCount, getFieldInputRoot, openPicker } from 'test/utils/pickers';
 import { DescribeValueTestSuite } from './describeValue.types';
+import { fireUserEvent } from '../../fireUserEvent';
 
 export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite<any, 'picker'> = (
   ElementToTest,
@@ -272,7 +273,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite<any, 'picker'>
       const newValue = setNewValue(values[0], { isOpened: true, selectSection, pressKey });
 
       // Dismiss the picker
-      userEvent.keyPress(document.activeElement!, { key: 'Escape' });
+      fireUserEvent.keyPress(document.activeElement!, { key: 'Escape' });
       expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams));
       expect(onAccept.callCount).to.equal(1);
       if (isRangeType) {
@@ -308,7 +309,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite<any, 'picker'>
       );
 
       // Dismiss the picker
-      userEvent.mousePress(document.body);
+      fireUserEvent.mousePress(document.body);
       expect(onChange.callCount).to.equal(0);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(1);
@@ -341,7 +342,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite<any, 'picker'>
       const newValue = setNewValue(values[0], { isOpened: true, selectSection, pressKey });
 
       // Dismiss the picker
-      userEvent.mousePress(document.body);
+      fireUserEvent.mousePress(document.body);
       expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams));
       expect(onAccept.callCount).to.equal(1);
       expect(onAccept.lastCall.args[0]).toEqualDateTime(newValue as any);
@@ -364,7 +365,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite<any, 'picker'>
       );
 
       // Dismiss the picker
-      userEvent.mousePress(document.body);
+      fireUserEvent.mousePress(document.body);
       expect(onChange.callCount).to.equal(0);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
@@ -385,7 +386,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite<any, 'picker'>
       );
 
       // Dismiss the picker
-      userEvent.keyPress(document.body, { key: 'Escape' });
+      fireUserEvent.keyPress(document.body, { key: 'Escape' });
       expect(onChange.callCount).to.equal(0);
       expect(onAccept.callCount).to.equal(0);
       expect(onClose.callCount).to.equal(0);
diff --git a/test/utils/pickers/describeValue/testShortcuts.tsx b/test/utils/pickers/describeValue/testShortcuts.tsx
index bd7617b6dd98..4e4493b442c2 100644
--- a/test/utils/pickers/describeValue/testShortcuts.tsx
+++ b/test/utils/pickers/describeValue/testShortcuts.tsx
@@ -2,8 +2,9 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { expectPickerChangeHandlerValue } from 'test/utils/pickers';
-import { userEvent, screen } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { DescribeValueTestSuite } from './describeValue.types';
+import { fireUserEvent } from '../../fireUserEvent';
 
 export const testShortcuts: DescribeValueTestSuite<any, 'picker'> = (ElementToTest, options) => {
   const {
@@ -49,7 +50,7 @@ export const testShortcuts: DescribeValueTestSuite<any, 'picker'> = (ElementToTe
       );
 
       const shortcut = screen.getByRole('button', { name: 'Test shortcut' });
-      userEvent.mousePress(shortcut);
+      fireUserEvent.mousePress(shortcut);
 
       expect(onChange.callCount).to.equal(1);
       expectPickerChangeHandlerValue(pickerParams.type, onChange, values[1]);
@@ -87,7 +88,7 @@ export const testShortcuts: DescribeValueTestSuite<any, 'picker'> = (ElementToTe
       );
 
       const shortcut = screen.getByRole('button', { name: 'Test shortcut' });
-      userEvent.mousePress(shortcut);
+      fireUserEvent.mousePress(shortcut);
 
       expect(onChange.callCount).to.equal(1);
       expectPickerChangeHandlerValue(pickerParams.type, onChange, values[1]);
@@ -125,7 +126,7 @@ export const testShortcuts: DescribeValueTestSuite<any, 'picker'> = (ElementToTe
       );
 
       const shortcut = screen.getByRole('button', { name: 'Test shortcut' });
-      userEvent.mousePress(shortcut);
+      fireUserEvent.mousePress(shortcut);
 
       expect(onChange.callCount).to.equal(1);
       expectPickerChangeHandlerValue(pickerParams.type, onChange, values[1]);
diff --git a/test/utils/pickers/fields.tsx b/test/utils/pickers/fields.tsx
index fe3222a0c397..7fbed5eda3d8 100644
--- a/test/utils/pickers/fields.tsx
+++ b/test/utils/pickers/fields.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { createRenderer, screen, userEvent, act, fireEvent } from '@mui/internal-test-utils';
+import { createRenderer, screen, act, fireEvent } from '@mui/internal-test-utils';
 import { FieldRef, FieldSection, FieldSectionType } from '@mui/x-date-pickers/models';
 import { pickersSectionListClasses } from '@mui/x-date-pickers/PickersSectionList';
 import { pickersInputBaseClasses } from '@mui/x-date-pickers/PickersTextField';
+import { fireUserEvent } from '../fireUserEvent';
 import { expectFieldValueV7, expectFieldValueV6 } from './assertions';
 
 export const getTextbox = (): HTMLInputElement => screen.getByRole('textbox');
@@ -210,7 +211,7 @@ export const buildFieldInteractions = <P extends {}>({
           'ArrowRight',
         ].includes(key)
       ) {
-        userEvent.keyPress(target, { key });
+        fireUserEvent.keyPress(target, { key });
       } else {
         fireEvent.input(target, { target: { textContent: key } });
       }
@@ -250,7 +251,7 @@ export const buildFieldInteractions = <P extends {}>({
     } as any);
     v6Response.selectSection(selectedSection);
     const input = getTextbox();
-    userEvent.keyPress(input, { key });
+    fireUserEvent.keyPress(input, { key });
     expectFieldValueV6(input, expectedValue);
     v6Response.unmount();
   };
diff --git a/test/utils/pickers/openPicker.ts b/test/utils/pickers/openPicker.ts
index ac9e934c55ea..67293e7a3cce 100644
--- a/test/utils/pickers/openPicker.ts
+++ b/test/utils/pickers/openPicker.ts
@@ -1,6 +1,7 @@
-import { screen, userEvent } from '@mui/internal-test-utils';
+import { screen } from '@mui/internal-test-utils';
 import { getFieldSectionsContainer } from 'test/utils/pickers/fields';
 import { pickersInputBaseClasses } from '@mui/x-date-pickers/PickersTextField';
+import { fireUserEvent } from '../fireUserEvent';
 
 export type OpenPickerParams =
   | {
@@ -24,21 +25,21 @@ export const openPicker = (params: OpenPickerParams) => {
   );
 
   if (isRangeType) {
-    userEvent.mousePress(fieldSectionsContainer);
+    fireUserEvent.mousePress(fieldSectionsContainer);
 
     if (params.isSingleInput && params.initialFocus === 'end') {
       const sections = fieldSectionsContainer.querySelectorAll(
         `.${pickersInputBaseClasses.sectionsContainer}`,
       );
 
-      userEvent.mousePress(sections[sections.length - 1]);
+      fireUserEvent.mousePress(sections[sections.length - 1]);
     }
 
     return undefined;
   }
 
   if (params.variant === 'mobile') {
-    return userEvent.mousePress(fieldSectionsContainer);
+    return fireUserEvent.mousePress(fieldSectionsContainer);
   }
 
   const target =
@@ -46,5 +47,5 @@ export const openPicker = (params: OpenPickerParams) => {
       ? screen.getByLabelText(/choose time/i)
       : screen.getByLabelText(/choose date/i);
 
-  return userEvent.mousePress(target);
+  return fireUserEvent.mousePress(target);
 };
diff --git a/test/utils/pickers/viewHandlers.ts b/test/utils/pickers/viewHandlers.ts
index cfc23d1b4d90..2b3ab36c387f 100644
--- a/test/utils/pickers/viewHandlers.ts
+++ b/test/utils/pickers/viewHandlers.ts
@@ -1,7 +1,8 @@
-import { fireTouchChangedEvent, userEvent, screen } from '@mui/internal-test-utils';
+import { fireTouchChangedEvent, screen } from '@mui/internal-test-utils';
 import { getClockTouchEvent, formatFullTimeValue } from 'test/utils/pickers';
 import { MuiPickersAdapter, TimeView } from '@mui/x-date-pickers/models';
 import { formatMeridiem } from '@mui/x-date-pickers/internals';
+import { fireUserEvent } from '../fireUserEvent';
 
 type TDate = any;
 
@@ -35,7 +36,9 @@ export const timeClockHandler: ViewHandler<TimeView> = {
 
 export const digitalClockHandler: ViewHandler<TimeView> = {
   setViewValue: (adapter, value) => {
-    userEvent.mousePress(screen.getByRole('option', { name: formatFullTimeValue(adapter, value) }));
+    fireUserEvent.mousePress(
+      screen.getByRole('option', { name: formatFullTimeValue(adapter, value) }),
+    );
   },
 };
 
@@ -44,10 +47,10 @@ export const multiSectionDigitalClockHandler: ViewHandler<TimeView> = {
     const hasMeridiem = adapter.is12HourCycleInCurrentLocale();
     const hoursLabel = parseInt(adapter.format(value, hasMeridiem ? 'hours12h' : 'hours24h'), 10);
     const minutesLabel = adapter.getMinutes(value).toString();
-    userEvent.mousePress(screen.getByRole('option', { name: `${hoursLabel} hours` }));
-    userEvent.mousePress(screen.getByRole('option', { name: `${minutesLabel} minutes` }));
+    fireUserEvent.mousePress(screen.getByRole('option', { name: `${hoursLabel} hours` }));
+    fireUserEvent.mousePress(screen.getByRole('option', { name: `${minutesLabel} minutes` }));
     if (hasMeridiem) {
-      userEvent.mousePress(
+      fireUserEvent.mousePress(
         screen.getByRole('option', {
           name: formatMeridiem(adapter, adapter.getHours(value) >= 12 ? 'pm' : 'am'),
         }),