diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
index 6643b4e5abeb9..3df62530ae2f8 100644
--- a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
@@ -140,11 +140,11 @@ describe('<DataGridPro /> - Columns', () => {
       const onColumnWidthChange = spy();
       render(<Test onColumnWidthChange={onColumnWidthChange} columns={columns} />);
       const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
-      fireEvent.mouseDown(separator, { clientX: 100 });
-      fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
-      fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 });
+      fireEvent.mouseDown(separator, new MouseEvent('mousedown', { clientX: 100 }));
+      fireEvent.mouseMove(separator, new MouseEvent('mousemove', { clientX: 110, buttons: 1 }));
+      fireEvent.mouseMove(separator, new MouseEvent('mousemove', { clientX: 120, buttons: 1 }));
       expect(onColumnWidthChange.callCount).to.equal(0);
-      fireEvent.mouseUp(separator);
+      fireEvent.mouseUp(separator, new MouseEvent('mouseup'));
       clock.tick(0);
       expect(onColumnWidthChange.callCount).to.equal(1);
       expect(onColumnWidthChange.args[0][0].width).to.equal(120);
@@ -168,9 +168,9 @@ describe('<DataGridPro /> - Columns', () => {
         />,
       );
       const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
-      fireEvent.mouseDown(separator, { clientX: 100 });
-      fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
-      fireEvent.mouseUp(separator);
+      fireEvent.mouseDown(separator, new MouseEvent('mouseDown', { clientX: 100 }));
+      fireEvent.mouseMove(separator, new MouseEvent('mousemove', { clientX: 110, buttons: 1 }));
+      fireEvent.mouseUp(separator, new MouseEvent('mouseup'));
       expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '110px' });
       expect(getCell(0, 0).getBoundingClientRect().width).to.equal(110);
       expect(screen.getByTestId('dummy-row').firstElementChild).toHaveInlineStyle({
@@ -198,15 +198,9 @@ describe('<DataGridPro /> - Columns', () => {
         `.${gridClasses['pinnedRows--bottom']} [role="gridcell"][data-colindex="0"]`,
       );
 
-      fireEvent.mouseDown(separator, { clientX: 100 });
-      fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 });
-
-      expect(columnHeaderCell.getBoundingClientRect().width).to.equal(150);
-      expect(nonPinnedCell.getBoundingClientRect().width).to.equal(150);
-      expect(topPinnedRowCell?.getBoundingClientRect().width).to.equal(150);
-      expect(bottomPinnedRowCell?.getBoundingClientRect().width).to.equal(150);
-
-      fireEvent.mouseUp(separator);
+      fireEvent.mouseDown(separator, new MouseEvent('mousedown', { clientX: 100 }));
+      fireEvent.mouseMove(separator, new MouseEvent('mousemove', { clientX: 150, buttons: 1 }));
+      fireEvent.mouseUp(separator, new MouseEvent('mouseup'));
 
       expect(columnHeaderCell.getBoundingClientRect().width).to.equal(150);
       expect(nonPinnedCell.getBoundingClientRect().width).to.equal(150);