[infra] Stabilise tests by removing babel and plugins from vitest (#18341)

Signed-off-by: Jose C Quintas Jr <[email protected]>

Author: JCQuintas

package.json

@@ -113,8 +113,8 @@
     "@typescript-eslint/eslint-plugin": "^8.33.1",
     "@typescript-eslint/parser": "catalog:",
     "@vitejs/plugin-react": "catalog:",
-    "@vitest/browser": "^3.2.2",
-    "@vitest/coverage-v8": "^3.2.2",
+    "@vitest/browser": "catalog:",
+    "@vitest/coverage-v8": "catalog:",
     "@vvago/vale": "^3.11.2",
     "autoprefixer": "catalog:",
     "axe-core": "4.10.3",

packages/x-data-grid/src/tests/layout.DataGrid.test.tsx

@@ -953,7 +953,7 @@ describe('<DataGrid /> - Layout & warnings', () => {
         'The Data Grid component requires all rows to have a unique `id` property',
         reactMajor < 19 &&
           'The Data Grid component requires all rows to have a unique `id` property',
-        reactMajor < 19 && 'The above error occurred in the <DataGrid> component',
+        reactMajor < 19 && 'The above error occurred in the <ForwardRef(DataGrid2)> component',
       ]);
       expect((errorRef.current as any).errors).to.have.length(1);
       expect((errorRef.current as any).errors[0].toString()).to.include(

packages/x-data-grid/src/tests/slots.DataGrid.test.tsx

@@ -167,7 +167,7 @@ describe('<DataGrid /> - Slots', () => {
       'MUI X: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.',
       reactMajor < 19 &&
         'MUI X: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.',
-      reactMajor < 19 && 'The above error occurred in the <GridOverlay> component',
+      reactMajor < 19 && 'The above error occurred in the <ForwardRef(GridOverlay2)> component',
     ]);
   });
 

packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx

@@ -28,8 +28,8 @@ describeTreeView<
           'Encountered two children with the same key, `1`',
           'MUI X: The Tree View component requires all items to have a unique `id` property.',
           'Alternatively, you can use the `getItemId` prop to specify a custom id for each item',
-          reactMajor < 19 && `The above error occurred in the <TreeItem> component`,
-          reactMajor < 19 && `The above error occurred in the <TreeItem> component`,
+          reactMajor < 19 && `The above error occurred in the <ForwardRef(TreeItem2)> component`,
+          reactMajor < 19 && `The above error occurred in the <ForwardRef(TreeItem2)> component`,
         ]);
       } else {
         expect(() =>
@@ -38,7 +38,8 @@ describeTreeView<
           'MUI X: The Tree View component requires all items to have a unique `id` property.',
           reactMajor < 19 &&
             'MUI X: The Tree View component requires all items to have a unique `id` property.',
-          reactMajor < 19 && `The above error occurred in the <${treeViewComponentName}> component`,
+          reactMajor < 19 &&
+            `The above error occurred in the <ForwardRef(${treeViewComponentName}2)> component`,
         ]);
       }
     });

pnpm-lock.yaml

@@ -49,7 +49,6 @@ catalog:
   '@types/semver': ^7.7.0
   '@types/use-sync-external-store': ^1.5.0
   '@typescript-eslint/parser': ^8.33.1
-  '@vitejs/plugin-react': ^4.5.1
   autoprefixer: ^10.4.21
   babel-plugin-module-resolver: ^5.0.2
   babel-plugin-optimize-clsx: ^2.6.2
@@ -83,6 +82,11 @@ catalog:
   stylis: ^4.3.6
   tsx: ^4.19.4
   use-sync-external-store: ^1.5.0
-  vitest: 3.2.2
+  vitest: 3.2.3
+  '@vitejs/plugin-react': ^4.5.2
+  '@vitejs/plugin-react-swc': ^3.10.2
+  '@vitest/coverage-v8': ^3.2.2
+  '@vitest/browser': ^3.2.2
+  '@vitest/ui': ^3.2.2
   webpack-bundle-analyzer: ^4.10.2
   yargs: ^18.0.0

pnpm-workspace.yaml

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { alias } from '../../vitest.shared.mjs';
+import { alias } from '../../vitest.shared.mts';
 
 export default defineConfig({
   build: {

test/e2e/vite.config.mts

@@ -16,9 +16,9 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@vitejs/plugin-react": "catalog:",
-    "@vitejs/plugin-react-swc": "^3.10.1",
-    "@vitest/browser": "3.2.2",
-    "@vitest/ui": "3.2.2",
+    "@vitejs/plugin-react-swc": "catalog:",
+    "@vitest/browser": "catalog:",
+    "@vitest/ui": "catalog:",
     "jsdom": "^26.1.0",
     "react": "catalog:",
     "react-dom": "catalog:",

test/performance-charts/package.json

@@ -1,7 +1,7 @@
 import path from 'path';
 import { defineConfig, transformWithEsbuild } from 'vite';
 import react from '@vitejs/plugin-react';
-import { alias } from '../../vitest.shared.mjs';
+import { alias } from '../../vitest.shared.mts';
 
 export default defineConfig({
   build: {

test/regressions/vite.config.mts

@@ -36,24 +36,9 @@ export const alias = [
 ];
 
 export default defineConfig({
-  plugins: [
-    react({
-      babel: {
-        plugins: [
-          [
-            '@mui/internal-babel-plugin-display-name',
-            {
-              allowedCallees: {
-                '@mui/x-internals/forwardRef': ['forwardRef'],
-              },
-            },
-          ],
-        ],
-        babelrc: false,
-        configFile: false,
-      },
-    }),
-  ],
+  // If enabling babel plugins, ensure the tests in CI are stable
+  // https://github.com/mui/mui-x/pull/18341
+  plugins: [react()],
   // We seem to need both this and the `env` property below to make it work.
   define: {
     'process.env.NODE_ENV': '"test"',