[code-infra] Use vitest bundled types

.eslintrc.js

@@ -116,6 +116,10 @@ const buildPackageRestrictedImports = (packageName, root, allowRootImports = tru
       ]),
 ];
 
+const mochaPluginOverride = baseline.overrides.find((override) =>
+  override.extends?.includes('plugin:mocha/recommended'),
+);
+
 module.exports = {
   ...baseline,
   plugins: [
@@ -187,7 +191,19 @@ module.exports = {
     'react/no-unstable-nested-components': ['error', { allowAsProps: true }],
   },
   overrides: [
-    ...baseline.overrides,
+    ...baseline.overrides.filter(
+      (override) => !override.extends?.includes('plugin:mocha/recommended'),
+    ),
+    {
+      ...mochaPluginOverride,
+      extends: [],
+      rules: Object.entries(mochaPluginOverride.rules).reduce((acc, [key, value]) => {
+        if (!key.includes('mocha')) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {}),
+    },
     {
       files: [
         // matching the pattern of the test runner

docs/package.json

@@ -104,7 +104,6 @@
     "@babel/preset-typescript": "catalog:",
     "@mui/internal-docs-utils": "^2.0.1",
     "@mui/internal-scripts": "^2.0.9",
-    "@types/chai": "catalog:",
     "@types/chance": "catalog:",
     "@types/d3-scale": "catalog:",
     "@types/d3-scale-chromatic": "^3.1.0",

docs/src/modules/utils/postProcessImport.test.ts

@@ -1,4 +1,3 @@
-import { expect } from 'chai';
 import adapterDependencies from './adapter-dependencies.json';
 import { ADAPTER_TO_LIBRARY, postProcessImport } from './postProcessImport';
 

docs/tsconfig.json

@@ -9,8 +9,16 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "incremental": true,
-    "types": ["@mui/internal-test-utils/initMatchers", "chai-dom", "mocha"]
+    "types": ["@mui/internal-test-utils/initMatchers", "vitest/globals"]
   },
-  "include": ["next-env.d.ts", "next.config.mjs", "docs-env.d.ts", "src", "pages/**/*.ts*", "data"],
+  "include": [
+    "next-env.d.ts",
+    "next.config.mjs",
+    "docs-env.d.ts",
+    "src",
+    "pages/**/*.ts*",
+    "data",
+    "../test/utils/addChaiAssertions.ts"
+  ],
   "exclude": ["docs/.next", "docs/export", "pages/playground"]
 }

package.json

@@ -99,11 +99,9 @@
     "@playwright/test": "catalog:",
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.20.7",
-    "@types/chai": "catalog:",
     "@types/chai-dom": "^1.11.3",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "catalog:",
-    "@types/mocha": "^10.0.10",
     "@types/node": "^24.0.1",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
@@ -126,7 +124,6 @@
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "babel-plugin-transform-react-remove-prop-types": "catalog:",
     "babel-plugin-transform-replace-expressions": "^0.2.0",
-    "chai": "catalog:",
     "chai-dom": "^1.12.1",
     "compression-webpack-plugin": "^11.1.0",
     "concurrently": "^9.1.2",
@@ -146,7 +143,6 @@
     "eslint-plugin-jsdoc": "^50.8.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-material-ui": "workspace:^",
-    "eslint-plugin-mocha": "^10.5.0",
     "eslint-plugin-prettier": "^5.4.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-compiler": "19.0.0-beta-ebf51a3-20250411",

packages/x-charts-premium/tsconfig.json

@@ -4,8 +4,7 @@
     "types": [
       "@mui/internal-test-utils/initMatchers",
       "@mui/material/themeCssVarsAugmentation",
-      "chai-dom",
-      "mocha",
+      "vitest/globals",
       "node"
     ],
     "noImplicitAny": false,

packages/x-charts-pro/src/BarChartPro/BarChartPro.test.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { expect } from 'chai';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { LicenseInfo } from '@mui/x-license';
 import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier';

packages/x-charts-pro/src/BarChartPro/BarChartPro.zoom.test.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable no-promise-executor-return */
 /* eslint-disable no-await-in-loop */
 import * as React from 'react';
-import { expect } from 'chai';
 import { createRenderer, screen, fireEvent, act } from '@mui/internal-test-utils';
-import { describeSkipIf, isJSDOM, testSkipIf } from 'test/utils/skipIf';
+import { isJSDOM } from 'test/utils/skipIf';
 import * as sinon from 'sinon';
 import { BarChartPro } from './BarChartPro';
 
@@ -19,7 +18,7 @@ const getAxisTickValues = (axis: 'x' | 'y'): string[] => {
   return axisData as string[];
 };
 
-describeSkipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
+describe.skipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
   const { render } = createRenderer();
 
   const barChartProps = {
@@ -157,7 +156,7 @@ describeSkipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
 
   // Technically it should work, but it's not working in the test environment
   // https://github.com/pmndrs/use-gesture/discussions/430
-  testSkipIf(true)('should zoom on pinch', async () => {
+  it.skipIf(true)('should zoom on pinch', async () => {
     const { user } = render(<BarChartPro {...barChartProps} />, options);
 
     expect(screen.queryByText('A')).not.to.equal(null);

packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.test.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { expect } from 'chai';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { LicenseInfo } from '@mui/x-license';
 import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier';

packages/x-charts-pro/src/ChartZoomSlider/internals/zoom-utils.test.ts

@@ -1,4 +1,3 @@
-import { expect } from 'chai';
 import { calculateZoomEnd, calculateZoomStart, calculateZoomFromPointImpl } from './zoom-utils';
 import { ZoomData } from '../../models';
 

packages/x-charts-pro/src/FunnelChart/FunnelChart.test.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { expect } from 'chai';
 import { createRenderer, describeConformance, screen } from '@mui/internal-test-utils';
 import { Unstable_FunnelChart as FunnelChart } from '@mui/x-charts-pro/FunnelChart';
-import { describeSkipIf, isJSDOM } from 'test/utils/skipIf';
+import { isJSDOM } from 'test/utils/skipIf';
 
 const config = {
   series: [{ data: [{ value: 200 }, { value: 100 }] }],
@@ -44,7 +43,7 @@ describe('FunnelChart', () => {
     expect(screen.getByText('No data to display')).toBeVisible();
   });
 
-  describeSkipIf(isJSDOM)('gap', () => {
+  describe.skipIf(isJSDOM)('gap', () => {
     it('should properly distance sections based on gap', async () => {
       render(<FunnelChart {...config} gap={13} />);
       const paths = document.querySelectorAll<HTMLElement>('path.MuiFunnelSection-root');

packages/x-charts-pro/src/FunnelChart/checkClickEvent.test.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { Unstable_FunnelChart as FunnelChart } from '@mui/x-charts-pro/FunnelChart';
-import { testSkipIf, isJSDOM } from 'test/utils/skipIf';
+import { isJSDOM } from 'test/utils/skipIf';
 
 const config = {
   series: [
@@ -50,7 +49,7 @@ describe('FunnelChart - click event', () => {
 
   describe('onAxisClick', () => {
     // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527
-    testSkipIf(isJSDOM)('should provide the right context as second argument', async () => {
+    it.skipIf(isJSDOM)('should provide the right context as second argument', async () => {
       const onAxisClick = spy();
       const { user } = render(
         <div
@@ -94,7 +93,7 @@ describe('FunnelChart - click event', () => {
     });
 
     // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527
-    testSkipIf(isJSDOM)(
+    it.skipIf(isJSDOM)(
       'should provide the right context as second argument with layout="horizontal"',
       async () => {
         const onAxisClick = spy();
@@ -145,7 +144,7 @@ describe('FunnelChart - click event', () => {
     );
 
     // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527
-    testSkipIf(isJSDOM)(
+    it.skipIf(isJSDOM)(
       'should provide the correct axis values when using category axis',
       async () => {
         const onAxisClick = spy();
@@ -210,7 +209,7 @@ describe('FunnelChart - click event', () => {
     });
 
     // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527
-    testSkipIf(isJSDOM)('should provide the right context as second argument', async () => {
+    it.skipIf(isJSDOM)('should provide the right context as second argument', async () => {
       const onItemClick = spy();
       const { user } = render(
         <div

packages/x-charts-pro/src/Heatmap/Heatmap.test.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { expect } from 'chai';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { LicenseInfo } from '@mui/x-license';
 import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier';

packages/x-charts-pro/src/LineChartPro/LineChartPro.test.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { expect } from 'chai';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { LicenseInfo } from '@mui/x-license';
 import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier';

packages/x-charts-pro/src/LineChartPro/LineChartPro.zoom.test.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable no-promise-executor-return */
 /* eslint-disable no-await-in-loop */
 import * as React from 'react';
-import { expect } from 'chai';
 import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
-import { describeSkipIf, isJSDOM } from 'test/utils/skipIf';
+import { isJSDOM } from 'test/utils/skipIf';
 import * as sinon from 'sinon';
 import { LineChartPro } from './LineChartPro';
 
@@ -19,7 +18,7 @@ const getAxisTickValues = (axis: 'x' | 'y'): string[] => {
   return axisData as string[];
 };
 
-describeSkipIf(isJSDOM)('<LineChartPro /> - Zoom', () => {
+describe.skipIf(isJSDOM)('<LineChartPro /> - Zoom', () => {
   const { render } = createRenderer();
 
   const lineChartProps = {

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.test.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { expect } from 'chai';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { LicenseInfo } from '@mui/x-license';
 import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier';

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.zoom.test.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable no-promise-executor-return */
 /* eslint-disable no-await-in-loop */
 import * as React from 'react';
-import { expect } from 'chai';
 import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
-import { describeSkipIf, isJSDOM } from 'test/utils/skipIf';
+import { isJSDOM } from 'test/utils/skipIf';
 import * as sinon from 'sinon';
 import { ScatterChartPro } from './ScatterChartPro';
 
@@ -19,7 +18,7 @@ const getAxisTickValues = (axis: 'x' | 'y'): string[] => {
   return axisData as string[];
 };
 
-describeSkipIf(isJSDOM)('<ScatterChartPro /> - Zoom', () => {
+describe.skipIf(isJSDOM)('<ScatterChartPro /> - Zoom', () => {
   const { render } = createRenderer();
 
   const scatterChartProps = {

packages/x-charts-pro/src/hooks/useFunnelSeries.test.tsx

@@ -1,5 +1,4 @@
 import { renderHook, RenderHookResult } from '@mui/internal-test-utils';
-import { expect } from 'chai';
 import * as React from 'react';
 import { useFunnelSeries, useFunnelSeriesContext } from './useFunnelSeries';
 import {
@@ -41,7 +40,6 @@ describe('useFunnelSeriesContext', () => {
   });
 });
 
-// eslint-disable-next-line mocha/max-top-level-suites
 describe('useFunnelSeries', () => {
   it('should return the specific funnel series when a single seriesId is provided', () => {
     const { result } = renderHook(() => useFunnelSeries('1'), options);

packages/x-charts-pro/src/hooks/useHeatmapSeries.test.tsx

@@ -1,5 +1,4 @@
 import { renderHook, RenderHookResult } from '@mui/internal-test-utils';
-import { expect } from 'chai';
 import * as React from 'react';
 import { useHeatmapSeries, useHeatmapSeriesContext } from './useHeatmapSeries';
 import { Heatmap } from '../Heatmap';
@@ -48,7 +47,6 @@ describe('useHeatmapSeriesContext', () => {
   });
 });
 
-// eslint-disable-next-line mocha/max-top-level-suites
 describe('useHeatmapSeries', () => {
   it('should return the specific heatmap series when a single seriesId is provided', () => {
     const { result } = renderHook(() => useHeatmapSeries('1'), options);

packages/x-charts-pro/src/internals/plugins/useChartProZoom/calculateZoom.test.ts

@@ -1,4 +1,3 @@
-import { expect } from 'chai';
 import { calculateZoom } from './calculateZoom';
 
 describe('calculateZoom', () => {

packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.test.ts

@@ -1,4 +1,3 @@
-import { expect } from 'chai';
 import { ZoomData } from '@mui/x-charts/internals';
 import { initializeZoomData } from './useChartProZoom';
 

packages/x-charts-pro/tsconfig.json

@@ -4,8 +4,7 @@
     "types": [
       "@mui/internal-test-utils/initMatchers",
       "@mui/material/themeCssVarsAugmentation",
-      "chai-dom",
-      "mocha",
+      "vitest/globals",
       "node"
     ],
     "noImplicitAny": false,

packages/x-charts-vendor/src/tests/d3-interpolate.test.ts

@@ -1,4 +1,3 @@
-import { expect } from 'chai';
 
 /*
  * This test verifies that these modules and types are exported correctly

packages/x-charts-vendor/src/tests/d3-scale.test.ts

@@ -1,4 +1,3 @@
-import { expect } from 'chai';
 
 import {
   scaleLinear,

packages/x-charts-vendor/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "types": ["mocha"]
+    "types": ["vitest/globals"]
   },
   "include": ["src/**/*", "../../test/utils/addChaiAssertions.ts"],
   "exclude": ["es", "lib", "jest.config.ts"]

packages/x-charts/src/BarChart/BarChart.test.tsx

@@ -2,9 +2,8 @@ import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils/createRenderer';
 import { describeConformance } from 'test/utils/describeConformance';
 import { BarChart, barElementClasses } from '@mui/x-charts/BarChart';
-import { expect } from 'chai';
 import { screen } from '@mui/internal-test-utils';
-import { isJSDOM, testSkipIf } from 'test/utils/skipIf';
+import { isJSDOM } from 'test/utils/skipIf';
 
 describe('<BarChart />', () => {
   const { render } = createRenderer();
@@ -49,7 +48,7 @@ describe('<BarChart />', () => {
   );
 
   // svg.createSVGPoint not supported by JSDom https://github.com/jsdom/jsdom/issues/300
-  testSkipIf(isJSDOM)(
+  it.skipIf(isJSDOM)(
     'should hide tooltip if the item the tooltip was showing is removed',
     async () => {
       const { setProps, user } = render(
@@ -79,7 +78,7 @@ describe('<BarChart />', () => {
   );
 
   // svg.createSVGPoint not supported by JSDom https://github.com/jsdom/jsdom/issues/300
-  testSkipIf(isJSDOM)(
+  it.skipIf(isJSDOM)(
     'should hide tooltip if the series of the item the tooltip was showing is removed',
     async () => {
       const { setProps, user } = render(