refactor: migrate Charts v8 and v9 tests from react-test-renderer to @testing-library/react #35307

Copilot · 2025-10-09T08:02:25Z

Migrate Charts v8 and v9 Tests for React 19 Compatibility

This PR migrates tests in both @fluentui/react-charting (Charts v8) and @fluentui/react-charts (Charts v9) from react-test-renderer to @testing-library/react to enable React 19 compatibility. This addresses the requirements outlined in issue #35306.

Changes

Test Migration to @testing-library/react

Charts v8 (@fluentui/react-charting) - Migrated 5 test files:

Sparkline.test.tsx
HorizontalBarChartWithAxis.test.tsx
VerticalBarChart.test.tsx
TreeChart.test.tsx
VerticalStackedBarChart.test.tsx

Charts v9 (@fluentui/react-charts) - Migrated 5 test files:

Sparkline.test.tsx
Legends.test.tsx
VerticalBarChart.test.tsx
VerticalStackedBarChart.test.tsx
DonutChart.test.tsx

The migration was necessary because react-test-renderer is not compatible with React 19, and using @testing-library/react ensures proper integration testing across React 17/18/19 through our tooling.

Enabled RIT for react-charting

Removed react-charting from the exclusion list in .github/workflows/pr.yml to enable React Integration Tests (RIT) for both React 17 and 19, ensuring compatibility validation in CI.

Key Migration Patterns

Before:

const component = renderer.create(<Chart data={data} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();

After:

const { container } = render(<Chart data={data} />);
expect(container.firstChild).toMatchSnapshot();

For tests using act:

let result: ReturnType<typeof render> | undefined;
act(() => {
  result = render(<Chart data={data} />);
});
expect(result!.container.firstChild).toMatchSnapshot();

All tests use DOM-based assertions and container.firstChild to avoid the extra wrapper div in snapshots, providing more accurate snapshot testing.

Global Test Setup

Added getComputedTextLength mock to the global test setup file (config/tests.js) for v9 charts to handle JSDOM limitations with SVG text measurement. The mock is configurable and writable to allow individual tests to override it if needed.

Testing

✅ All test files in @fluentui/react-charting pass successfully
✅ All test files in @fluentui/react-charts pass successfully
✅ No regressions in existing functionality
✅ Updated snapshots to use container.firstChild for cleaner output
✅ Global getComputedTextLength mock properly configured in test setup

Breaking Changes

None. This is a backward-compatible change that migrates tests to @testing-library/react for better React 19 compatibility.

Related Issues

Fixes #35306

Original prompt

This section details on the original issue you should resolve

<issue_title>[Feature]: Charts v8 React 19 Support</issue_title>
<issue_description>### Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

To support React 19 in both the v8 and v9 Charts packages, we need to address the following issues:

Update types as needed for react, react-experiments, and react-examples (including chart examples, but excluding the chart v8 package; v9 is already updated). Reference PR: fix(v8): resolve react 19 type issues for v8 packages #35288

Migrate tests from react-test-renderer to @testing-library/react in both charts v8 and v9 packages, since react-test-renderer is not compatible with React 19, and to ensure integration testing for React 17/18/19 through our tooling. Reference PR: chore(utilities): migrate tests to use @testing-library/react #35302

Additional context

No response

Have you discussed this feature with our team

@Hotell

Validations

Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

High</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #35306

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

...react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx

dmytrokirpa · 2025-10-15T16:16:58Z

@copilot revert changes in all package.json and change/[...].json files. They are not relevant for this PR

dmytrokirpa · 2025-10-16T10:10:32Z

packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx


 /* eslint-disable @typescript-eslint/no-deprecated */
 describe('VerticalBarChart snapShot testing', () => {
+  const mockGetComputedTextLength = jest.fn().mockReturnValue(100);


@copilot remove the mock, it shouldn't be required

Removed the local mocks from VerticalBarChart and VerticalStackedBarChart test files and added a global getComputedTextLength mock to config/tests.js instead. The global mock is configurable and writable to allow tests that need custom behavior to override it. All tests pass successfully. Commit: f7e9c3a

github-actions · 2025-10-16T10:15:22Z

📊 Bundle size report

✅ No changes found

github-actions · 2025-10-16T10:21:12Z

Pull request demo site: URL

…@testing-library/react

github-actions · 2025-10-16T14:11:05Z

.github/workflows/pr.yml

          path: |
            tmp/rit/**/cypress/screenshots/**/*.png
          retention-days: 1



🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Card Converged - Selectable 8 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled.normal.chromium.png 16531 Changed

vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled - Dark Mode.click.chromium.png 9053 Changed

vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled.click.chromium.png 15083 Changed

vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled - Dark Mode.normal.chromium.png 8962 Changed

vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled - Dark Mode.selected.chromium.png 9088 Changed

vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled.hover.chromium.png 15966 Changed

vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled.selected.chromium.png 15548 Changed

vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled - Dark Mode.hover.chromium.png 8956 Changed

vr-tests-react-components/Charts-DonutChart 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png 12635 Changed

vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 27053 Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 44 Changed

vr-tests-react-components/Positioning.Positioning end.chromium.png 863 Changed

vr-tests-react-components/TagPicker 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png 1321 Changed

vr-tests-web-components/Avatar 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-web-components/Avatar. - Dark Mode.normal.chromium_1.png 298 Changed

vr-tests-web-components/Avatar. - Dark Mode.normal.chromium.png 10381 Changed

vr-tests-web-components/Switch 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-web-components/Switch. - Dark Mode.hover.chromium_2.png 92 Changed

vr-tests/Callout 11 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/Callout.Bottom left edge - RTL.default.chromium.png 2186 Changed

vr-tests/Callout.Beak 25.default.chromium.png 2185 Changed

vr-tests/Callout.Bottom right edge - RTL.default.chromium.png 1114 Changed

vr-tests/Callout.Bottom right edge.default.chromium.png 1120 Changed

vr-tests/Callout.Left bottom edge.default.chromium.png 3123 Changed

vr-tests/Callout.Gap space 25.default.chromium.png 2181 Changed

vr-tests/Callout.No beak.default.chromium.png 2177 Changed

vr-tests/Callout.No callout width specified.default.chromium.png 2126 Changed

vr-tests/Callout.Right top edge.default.chromium.png 1116 Changed

vr-tests/Callout.Top center.default.chromium.png 2113 Changed

vr-tests/Callout.Top left edge.default.chromium.png 2196 Changed

vr-tests/Dropdown 12 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/Dropdown.Custom Dropdown - RTL.hover.chromium.png 1090 Changed

vr-tests/Dropdown.Required without label.hover.chromium.png 29 Changed

vr-tests/Dropdown.Custom Dropdown - RTL.click.chromium.png 2504 Changed

vr-tests/Dropdown.Custom Dropdown - RTL.default.chromium.png 1828949 Changed

vr-tests/Dropdown.Required.hover.chromium.png 29 Changed

vr-tests/Dropdown.Custom Dropdown - RTL.hover item.chromium.png 2423 Changed

vr-tests/Dropdown.Required without label.click.chromium.png 29 Changed

vr-tests/Dropdown.Required without label.default.chromium.png 1836060 Changed

vr-tests/Dropdown.Required without label.hover item.chromium.png 23 Changed

vr-tests/Dropdown.Required.click.chromium.png 29 Changed

vr-tests/Dropdown.Required.default.chromium.png 1827027 Changed

vr-tests/Dropdown.Required.hover item.chromium.png 23 Changed

vr-tests/Dropdown Disabled 3 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/Dropdown Disabled.Root.hover.chromium.png 12 Changed

vr-tests/Dropdown Disabled.Root.click.chromium.png 12 Changed

vr-tests/Dropdown Disabled.Root.default.chromium.png 1831344 Changed

vr-tests/Keytip 3 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/Keytip.Disabled.default.chromium.png 24 Changed

vr-tests/Keytip.Offset.default.chromium.png 86 Changed

vr-tests/Keytip.Root.default.chromium.png 55 Changed

vr-tests/react-charting-GaugeChart 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/react-charting-GaugeChart.Basic.default.chromium.png 2 Changed

vr-tests/react-charting-LineChart 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/react-charting-LineChart.Events.default.chromium.png 17 Changed

vr-tests/react-charting-LineChart.Events - Dark Mode.default.chromium.png 16 Changed

vr-tests/react-charting-MultiStackBarChart 3 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - Dark Mode.default.chromium.png 363 Changed

vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - RTL.default.chromium.png 343 Changed

vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole - RTL.default.chromium.png 343 Changed

There were 3 duplicate changes discarded. Check the build logs for more information.

Copilot AI assigned Copilot and dmytrokirpa Oct 9, 2025

Copilot started work on behalf of dmytrokirpa October 9, 2025 08:02 View session

microsoft-github-policy-service bot added Component: Pickers Area: Build System Area: Website Fluent UI react-northstar Package: react-monaco-editor Area: Icons web-components Component: Button Component: Avatar labels Oct 9, 2025

github-project-automation bot added this to @fluentui Web Components Oct 9, 2025

microsoft-github-policy-service bot added Component: Checkbox Component: Link Component: Pivot Component: Slider Component: Toggle Package: charting Package: date-time Package: experiments Package: styling PR: API Modified labels Oct 9, 2025

Copilot AI changed the title ~~[WIP] Add support for React 19 in Charts v8 package~~ feat: Add React 19 support to Charts v8 and migrate tests from react-test-renderer Oct 9, 2025

Copilot AI requested a review from dmytrokirpa October 9, 2025 08:34

Copilot finished work on behalf of dmytrokirpa October 9, 2025 08:34

dmytrokirpa reviewed Oct 15, 2025

View reviewed changes

...react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx Outdated Show resolved Hide resolved

Copilot started work on behalf of dmytrokirpa October 15, 2025 16:16 View session

dmytrokirpa reviewed Oct 16, 2025

View reviewed changes

Copilot started work on behalf of dmytrokirpa October 16, 2025 10:13 View session

Copilot AI requested a review from dmytrokirpa October 16, 2025 10:21

Copilot finished work on behalf of dmytrokirpa October 16, 2025 10:21

refactor: migrate Charts v8 and v9 tests from react-test-renderer to …

36101cd

…@testing-library/react

dmytrokirpa force-pushed the copilot/support-react-19-charts-v8 branch from df6f0df to 36101cd Compare October 16, 2025 13:43

dmytrokirpa removed their request for review October 16, 2025 13:43

github-actions bot reviewed Oct 16, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: migrate Charts v8 and v9 tests from react-test-renderer to @testing-library/react #35307

refactor: migrate Charts v8 and v9 tests from react-test-renderer to @testing-library/react #35307

Copilot AI commented Oct 9, 2025 •

edited

Loading

Uh oh!

Uh oh!

dmytrokirpa commented Oct 15, 2025

Uh oh!

dmytrokirpa Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

github-actions bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 16, 2025

Uh oh!

github-actions bot Oct 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled.normal.chromium.png	16531	Changed
vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled - Dark Mode.click.chromium.png	9053	Changed
vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled.click.chromium.png	15083	Changed
vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled - Dark Mode.normal.chromium.png	8962	Changed
vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled - Dark Mode.selected.chromium.png	9088	Changed
vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled.hover.chromium.png	15966	Changed
vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled.selected.chromium.png	15548	Changed
vr-tests-react-components/Card Converged - Selectable.appearance selectable - Filled - Dark Mode.hover.chromium.png	8956	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png	12635	Changed
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png	27053	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	44	Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png	863	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium_1.png	298	Changed
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium.png	10381	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests/Callout.Bottom left edge - RTL.default.chromium.png	2186	Changed
vr-tests/Callout.Beak 25.default.chromium.png	2185	Changed
vr-tests/Callout.Bottom right edge - RTL.default.chromium.png	1114	Changed
vr-tests/Callout.Bottom right edge.default.chromium.png	1120	Changed
vr-tests/Callout.Left bottom edge.default.chromium.png	3123	Changed
vr-tests/Callout.Gap space 25.default.chromium.png	2181	Changed
vr-tests/Callout.No beak.default.chromium.png	2177	Changed
vr-tests/Callout.No callout width specified.default.chromium.png	2126	Changed
vr-tests/Callout.Right top edge.default.chromium.png	1116	Changed
vr-tests/Callout.Top center.default.chromium.png	2113	Changed
vr-tests/Callout.Top left edge.default.chromium.png	2196	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests/Dropdown.Custom Dropdown - RTL.hover.chromium.png	1090	Changed
vr-tests/Dropdown.Required without label.hover.chromium.png	29	Changed
vr-tests/Dropdown.Custom Dropdown - RTL.click.chromium.png	2504	Changed
vr-tests/Dropdown.Custom Dropdown - RTL.default.chromium.png	1828949	Changed
vr-tests/Dropdown.Required.hover.chromium.png	29	Changed
vr-tests/Dropdown.Custom Dropdown - RTL.hover item.chromium.png	2423	Changed
vr-tests/Dropdown.Required without label.click.chromium.png	29	Changed
vr-tests/Dropdown.Required without label.default.chromium.png	`1836060`	Changed
vr-tests/Dropdown.Required without label.hover item.chromium.png	23	Changed
vr-tests/Dropdown.Required.click.chromium.png	29	Changed
vr-tests/Dropdown.Required.default.chromium.png	`1827027`	Changed
vr-tests/Dropdown.Required.hover item.chromium.png	23	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests/Dropdown Disabled.Root.hover.chromium.png	12	Changed
vr-tests/Dropdown Disabled.Root.click.chromium.png	12	Changed
vr-tests/Dropdown Disabled.Root.default.chromium.png	1831344	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests/Keytip.Disabled.default.chromium.png	24	Changed
vr-tests/Keytip.Offset.default.chromium.png	86	Changed
vr-tests/Keytip.Root.default.chromium.png	55	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests/react-charting-LineChart.Events.default.chromium.png	17	Changed
vr-tests/react-charting-LineChart.Events - Dark Mode.default.chromium.png	16	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - Dark Mode.default.chromium.png	363	Changed
vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - RTL.default.chromium.png	343	Changed
vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole - RTL.default.chromium.png	343	Changed

refactor: migrate Charts v8 and v9 tests from react-test-renderer to @testing-library/react #35307

Are you sure you want to change the base?

refactor: migrate Charts v8 and v9 tests from react-test-renderer to @testing-library/react #35307

Conversation

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

Uh oh!

Migrate Charts v8 and v9 Tests for React 19 Compatibility

Changes

Test Migration to @testing-library/react

Enabled RIT for react-charting

Key Migration Patterns

Global Test Setup

Testing

Breaking Changes

Related Issues

Describe the feature that you would like added

Additional context

Have you discussed this feature with our team

Validations

Priority

Comments on the Issue (you are @copilot in this section)

Uh oh!

Uh oh!

dmytrokirpa commented Oct 15, 2025

Uh oh!

dmytrokirpa Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions bot commented Oct 16, 2025

Uh oh!

github-actions bot Oct 16, 2025

Choose a reason for hiding this comment

🕵🏾‍♀️ visual changes to review in the Visual Change Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Oct 9, 2025 •

edited

Loading

github-actions bot commented Oct 16, 2025 •

edited

Loading