[test] Fix flaky column pinning tests (#16219)

mui · Jan 17, 2025 · 3f55f0d · 3f55f0d
1 parent 990f2e2
commit 3f55f0d
Showing 1 changed file with 12 additions and 4 deletions.
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
@@ -476,7 +476,9 @@ describe('<DataGridPro /> - Column pinning', () => {
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
       await user.click(menuIconButton);
       await user.click(screen.getByRole('menuitem', { name: 'Pin to left' }));
-      expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).not.to.equal(null);
+      await waitFor(() => {
+        expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).not.to.equal(null);
+      });
     });
 
     it('should pin the column to the right when clicking the "Pin to right" pinning button', async () => {
@@ -485,7 +487,9 @@ describe('<DataGridPro /> - Column pinning', () => {
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
       await user.click(menuIconButton);
       await user.click(screen.getByRole('menuitem', { name: 'Pin to right' }));
-      expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).not.to.equal(null);
+      await waitFor(() => {
+        expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).not.to.equal(null);
+      });
     });
 
     it('should allow to invert the side when clicking on "Pin to right" pinning button on a left pinned column', async () => {
@@ -494,7 +498,9 @@ describe('<DataGridPro /> - Column pinning', () => {
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
       await user.click(menuIconButton);
       await user.click(screen.getByRole('menuitem', { name: 'Pin to right' }));
-      expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).to.equal(null);
+      await waitFor(() => {
+        expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).to.equal(null);
+      });
       expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).not.to.equal(null);
     });
 
@@ -504,7 +510,9 @@ describe('<DataGridPro /> - Column pinning', () => {
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
       await user.click(menuIconButton);
       await user.click(screen.getByRole('menuitem', { name: 'Pin to left' }));
-      expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).to.equal(null);
+      await waitFor(() => {
+        expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).to.equal(null);
+      });
       expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).not.to.equal(null);
     });