[charts] Migrate from sinon to Vitest mocking utilities for x-charts* packages #20444

Copilot · 2025-11-25T13:03:46Z

Cherry-picks changes from #20352 to migrate x-charts packages from sinon to Vitest mocking utilities.

Changes

Replace spy() / sinon.spy() with vi.fn()
Replace .callCount with .mock.calls.length
Replace .lastCall.args[N] with .mock.lastCall?.[N]
Replace .firstCall?.args[N] with .mock.calls[0]?.[N]
Replace .getCall(N).firstArg with .mock.calls[N][0]
Replace .resetHistory() with .mockClear()

Files Modified

x-charts:

BarChart/checkClickEvent.test.tsx
ChartsLocalizationProvider/ChartsLocalizationProvider.test.tsx
LineChart/checkClickEvent.test.tsx
PieChart/checkClickEvent.test.tsx
RadarChart/RadarChart.test.tsx, RadarChart/checkClickEvent.test.tsx
ScatterChart/checkClickEvent.test.tsx
internals/animation/useAnimate.test.tsx
internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.axisHighlight.test.tsx

x-charts-premium:

ChartsRenderer/ChartsRenderer.test.tsx

x-charts-pro:

ChartZoomSlider/ChartZoomSlider.test.tsx
FunnelChart/checkClickEvent.test.tsx
LineChartPro/LineChartPro.zoom.test.tsx
ScatterChartPro/ScatterChartPro.zoom.test.tsx
BarChartPro/BarChartPro.zoom.test.tsx
internals/plugins/useChartProZoom/ZoomInteractionConfig.test.tsx
I have followed (at least) the PR section of the contributing guide.

Original prompt

Migrate from sinon to Vitest mocking utilities for x-charts* packages.

The changes have been made in this PR, so you can just cherry-pick them: #20352

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: bernardobelchior <12778398+bernardobelchior@users.noreply.github.com>

mui-bot · 2025-11-25T13:19:23Z

Deploy preview: https://deploy-preview-20444--material-ui-x.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against dbb147c

bernardobelchior · 2025-11-25T13:45:47Z

@copilot prefer array.at(-1) to array[array.length-1].

Also, run pnpm prettier

Co-authored-by: bernardobelchior <12778398+bernardobelchior@users.noreply.github.com>

Copilot · 2025-11-25T13:53:40Z

@copilot prefer array.at(-1) to array[array.length-1].

Also, run pnpm prettier

Done in c953fe1. Changed all occurrences of array[array.length - 1] to array.at(-1) and ran prettier.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

iojs.org
- Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

bernardobelchior · 2025-11-25T14:03:11Z

@copilot Fix types:

> @mui/x-charts@8.19.0 typescript /tmp/mui/packages/x-charts
> tsc -p tsconfig.json

src/BarChart/checkClickEvent.test.tsx(62,14): error TS2532: Object is possibly 'undefined'.
src/BarChart/checkClickEvent.test.tsx(76,14): error TS2532: Object is possibly 'undefined'.
src/BarChart/checkClickEvent.test.tsx(117,16): error TS2532: Object is possibly 'undefined'.
src/BarChart/checkClickEvent.test.tsx(131,16): error TS2532: Object is possibly 'undefined'.
src/BarChart/checkClickEvent.test.tsx(185,14): error TS2532: Object is possibly 'undefined'.
src/BarChart/checkClickEvent.test.tsx(192,14): error TS2532: Object is possibly 'undefined'.
src/BarChart/checkClickEvent.test.tsx(199,14): error TS2532: Object is possibly 'undefined'.
src/ChartsLocalizationProvider/ChartsLocalizationProvider.test.tsx(47,42): error TS2532: Object is possibly 'undefined'.
src/ChartsLocalizationProvider/ChartsLocalizationProvider.test.tsx(73,42): error TS2532: Object is possibly 'undefined'.
src/ChartsLocalizationProvider/ChartsLocalizationProvider.test.tsx(88,42): error TS2532: Object is possibly 'undefined'.
src/ChartsLocalizationProvider/ChartsLocalizationProvider.test.tsx(103,42): error TS2532: Object is possibly 'undefined'.
src/LineChart/checkClickEvent.test.tsx(56,14): error TS2532: Object is possibly 'undefined'.
src/LineChart/checkClickEvent.test.tsx(70,14): error TS2532: Object is possibly 'undefined'.
src/LineChart/checkClickEvent.test.tsx(130,14): error TS2532: Object is possibly 'undefined'.
src/LineChart/checkClickEvent.test.tsx(137,14): error TS2532: Object is possibly 'undefined'.
src/LineChart/checkClickEvent.test.tsx(144,14): error TS2532: Object is possibly 'undefined'.
src/LineChart/checkClickEvent.test.tsx(198,14): error TS2532: Object is possibly 'undefined'.
src/LineChart/checkClickEvent.test.tsx(204,14): error TS2532: Object is possibly 'undefined'.
src/LineChart/checkClickEvent.test.tsx(257,14): error TS2532: Object is possibly 'undefined'.
src/LineChart/checkClickEvent.test.tsx(263,14): error TS2532: Object is possibly 'undefined'.
src/PieChart/checkClickEvent.test.tsx(61,14): error TS2532: Object is possibly 'undefined'.
src/PieChart/checkClickEvent.test.tsx(68,14): error TS2532: Object is possibly 'undefined'.
src/RadarChart/checkClickEvent.test.tsx(47,14): error TS2532: Object is possibly 'undefined'.
src/RadarChart/checkClickEvent.test.tsx(61,14): error TS2532: Object is possibly 'undefined'.
src/RadarChart/checkClickEvent.test.tsx(97,16): error TS2532: Object is possibly 'undefined'.
src/RadarChart/checkClickEvent.test.tsx(111,16): error TS2532: Object is possibly 'undefined'.
src/RadarChart/checkClickEvent.test.tsx(154,14): error TS2532: Object is possibly 'undefined'.
src/RadarChart/checkClickEvent.test.tsx(161,14): error TS2532: Object is possibly 'undefined'.
src/RadarChart/checkClickEvent.test.tsx(168,14): error TS2532: Object is possibly 'undefined'.
src/RadarChart/checkClickEvent.test.tsx(210,14): error TS2532: Object is possibly 'undefined'.
src/RadarChart/checkClickEvent.test.tsx(223,14): error TS2532: Object is possibly 'undefined'.
src/ScatterChart/checkClickEvent.test.tsx(60,14): error TS2532: Object is possibly 'undefined'.
src/ScatterChart/checkClickEvent.test.tsx(73,14): error TS2532: Object is possibly 'undefined'.
src/ScatterChart/checkClickEvent.test.tsx(110,14): error TS2532: Object is possibly 'undefined'.
src/ScatterChart/checkClickEvent.test.tsx(179,14): error TS2532: Object is possibly 'undefined'.
src/internals/animation/useAnimate.test.tsx(130,44): error TS2345: Argument of type 'number | undefined' is not assignable to parameter of type 'number | Date'.
  Type 'undefined' is not assignable to type 'number | Date'.
src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.axisHighlight.test.tsx(94,12): error TS2532: Object is possibly 'undefined'.
src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.axisHighlight.test.tsx(103,12): error TS2532: Object is possibly 'undefined'.
src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.axisHighlight.test.tsx(129,12): error TS2532: Object is possibly 'undefined'.
src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.axisHighlight.test.tsx(161,12): error TS2532: Object is possibly 'undefined'.
src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.axisHighlight.test.tsx(170,12): error TS2532: Object is possibly 'undefined'.
 ELIFECYCLE  Command failed with exit code 2.

> @mui/x-data-grid-pro:typescript


> @mui/x-data-grid-pro@8.19.0 typescript /tmp/mui/packages/x-data-grid-pro
> tsc -p tsconfig.json


> @mui/x-charts-pro:typescript


> @mui/x-charts-pro@8.19.0 typescript /tmp/mui/packages/x-charts-pro
> tsc -p tsconfig.json

src/FunnelChart/checkClickEvent.test.tsx(74,14): error TS2532: Object is possibly 'undefined'.
src/FunnelChart/checkClickEvent.test.tsx(88,14): error TS2532: Object is possibly 'undefined'.
src/FunnelChart/checkClickEvent.test.tsx(124,16): error TS2532: Object is possibly 'undefined'.
src/FunnelChart/checkClickEvent.test.tsx(138,16): error TS2532: Object is possibly 'undefined'.
src/FunnelChart/checkClickEvent.test.tsx(175,16): error TS2532: Object is possibly 'undefined'.
src/FunnelChart/checkClickEvent.test.tsx(189,16): error TS2532: Object is possibly 'undefined'.
src/FunnelChart/checkClickEvent.test.tsx(231,14): error TS2532: Object is possibly 'undefined'.
src/FunnelChart/checkClickEvent.test.tsx(238,14): error TS2532: Object is possibly 'undefined'.
src/FunnelChart/checkClickEvent.test.tsx(245,14): error TS2532: Object is possibly 'undefined'.
src/FunnelChart/checkClickEvent.test.tsx(251,14): error TS2532: Object is possibly 'undefined'.
 ELIFECYCLE  Command failed with exit code 2.

> @mui/x-charts-premium:typescript


> @mui/x-charts-premium@8.19.0 typescript /tmp/mui/packages/x-charts-premium
> tsc -p tsconfig.json

src/ChartsRenderer/ChartsRenderer.test.tsx(44,12): error TS2532: Object is possibly 'undefined'.
src/ChartsRenderer/ChartsRenderer.test.tsx(61,19): error TS2532: Object is possibly 'undefined'.
src/ChartsRenderer/ChartsRenderer.test.tsx(81,19): error TS2532: Object is possibly 'undefined'.
src/ChartsRenderer/ChartsRenderer.test.tsx(99,19): error TS2532: Object is possibly 'undefined'.
 ELIFECYCLE  Command failed with exit code 2.

Co-authored-by: bernardobelchior <12778398+bernardobelchior@users.noreply.github.com>

Copilot · 2025-11-25T14:11:39Z

@copilot Fix types:

Fixed in 9c511ab. Added non-null assertions (.at(-1)!) to tell TypeScript the value is defined.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

iojs.org
- Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

codspeed-hq · 2025-11-25T15:01:10Z

CodSpeed Performance Report

Merging #20444 will not alter performance

_{Comparing copilot/migrate-sinon-to-vitest-again (dbb147c) with master (ba13a10)}

Summary

✅ 13 untouched

JCQuintas

If you are planning to add this all other packages, it would be nice to have a eslint rule to prevent us from using sinon again in new tests :)

JCQuintas · 2025-11-26T23:11:14Z

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

      ]);

-      expect(onItemClick.lastCall.args[1]).to.deep.equal({
+      expect(onItemClick.mock.calls.at(-1)![1]).to.deep.equal({


We could replace all these mock.calls.at(-1) with mock.lastCall, but optional

@copilot does mock.lastCall work here? If so, update it all over this PR

Yes, mock.lastCall works here. Replaced all occurrences in 7c4939c.

bernardobelchior · 2025-11-27T07:14:28Z

If you are planning to add this all other packages, it would be nice to have a eslint rule to prevent us from using sinon again in new tests :)

Isn't removing the dependency enough? That's what I was imagining.

Co-authored-by: bernardobelchior <12778398+bernardobelchior@users.noreply.github.com>

Copilot · 2025-11-27T07:49:57Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

iojs.org
- Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

JCQuintas · 2025-11-27T10:29:56Z

If you are planning to add this all other packages, it would be nice to have a eslint rule to prevent us from using sinon again in new tests :)

Isn't removing the dependency enough? That's what I was imagining.

I don't think it will in our case, sinon is probably installed from the mui/materia package as well

JCQuintas · 2025-11-27T10:31:38Z

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

    );

-    expect(onRenderSpy.lastCall.firstArg).to.equal('line');
+    expect(onRenderSpy.mock.lastCall![0]).to.equal('line');


These should probably be optional access instead

Suggested change

expect(onRenderSpy.mock.lastCall![0]).to.equal('line');

expect(onRenderSpy.mock.lastCall?.[0]).to.equal('line');

@copilot use ?. instead of ! when accessing potentially null or undefined values

Done in dbb147c. Changed mock.lastCall! to mock.lastCall?. across all files.

…k.lastCall Co-authored-by: bernardobelchior <12778398+bernardobelchior@users.noreply.github.com>

Copilot · 2025-11-27T10:47:10Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

iojs.org
- Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Initial plan

729f8b0

Copilot AI assigned Copilot and bernardobelchior Nov 25, 2025

Copilot started work on behalf of bernardobelchior November 25, 2025 13:04 View session

Migrate x-charts packages from sinon to Vitest mocking utilities

233e4d6

Co-authored-by: bernardobelchior <12778398+bernardobelchior@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Migrate mocking utilities for x-charts packages~~ [charts] Migrate from sinon to Vitest mocking utilities for x-charts* packages Nov 25, 2025

Copilot AI requested a review from bernardobelchior November 25, 2025 13:26

Copilot finished work on behalf of bernardobelchior November 25, 2025 13:26

Copilot started work on behalf of bernardobelchior November 25, 2025 13:46 View session

Use array.at(-1) instead of array[array.length - 1] and run prettier

c953fe1

Co-authored-by: bernardobelchior <12778398+bernardobelchior@users.noreply.github.com>

Copilot finished work on behalf of bernardobelchior November 25, 2025 13:54

Copilot started work on behalf of bernardobelchior November 25, 2025 14:03 View session

Fix TypeScript errors by adding non-null assertions to .at(-1)

9c511ab

Co-authored-by: bernardobelchior <12778398+bernardobelchior@users.noreply.github.com>

Copilot finished work on behalf of bernardobelchior November 25, 2025 14:13

bernardobelchior added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Nov 25, 2025

bernardobelchior marked this pull request as ready for review November 25, 2025 15:04

bernardobelchior requested review from JCQuintas and alexfauquette as code owners November 25, 2025 15:04

JCQuintas reviewed Nov 26, 2025

View reviewed changes

Copilot started work on behalf of bernardobelchior November 27, 2025 07:43 View session

Replace mock.calls.at(-1) with mock.lastCall for better readability

7c4939c

Co-authored-by: bernardobelchior <12778398+bernardobelchior@users.noreply.github.com>

Copilot finished work on behalf of bernardobelchior November 27, 2025 07:50

bernardobelchior requested a review from JCQuintas November 27, 2025 07:50

JCQuintas approved these changes Nov 27, 2025

View reviewed changes

JCQuintas reviewed Nov 27, 2025

View reviewed changes

Copilot started work on behalf of bernardobelchior November 27, 2025 10:39 View session

Use optional chaining (?.) instead of non-null assertions (!) for moc…

dbb147c

…k.lastCall Co-authored-by: bernardobelchior <12778398+bernardobelchior@users.noreply.github.com>

Copilot finished work on behalf of bernardobelchior November 27, 2025 10:47

JCQuintas enabled auto-merge (squash) November 27, 2025 10:49

JCQuintas merged commit 420e924 into master Nov 27, 2025
28 checks passed

JCQuintas deleted the copilot/migrate-sinon-to-vitest-again branch November 27, 2025 11:08

	expect(onRenderSpy.mock.lastCall![0]).to.equal('line');
	expect(onRenderSpy.mock.lastCall?.[0]).to.equal('line');

Uh oh!

[charts] Migrate from sinon to Vitest mocking utilities for x-charts* packages #20444

[charts] Migrate from sinon to Vitest mocking utilities for x-charts* packages #20444

Conversation

Copilot AI commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Files Modified

Uh oh!

mui-bot commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

bernardobelchior commented Nov 25, 2025

Uh oh!

Copilot AI commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

bernardobelchior commented Nov 25, 2025

Uh oh!

Copilot AI commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

codspeed-hq bot commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #20444 will not alter performance

Summary

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

JCQuintas Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior commented Nov 27, 2025

Uh oh!

Copilot AI commented Nov 27, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

JCQuintas commented Nov 27, 2025

Uh oh!

JCQuintas Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Nov 27, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Copilot AI commented Nov 25, 2025 •

edited

Loading

mui-bot commented Nov 25, 2025 •

edited

Loading

Copilot AI commented Nov 25, 2025 •

edited

Loading

Copilot AI commented Nov 25, 2025 •

edited

Loading

codspeed-hq bot commented Nov 25, 2025 •

edited

Loading

bernardobelchior Nov 27, 2025 •

edited

Loading