[code-infra] Enable babel-plugin-display-name in vitest

babel.config.js

@@ -92,7 +92,14 @@ module.exports = function getBabelConfig(api) {
         ignoreFilenames: ['DataGrid.tsx', 'DataGridPro.tsx'],
       },
     ],
-    '@mui/internal-babel-plugin-display-name',
+    [
+      '@mui/internal-babel-plugin-display-name',
+      {
+        allowedCallees: {
+          '@mui/x-internals/forwardRef': ['forwardRef'],
+        },
+      },
+    ],
     [
       'transform-inline-environment-variables',
       {

packages/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -27,7 +27,7 @@ const configuration: GridConfiguration = {
   },
 };
 
-const DataGridRaw = forwardRef(function DataGrid<R extends GridValidRowModel>(
+const DataGridRaw = function DataGrid<R extends GridValidRowModel>(
   inProps: DataGridProps<R>,
   ref: React.Ref<HTMLDivElement>,
 ) {
@@ -52,7 +52,7 @@ const DataGridRaw = forwardRef(function DataGrid<R extends GridValidRowModel>(
       />
     </GridContextProvider>
   );
-});
+};
 
 interface DataGridComponent {
   <R extends GridValidRowModel = any>(
@@ -68,7 +68,7 @@ interface DataGridComponent {
  * API:
  * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
  */
-export const DataGrid = React.memo(DataGridRaw) as DataGridComponent;
+export const DataGrid = React.memo(forwardRef(DataGridRaw)) as DataGridComponent;
 
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------

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 <ForwardRef(DataGrid2)> component',
+        reactMajor < 19 && 'The above error occurred in the <DataGrid> 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 <ForwardRef(GridOverlay2)> component',
+      reactMajor < 19 && 'The above error occurred in the <GridOverlay> component',
     ]);
   });
 

packages/x-scheduler/src/primitives/time-grid/column/TimeGridColumnContext.ts

@@ -16,10 +16,6 @@ export const TimeGridColumnContext = React.createContext<TimeGridColumnContext |
   undefined,
 );
 
-if (process.env.NODE_ENV !== 'production') {
-  TimeGridColumnContext.displayName = 'TimeGridColumnContext';
-}
-
 export function useTimeGridColumnContext() {
   const context = React.useContext(TimeGridColumnContext);
   if (context === undefined) {

packages/x-scheduler/src/primitives/time-grid/root/TimeGridRootContext.ts

@@ -4,10 +4,6 @@ export interface TimeGridRootContext {}
 
 export const TimeGridRootContext = React.createContext<TimeGridRootContext | undefined>(undefined);
 
-if (process.env.NODE_ENV !== 'production') {
-  TimeGridRootContext.displayName = 'TimeGridRootContext';
-}
-
 export function useTimeGridRootContext() {
   const context = React.useContext(TimeGridRootContext);
   if (context === undefined) {

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 <ForwardRef(TreeItem2)> component`,
-          reactMajor < 19 && `The above error occurred in the <ForwardRef(TreeItem2)> component`,
+          reactMajor < 19 && `The above error occurred in the <TreeItem> component`,
+          reactMajor < 19 && `The above error occurred in the <TreeItem> component`,
         ]);
       } else {
         expect(() =>
@@ -38,8 +38,7 @@ 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 <ForwardRef(${treeViewComponentName}2)> component`,
+          reactMajor < 19 && `The above error occurred in the <${treeViewComponentName}> component`,
         ]);
       }
     });

vitest.shared.mts

@@ -1,11 +1,30 @@
 import { resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
 
 const CURRENT_DIR = dirname(fileURLToPath(import.meta.url));
 const WORKSPACE_ROOT = resolve(CURRENT_DIR, './');
 
 export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          [
+            '@mui/internal-babel-plugin-display-name',
+            {
+              allowedCallees: {
+                '@mui/x-internals/forwardRef': ['forwardRef'],
+              },
+            },
+          ],
+        ],
+        babelrc: false,
+        configFile: false,
+      },
+    }),
+  ],
   // We seem to need both this and the `env` property below to make it work.
   define: {
     'process.env.NODE_ENV': '"test"',