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

lauri865 · Jan 17, 2025 · aca5f0e · aca5f0e
1 parent 6ff55f5
commit aca5f0e
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
@@ -469,7 +469,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 () => {
@@ -478,7 +480,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 () => {
@@ -487,7 +491,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);
     });
 
@@ -497,7 +503,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);
     });