Migrate from sinon to Vitest mocking utilities

package.json

@@ -90,7 +90,6 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@types/requestidlecallback": "^0.3.7",
-    "@types/sinon": "^17.0.4",
     "@types/yargs": "^17.0.34",
     "@typescript-eslint/parser": "catalog:",
     "@vitejs/plugin-react": "catalog:",
@@ -135,7 +134,6 @@
     "remark": "^15.0.1",
     "rimraf": "catalog:",
     "serve": "catalog:",
-    "sinon": "^21.0.0",
     "stream-browserify": "^3.0.0",
     "string-replace-loader": "^3.2.0",
     "stylelint": "^16.25.0",

packages/x-charts-premium/src/ChartsRenderer/ChartsRenderer.test.tsx

@@ -1,4 +1,4 @@
-import { spy } from 'sinon';
+import { vi } from 'vitest';
 import { createRenderer } from '@mui/internal-test-utils/createRenderer';
 import { ChartsRenderer } from '@mui/x-charts-premium/ChartsRenderer';
 import { screen } from '@mui/internal-test-utils';
@@ -28,7 +28,7 @@ describe('<ChartsRenderer />', () => {
   });
 
   it('should pass the rendering to the onRender callback', () => {
-    const onRenderSpy = spy();
+    const onRenderSpy = vi.fn();
     render(
       <div data-testid="container">
         <ChartsRenderer
@@ -41,11 +41,11 @@ describe('<ChartsRenderer />', () => {
       </div>,
     );
 
-    expect(onRenderSpy.lastCall.firstArg).to.equal('line');
+    expect(onRenderSpy.mock.calls[onRenderSpy.mock.calls.length - 1][0]).to.equal('line');
   });
 
   it('should compute props for the chart', () => {
-    const onRenderSpy = spy();
+    const onRenderSpy = vi.fn();
     render(
       <div data-testid="container">
         <ChartsRenderer
@@ -58,12 +58,12 @@ describe('<ChartsRenderer />', () => {
       </div>,
     );
 
-    const props = onRenderSpy.lastCall.args[1];
+    const props = onRenderSpy.mock.calls[onRenderSpy.mock.calls.length - 1][1];
     expect(props.colors).to.equal(colorPaletteLookup.get('rainbowSurgePalette'));
   });
 
   it('should override the props if the configuration has an updated value', () => {
-    const onRenderSpy = spy();
+    const onRenderSpy = vi.fn();
     render(
       <div data-testid="container">
         <ChartsRenderer
@@ -78,12 +78,12 @@ describe('<ChartsRenderer />', () => {
       </div>,
     );
 
-    const props = onRenderSpy.lastCall.args[1];
+    const props = onRenderSpy.mock.calls[onRenderSpy.mock.calls.length - 1][1];
     expect(props.colors).to.equal(colorPaletteLookup.get('mangoFusionPalette'));
   });
 
   it('should place dimensions and values to the correct place in the props', () => {
-    const onRenderSpy = spy();
+    const onRenderSpy = vi.fn();
     render(
       <div data-testid="container">
         <ChartsRenderer
@@ -96,7 +96,7 @@ describe('<ChartsRenderer />', () => {
       </div>,
     );
 
-    const props = onRenderSpy.lastCall.args[1];
+    const props = onRenderSpy.mock.calls[onRenderSpy.mock.calls.length - 1][1];
     expect(props.series[0].data).to.deep.equal([1, 2, 3]);
   });
 });

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

@@ -129,7 +129,7 @@ describe.skipIf(isJSDOM)('<ChartZoomSlider />', () => {
     expect(getAxisTickValues('x')).to.not.include('A');
 
     // Reset zoom change spy
-    onZoomChange.resetHistory();
+    onZoomChange.mockClear();
 
     // Move the end thumb to zoom in from the right
     await user.pointer([

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

@@ -71,7 +71,7 @@ describe('FunnelChart - click event', () => {
         },
       ]);
 
-      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+      expect(onAxisClick.mock.calls[onAxisClick.mock.calls.length - 1][1]).to.deep.equal({
         dataIndex: 0,
         axisValue: 0,
         seriesValues: { big: 200, small: 100 },
@@ -85,7 +85,7 @@ describe('FunnelChart - click event', () => {
         },
       ]);
 
-      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+      expect(onAxisClick.mock.calls[onAxisClick.mock.calls.length - 1][1]).to.deep.equal({
         dataIndex: 1,
         axisValue: 1,
         seriesValues: { big: 100, small: 50 },
@@ -121,7 +121,7 @@ describe('FunnelChart - click event', () => {
           },
         ]);
 
-        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        expect(onAxisClick.mock.calls[onAxisClick.mock.calls.length - 1][1]).to.deep.equal({
           dataIndex: 0,
           axisValue: 0,
           seriesValues: { big: 200, small: 100 },
@@ -135,7 +135,7 @@ describe('FunnelChart - click event', () => {
           },
         ]);
 
-        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        expect(onAxisClick.mock.calls[onAxisClick.mock.calls.length - 1][1]).to.deep.equal({
           dataIndex: 1,
           axisValue: 1,
           seriesValues: { big: 100, small: 50 },
@@ -172,7 +172,7 @@ describe('FunnelChart - click event', () => {
           },
         ]);
 
-        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        expect(onAxisClick.mock.calls[onAxisClick.mock.calls.length - 1][1]).to.deep.equal({
           dataIndex: 0,
           axisValue: 'First',
           seriesValues: { big: 200, small: 100 },
@@ -186,7 +186,7 @@ describe('FunnelChart - click event', () => {
           },
         ]);
 
-        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        expect(onAxisClick.mock.calls[onAxisClick.mock.calls.length - 1][1]).to.deep.equal({
           dataIndex: 1,
           axisValue: 'Second',
           seriesValues: { big: 100, small: 50 },
@@ -228,27 +228,27 @@ describe('FunnelChart - click event', () => {
       );
 
       await user.click(pathsBig[0]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.calls[onItemClick.mock.calls.length - 1][1]).to.deep.equal({
         type: 'funnel',
         seriesId: 'big',
         dataIndex: 0,
       });
 
       await user.click(pathsBig[1]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.calls[onItemClick.mock.calls.length - 1][1]).to.deep.equal({
         type: 'funnel',
         seriesId: 'big',
         dataIndex: 1,
       });
 
       await user.click(pathsSmall[0]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.calls[onItemClick.mock.calls.length - 1][1]).to.deep.equal({
         type: 'funnel',
         seriesId: 'small',
         dataIndex: 0,
       });
       await user.click(pathsSmall[1]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.calls[onItemClick.mock.calls.length - 1][1]).to.deep.equal({
         type: 'funnel',
         seriesId: 'small',
         dataIndex: 1,

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

@@ -1,5 +1,5 @@
 import { createRenderer } from '@mui/internal-test-utils';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { isJSDOM } from 'test/utils/skipIf';
 import { CHART_SELECTOR } from '../tests/constants';
@@ -30,7 +30,7 @@ describe('BarChart - click event', () => {
   describe('onAxisClick', () => {
     // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527
     it.skipIf(isJSDOM)('should provide the right context as second argument', async () => {
-      const onAxisClick = spy();
+      const onAxisClick = vi.fn();
       const { user } = render(
         <div
           style={{
@@ -59,7 +59,7 @@ describe('BarChart - click event', () => {
         },
       ]);
 
-      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+      expect(onAxisClick.mock.calls[onAxisClick.mock.calls.length - 1][1]).to.deep.equal({
         dataIndex: 0,
         axisValue: 'A',
         seriesValues: { s1: 4, s2: 2 },
@@ -73,7 +73,7 @@ describe('BarChart - click event', () => {
         },
       ]);
 
-      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+      expect(onAxisClick.mock.calls[onAxisClick.mock.calls.length - 1][1]).to.deep.equal({
         dataIndex: 1,
         axisValue: 'B',
         seriesValues: { s1: 1, s2: 1 },
@@ -84,7 +84,7 @@ describe('BarChart - click event', () => {
     it.skipIf(isJSDOM)(
       'should provide the right context as second argument with layout="horizontal"',
       async () => {
-        const onAxisClick = spy();
+        const onAxisClick = vi.fn();
         const { user } = render(
           <div
             style={{
@@ -114,7 +114,7 @@ describe('BarChart - click event', () => {
           },
         ]);
 
-        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        expect(onAxisClick.mock.calls[onAxisClick.mock.calls.length - 1][1]).to.deep.equal({
           dataIndex: 0,
           axisValue: 'A',
           seriesValues: { s1: 4, s2: 2 },
@@ -128,7 +128,7 @@ describe('BarChart - click event', () => {
           },
         ]);
 
-        expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        expect(onAxisClick.mock.calls[onAxisClick.mock.calls.length - 1][1]).to.deep.equal({
           dataIndex: 1,
           axisValue: 'B',
           seriesValues: { s1: 1, s2: 1 },
@@ -159,7 +159,7 @@ describe('BarChart - click event', () => {
 
     // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527
     it.skipIf(isJSDOM)('should provide the right context as second argument', async () => {
-      const onItemClick = spy();
+      const onItemClick = vi.fn();
       const { user } = render(
         <div
           style={{
@@ -182,21 +182,21 @@ describe('BarChart - click event', () => {
       const rectangles = document.querySelectorAll<HTMLElement>('rect.MuiBarElement-root');
 
       await user.click(rectangles[0]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.calls[onItemClick.mock.calls.length - 1][1]).to.deep.equal({
         type: 'bar',
         seriesId: 's1',
         dataIndex: 0,
       });
 
       await user.click(rectangles[1]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.calls[onItemClick.mock.calls.length - 1][1]).to.deep.equal({
         type: 'bar',
         seriesId: 's1',
         dataIndex: 1,
       });
 
       await user.click(rectangles[2]);
-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.calls[onItemClick.mock.calls.length - 1][1]).to.deep.equal({
         type: 'bar',
         seriesId: 's2',
         dataIndex: 0,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { spy } from 'sinon';
+import { vi } from 'vitest';
 import { createRenderer } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { useChartsLocalization } from '@mui/x-charts/hooks';
@@ -24,7 +24,7 @@ describe('<ChartsLocalizationProvider />', () => {
   const { render } = createRenderer();
 
   it('should respect localeText from the theme', () => {
-    const handleContextChange = spy();
+    const handleContextChange = vi.fn();
 
     const theme = createTheme({
       components: {
@@ -44,13 +44,13 @@ describe('<ChartsLocalizationProvider />', () => {
       </ThemeProvider>,
     );
 
-    const localeText: ChartsLocaleText = handleContextChange.lastCall.args[0].localeText;
+    const localeText: ChartsLocaleText = handleContextChange.mock.calls[handleContextChange.mock.calls.length - 1][0].localeText;
     expect(localeText.noData).to.equal('Pas de data');
     expect(localeText.loading).to.equal('Loading data…');
   });
 
   it('should prioritize localeText key passed on LocalizationProvider compared to key passed from the theme', () => {
-    const handleContextChange = spy();
+    const handleContextChange = vi.fn();
 
     const theme = createTheme({
       components: {
@@ -70,12 +70,12 @@ describe('<ChartsLocalizationProvider />', () => {
       </ThemeProvider>,
     );
 
-    const localeText: ChartsLocaleText = handleContextChange.lastCall.args[0].localeText;
+    const localeText: ChartsLocaleText = handleContextChange.mock.calls[handleContextChange.mock.calls.length - 1][0].localeText;
     expect(localeText.noData).to.equal('Prioritized');
   });
 
   it('should prioritize deepest LocalizationProvider when using nested ones', () => {
-    const handleContextChange = spy();
+    const handleContextChange = vi.fn();
 
     render(
       <ChartsLocalizationProvider localeText={{ noData: 'Not Prioritized' }}>
@@ -85,12 +85,12 @@ describe('<ChartsLocalizationProvider />', () => {
       </ChartsLocalizationProvider>,
     );
 
-    const localeText: ChartsLocaleText = handleContextChange.lastCall.args[0].localeText;
+    const localeText: ChartsLocaleText = handleContextChange.mock.calls[handleContextChange.mock.calls.length - 1][0].localeText;
     expect(localeText.noData).to.equal('Prioritized');
   });
 
   it("should not lose locales from higher LocalizationProvider when deepest one don't have the translation key", () => {
-    const handleContextChange = spy();
+    const handleContextChange = vi.fn();
 
     render(
       <ChartsLocalizationProvider localeText={{ noData: 'Prioritized' }}>
@@ -100,7 +100,7 @@ describe('<ChartsLocalizationProvider />', () => {
       </ChartsLocalizationProvider>,
     );
 
-    const localeText: ChartsLocaleText = handleContextChange.lastCall.args[0].localeText;
+    const localeText: ChartsLocaleText = handleContextChange.mock.calls[handleContextChange.mock.calls.length - 1][0].localeText;
     expect(localeText.noData).to.equal('Prioritized');
     expect(localeText.loading).to.equal('Other Locale');
   });