[test] Disable react-transition-group transitions in unit testing (#…

…16288) Signed-off-by: Lukas Tyla <[email protected]> Co-authored-by: Lukas <[email protected]> Co-authored-by: Jan Potoms <[email protected]>
mui · Jan 31, 2025 · 804bb40 · 804bb40
1 parent a592f92
commit 804bb40
Show file tree

Hide file tree

Showing 21 changed files with 176 additions and 155 deletions.
diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json
@@ -76,9 +76,11 @@
     "@mui/material": "^5.16.14",
     "@mui/system": "^5.16.14",
     "@types/prop-types": "^15.7.14",
+    "@types/react-transition-group": "^4.4.12",
     "date-fns": "^4.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-transition-group": "^4.4.5",
     "rimraf": "^6.0.1"
   },
   "engines": {

diff --git a/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
-import { createRenderer, act, waitFor } from '@mui/internal-test-utils';
+import { createRenderer, act } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import {
   DataGridPremium as DataGrid,
@@ -104,6 +104,6 @@ describe('<DataGrid /> - Quick filter', () => {
       },
     });
 
-    await waitFor(() => expect(getColumnValues(0)).to.deep.equal(['20th Century Fox (1)', '']));
+    expect(getColumnValues(0)).to.deep.equal(['20th Century Fox (1)', '']);
   });
 });
diff --git a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx
@@ -114,7 +114,7 @@ describe('<DataGridPremium /> - Data source aggregation', () => {
       expect(fetchRowsSpy.callCount).to.be.greaterThan(0);
     });
     await user.click(within(getColumnHeaderCell(0)).getByLabelText('Menu'));
-    expect(screen.queryByLabelText('Aggregation')).not.to.equal(null);
+    expect(await screen.findByLabelText('Aggregation')).not.to.equal(null);
   });
 
   it('should not show aggregation option in the column menu when no aggregation function is defined', async () => {

diff --git a/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { addYears } from 'date-fns/addYears';
 import { expect } from 'chai';
-import { createRenderer, screen, waitFor } from '@mui/internal-test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { DataGridPremium } from '@mui/x-data-grid-premium';
 import { generateLicense, LicenseInfo } from '@mui/x-license';
 
@@ -23,15 +23,13 @@ describe('<DataGridPremium /> - License', () => {
     ]);
   });
 
-  it('should render watermark when the license is missing', async () => {
+  it('should render watermark when the license is missing', () => {
     LicenseInfo.setLicenseKey('');
 
     expect(() => render(<DataGridPremium columns={[]} rows={[]} autoHeight />)).toErrorDev([
       'MUI X: Missing license key.',
     ]);
 
-    await waitFor(() => {
-      expect(screen.getByText('MUI X Missing license key')).not.to.equal(null);
-    });
+    expect(screen.getByText('MUI X Missing license key')).not.to.equal(null);
   });
 });
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
@@ -1,13 +1,7 @@
 import * as React from 'react';
+import { config } from 'react-transition-group';
 import { RefObject } from '@mui/x-internals/types';
-import {
-  createRenderer,
-  fireEvent,
-  screen,
-  act,
-  waitFor,
-  reactMajor,
-} from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, act, reactMajor } from '@mui/internal-test-utils';
 import {
   microtasks,
   getColumnHeaderCell,
@@ -1792,6 +1786,10 @@ describe('<DataGridPremium /> - Row grouping', () => {
     });
 
     it('should add a "Stop grouping {field}" menu item for each grouping criteria on the grouping column when prop.rowGroupingColumnMode = "single"', () => {
+      const restoreDisabledConfig = config.disabled;
+      // enable `react-transition-group` transitions for this test
+      config.disabled = false;
+
       render(
         <Test
           columns={[
@@ -1826,6 +1824,9 @@ describe('<DataGridPremium /> - Row grouping', () => {
       });
       fireEvent.click(menuItemCategory2);
       expect(apiRef.current?.state.rowGrouping.model).to.deep.equal([]);
+
+      // restore previous config
+      config.disabled = restoreDisabledConfig;
     });
 
     it('should add a "Stop grouping {field}" menu item for each grouping criteria with colDef.groupable = false but it should be disabled', () => {
@@ -2891,29 +2892,31 @@ describe('<DataGridPremium /> - Row grouping', () => {
       />,
     );
 
-    act(() => apiRef.current?.updateRows([{ id: 1, group: 'A', username: 'username 2' }]));
+    await act(async () => {
+      apiRef.current?.updateRows([{ id: 1, group: 'A', username: 'username 2' }]);
+    });
 
-    await waitFor(() => expect(getCell(1, 3).textContent).to.equal('username 2'));
+    expect(getCell(1, 3).textContent).to.equal('username 2');
   });
 
   // See https://github.com/mui/mui-x/issues/8580
   it('should not collapse expanded groups after `updateRows`', async () => {
-    render(
+    const { user } = render(
       <Test
         columns={[{ field: 'id' }, { field: 'group' }, { field: 'username', width: 150 }]}
         rows={[{ id: 1, group: 'A', username: 'username' }]}
         rowGroupingModel={['group']}
       />,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'see children' }));
+    await user.click(screen.getByRole('button', { name: 'see children' }));
 
-    act(() => apiRef.current?.updateRows([{ id: 1, group: 'A', username: 'username 2' }]));
-
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'hide children' })).toBeVisible();
+    await act(async () => {
+      apiRef.current?.updateRows([{ id: 1, group: 'A', username: 'username 2' }]);
     });
-    await waitFor(() => expect(getCell(1, 3).textContent).to.equal('username 2'));
+
+    expect(screen.getByRole('button', { name: 'hide children' })).toBeVisible();
+    expect(getCell(1, 3).textContent).to.equal('username 2');
   });
 
   // See https://github.com/mui/mui-x/issues/8853
@@ -2933,10 +2936,10 @@ describe('<DataGridPremium /> - Row grouping', () => {
     expect(getColumnValues(3)).to.deep.equal(['', 'username1', 'username2']);
 
     // trigger row update without any changes in row data
-    act(() => apiRef.current?.updateRows([{ id: 1 }]));
-
-    await waitFor(() => {
-      expect(getColumnValues(3)).to.deep.equal(['', 'username1', 'username2']);
+    await act(async () => {
+      apiRef.current?.updateRows([{ id: 1 }]);
     });
+
+    expect(getColumnValues(3)).to.deep.equal(['', 'username1', 'username2']);
   });
 });
diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json
@@ -74,8 +74,10 @@
     "@mui/material": "^5.16.14",
     "@mui/system": "^5.16.14",
     "@types/prop-types": "^15.7.14",
+    "@types/react-transition-group": "^4.4.12",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-transition-group": "^4.4.5",
     "rimraf": "^6.0.1"
   },
   "engines": {

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
@@ -14,7 +14,7 @@ import {
   GridColDef,
 } from '@mui/x-data-grid-pro';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
-import { createRenderer, fireEvent, act, waitFor } 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';
 
@@ -906,15 +906,13 @@ describe('<DataGridPro /> - Cell editing', () => {
 
       it('should call preProcessEditCellProps', async () => {
         const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => props);
-        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
+        const { user } = render(<TestCase columnProps={{ preProcessEditCellProps }} />);
 
         const cell = getCell(0, 1);
-        fireUserEvent.mousePress(cell);
-        fireEvent.keyDown(cell, { key: 'Delete' });
+        await user.click(cell);
+        await user.keyboard('{Delete}');
 
-        await waitFor(() => {
-          expect(preProcessEditCellProps.callCount).to.equal(1);
-        });
+        expect(preProcessEditCellProps.callCount).to.equal(1);
 
         expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({
           value: '',

diff --git a/packages/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { config } from 'react-transition-group';
 import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { gridClasses, DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro';
@@ -198,6 +199,10 @@ describe('<DataGridPro /> - Column headers', () => {
     });
 
     it('should remove the MuiDataGrid-menuOpen CSS class only after the transition has ended', () => {
+      const restoreDisabledConfig = config.disabled;
+      // enable `react-transition-group` transitions for this test
+      config.disabled = false;
+
       render(
         <div style={{ width: 300, height: 500 }}>
           <DataGridPro {...baselineProps} columns={[{ field: 'brand' }]} />
@@ -212,6 +217,9 @@ describe('<DataGridPro /> - Column headers', () => {
       expect(menuIconButton?.parentElement).to.have.class(gridClasses.menuOpen);
       clock.runToLast(); // Wait for the transition to run
       expect(menuIconButton?.parentElement).not.to.have.class(gridClasses.menuOpen);
+
+      // restore previous config
+      config.disabled = restoreDisabledConfig;
     });
 
     it('should restore focus to the column header when dismissing the menu by selecting any item', () => {

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
@@ -122,7 +122,7 @@ describe('<DataGridPro /> - Detail panel', () => {
         );
       }
       const rowHeight = 50;
-      render(
+      const { user } = render(
         <TestCase
           nbRows={1}
           rowHeight={rowHeight}
@@ -131,23 +131,19 @@ describe('<DataGridPro /> - Detail panel', () => {
         />,
       );
       const virtualScrollerContent = grid('virtualScrollerContent')!;
-      fireEvent.click(screen.getByRole('button', { name: 'Expand' }));
+      await user.click(screen.getByRole('button', { name: 'Expand' }));
 
-      await waitFor(() => {
-        expect(getRow(0).className).to.include(gridClasses['row--detailPanelExpanded']);
-      });
+      expect(getRow(0).className).to.include(gridClasses['row--detailPanelExpanded']);
 
-      await waitFor(() => {
-        expect(virtualScrollerContent).toHaveComputedStyle({ height: `${rowHeight + 100}px` });
-      });
+      expect(virtualScrollerContent).toHaveComputedStyle({ height: `${rowHeight + 100}px` });
       expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' });
 
       const detailPanels = $$('.MuiDataGrid-detailPanel');
       expect(detailPanels[0]).toHaveComputedStyle({
         height: `100px`,
       });
 
-      fireEvent.click(screen.getByRole('button', { name: 'Increase' }));
+      await user.click(screen.getByRole('button', { name: 'Increase' }));
 
       await waitFor(() => {
         expect(virtualScrollerContent).toHaveComputedStyle({ height: `${rowHeight + 200}px` });

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
@@ -598,8 +598,8 @@ describe('<DataGridPro /> - Edit components', () => {
       const cell = getCell(0, 0);
       await user.dblClick(cell);
       await user.click(screen.queryAllByRole('option')[1]);
-      await waitFor(() => expect(screen.queryByRole('listbox')).to.equal(null));
-      await act(() => {
+      expect(screen.queryByRole('listbox')).to.equal(null);
+      await act(async () => {
         screen.getByRole('combobox').focus();
       });
       await user.keyboard('{Enter}');

diff --git a/packages/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx
@@ -1,21 +1,19 @@
 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 { DataGridPro } from '@mui/x-data-grid-pro';
 import { LicenseInfo } from '@mui/x-license';
 
 describe('<DataGridPro /> - License', () => {
   const { render } = createRenderer();
 
-  it('should render watermark when the license is missing', async () => {
+  it('should render watermark when the license is missing', () => {
     LicenseInfo.setLicenseKey('');
 
     expect(() => render(<DataGridPro columns={[]} rows={[]} autoHeight />)).toErrorDev([
       'MUI X: Missing license key.',
     ]);
 
-    await waitFor(() => {
-      expect(screen.getByText('MUI X Missing license key')).not.to.equal(null);
-    });
+    expect(screen.getByText('MUI X Missing license key')).not.to.equal(null);
   });
 });
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
@@ -14,7 +14,7 @@ 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, screen, waitFor } 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';
 
@@ -910,15 +910,13 @@ describe('<DataGridPro /> - Row editing', () => {
 
       it('should call preProcessEditCellProps', async () => {
         const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => props);
-        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
+        const { user } = render(<TestCase column1Props={{ preProcessEditCellProps }} />);
 
         const cell = getCell(0, 1);
-        fireUserEvent.mousePress(cell);
-        fireEvent.keyDown(cell, { key: 'Delete' });
+        await user.click(cell);
+        await user.keyboard('{Delete}');
 
-        await waitFor(() => {
-          expect(preProcessEditCellProps.callCount).to.equal(1);
-        });
+        expect(preProcessEditCellProps.callCount).to.equal(1);
 
         expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({
           value: '',

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
@@ -12,7 +12,7 @@ import {
   GridColDef,
 } from '@mui/x-data-grid-pro';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
-import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils';
 import {
   $,
   grid,
@@ -733,7 +733,7 @@ describe('<DataGridPro /> - Row pinning', () => {
   testSkipIf(isJSDOM)('should support cell editing', async () => {
     const processRowUpdate = spy((row) => ({ ...row, currencyPair: 'USD-GBP' }));
     const columns: GridColDef[] = [{ field: 'id' }, { field: 'name', editable: true }];
-    render(
+    const { user } = render(
       <div style={{ width: 400, height: 400 }}>
         <DataGridPro
           rows={[
@@ -752,15 +752,16 @@ describe('<DataGridPro /> - Row pinning', () => {
     );
 
     const cell = getCell(0, 1);
-    fireEvent.doubleClick(cell);
+    await user.dblClick(cell);
 
     const input = cell.querySelector('input')!;
-    fireEvent.change(input, { target: { value: 'Marcus' } });
-    fireEvent.keyDown(input, { key: 'Enter' });
+    // remove the previous value before typing in the new one
+    // was "fireEvent.change(input, { target: { value: 'Marcus' } })"
+    await user.clear(input);
+    await user.type(input, 'Marcus');
+    await user.keyboard('{Enter}');
 
-    await waitFor(() => {
-      expect(cell.textContent).to.equal('Marcus');
-    });
+    expect(cell.textContent).to.equal('Marcus');
     expect(processRowUpdate.callCount).to.equal(1);
     expect(processRowUpdate.lastCall.args[0]).to.deep.equal({ id: 3, name: 'Marcus' });
   });
@@ -769,7 +770,7 @@ describe('<DataGridPro /> - Row pinning', () => {
   testSkipIf(isJSDOM)('should support row editing', async () => {
     const processRowUpdate = spy((row) => ({ ...row, currencyPair: 'USD-GBP' }));
     const columns: GridColDef[] = [{ field: 'id' }, { field: 'name', editable: true }];
-    render(
+    const { user } = render(
       <div style={{ width: 400, height: 400 }}>
         <DataGridPro
           rows={[
@@ -789,15 +790,16 @@ describe('<DataGridPro /> - Row pinning', () => {
     );
 
     const cell = getCell(0, 1);
-    fireEvent.doubleClick(cell);
+    await user.dblClick(cell);
 
     const input = cell.querySelector('input')!;
-    fireEvent.change(input, { target: { value: 'Marcus' } });
-    fireEvent.keyDown(input, { key: 'Enter' });
+    // remove the previous value before typing in the new one
+    // was "fireEvent.change(input, { target: { value: 'Marcus' } })"
+    await user.clear(input);
+    await user.type(input, 'Marcus');
+    await user.keyboard('{Enter}');
 
-    await waitFor(() => {
-      expect(cell.textContent).to.equal('Marcus');
-    });
+    expect(cell.textContent).to.equal('Marcus');
     expect(processRowUpdate.callCount).to.equal(1);
     expect(processRowUpdate.lastCall.args[0]).to.deep.equal({ id: 3, name: 'Marcus' });
   });