Skip to content

refactor(react-charts,react-charting): migrate tests from react-test-renderer to @testing-library/react #35307

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

refactor(react-charts,react-charting): migrate tests from react-test-renderer to @testing-library/react #35307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36101cd
refactor: migrate Charts v8 and v9 tests from react-test-renderer to …
dmytrokirpa Oct 16, 2025
d9a26fd
fix failing tests
dmytrokirpa Oct 17, 2025
f426dac
Merge branch 'master' into copilot/support-react-19-charts-v8
dmytrokirpa Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/workflows/pr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,11 +127,11 @@ jobs:

- name: React Versions Integration Tests (17,19) - Test
run: |
FLUENT_JEST_WORKER=2 yarn nx affected -t test-rit--17--test,test-rit--19--test --exclude='react-19-tests-v9,react-charting'
FLUENT_JEST_WORKER=2 yarn nx affected -t test-rit--17--test,test-rit--19--test --exclude='react-19-tests-v9'
- name: React Versions Integration Tests (17,19) - Type-check
run: |
FLUENT_JEST_WORKER=2 yarn nx affected -t test-rit--17--type-check,test-rit--19--type-check --exclude='react-19-tests-v9,react-charting'
FLUENT_JEST_WORKER=2 yarn nx affected -t test-rit--17--type-check,test-rit--19--type-check --exclude='react-19-tests-v9'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we could probably merge the type-check and test targets back as there have the same args, right @Hotell?

react_19_v9_source_code_typecheck:
if: ${{ github.repository_owner == 'microsoft' }}
Expand Down
32 changes: 16 additions & 16 deletions packages/charts/react-charting/src/components/GanttChart/GanttChart.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ describe('GanttChart rendering and behavior tests', () => {

it('should render callout correctly when a bar is hovered', async () => {
const { container } = render(<GanttChart data={ganttData} calloutProps={{ doNotLayer: true }} />);
await act(() => {
await act(async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not related to the react-test-renderer => RTL migration itself, but this was failing for react 17/18/19 integration tests.

fireEvent.mouseOver(container.querySelector('rect')!);
});
expect(container).toMatchSnapshot();
Expand All @@ -102,7 +102,7 @@ describe('GanttChart rendering and behavior tests', () => {
const { container } = render(
<GanttChart data={ganttData} hideTooltip={true} calloutProps={{ doNotLayer: true }} />,
);
await act(() => {
act(() => {
fireEvent.mouseOver(container.querySelector('rect')!);
});
expect(container.querySelector('.ms-Callout')).toBeNull();
Expand Down Expand Up @@ -137,7 +137,7 @@ describe('GanttChart interaction and accessibility tests', () => {
render(<GanttChart data={ganttDataWithLongY} showYAxisLablesTooltip={true} />);
expect(screen.queryByText('Site Preparation')).toBeNull();

await act(() => {
act(() => {
fireEvent.mouseOver(screen.getByText('Site...'));
});
expect(screen.queryByText('Site Preparation')).not.toBeNull();
Expand All @@ -146,12 +146,12 @@ describe('GanttChart interaction and accessibility tests', () => {
it(`should display callout on bar hover and hide it on mouse leave from the chart`, async () => {
const { container } = render(<GanttChart data={ganttData} calloutProps={{ doNotLayer: true }} />);
const bar = container.querySelector('rect')!;
await act(() => {
act(() => {
fireEvent.mouseOver(bar);
});
expect(container.querySelector('.ms-Callout')).not.toBeNull();

await act(() => {
act(() => {
fireEvent.mouseLeave(container.querySelector('[class^="root"]')!);
});
expect(container.querySelector('.ms-Callout')).toBeNull();
Expand All @@ -160,7 +160,7 @@ describe('GanttChart interaction and accessibility tests', () => {
it('should display callout when a bar is focused', async () => {
const { container } = render(<GanttChart data={ganttData} calloutProps={{ doNotLayer: true }} />);
const bar = container.querySelector('rect')!;
await act(() => {
act(() => {
fireEvent.focus(bar);
});
expect(container.querySelector('.ms-Callout')).not.toBeNull();
Expand All @@ -169,15 +169,15 @@ describe('GanttChart interaction and accessibility tests', () => {
it(`should highlight corresponding bars on legend hover and remove highlight on legend mouse out`, async () => {
const { container } = render(<GanttChart data={ganttData} />);
const legendButton = screen.getByText('Not Started');
await act(() => {
act(() => {
fireEvent.mouseOver(legendButton);
});
const bars = container.querySelectorAll('rect');
expect(bars).toHaveLength(8);
expect(bars[3]).toHaveAttribute('opacity', '1');
expect(bars[0]).toHaveAttribute('opacity', '0.1');

await act(() => {
act(() => {
fireEvent.mouseOut(legendButton);
});
expect(bars[3]).toHaveAttribute('opacity', '1');
Expand All @@ -187,15 +187,15 @@ describe('GanttChart interaction and accessibility tests', () => {
it(`should toggle highlight on corresponding bars when legend is clicked`, async () => {
const { container } = render(<GanttChart data={ganttData} />);
const legendButton = screen.getByText('Incomplete');
await act(() => {
act(() => {
fireEvent.click(legendButton);
});
const bars = container.querySelectorAll('rect');
expect(bars).toHaveLength(8);
expect(bars[1]).toHaveAttribute('opacity', '1');
expect(bars[0]).toHaveAttribute('opacity', '0.1');

await act(() => {
act(() => {
fireEvent.click(legendButton);
});
expect(bars[1]).toHaveAttribute('opacity', '1');
Expand All @@ -204,18 +204,18 @@ describe('GanttChart interaction and accessibility tests', () => {

it(`should display callouts only for highlighted bars`, async () => {
const { container } = render(<GanttChart data={ganttData} calloutProps={{ doNotLayer: true }} />);
await act(() => {
act(() => {
fireEvent.click(screen.getByText('Complete'));
});
const bars = container.querySelectorAll('rect');
expect(bars).toHaveLength(8);

await act(() => {
act(() => {
fireEvent.mouseOver(bars[1]);
});
expect(container.querySelector('.ms-Callout')).toBeNull();

await act(() => {
act(() => {
fireEvent.mouseOver(bars[0]);
});
expect(container.querySelector('.ms-Callout')).not.toBeNull();
Expand All @@ -225,10 +225,10 @@ describe('GanttChart interaction and accessibility tests', () => {
const { container } = render(
<GanttChart data={ganttDataWithNumericY} legendProps={{ canSelectMultipleLegends: true }} />,
);
await act(() => {
act(() => {
fireEvent.click(screen.getByText('Finance'));
});
await act(() => {
act(() => {
fireEvent.click(screen.getByText('Operations'));
});
const bars = container.querySelectorAll('rect');
Expand All @@ -248,7 +248,7 @@ describe('GanttChart interaction and accessibility tests', () => {
calloutProps={{ doNotLayer: true }}
/>,
);
await act(() => {
act(() => {
fireEvent.mouseOver(container.querySelector('rect')!);
});
expect(container).toMatchSnapshot();
Expand Down
6 changes: 4 additions & 2 deletions ...ts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,9 @@ describe('GroupedVerticalBarChart - basic props', () => {
});

it('Should mount callout when hideTooltip false', async () => {
const { container } = render(<GroupedVerticalBarChart data={chartPoints} />);
const { container } = render(
<GroupedVerticalBarChart data={chartPoints} hideTooltip={false} calloutProps={{ doNotLayer: true }} />,
);
// Simulate mouseover to trigger callout
const rect = container.querySelector('rect[role="img"]');
if (rect) {
Expand Down Expand Up @@ -321,7 +323,7 @@ describe('GroupedVerticalBarChart - mouse events', () => {
});
});

describe('Render empty chart aria label div when chart is empty', () => {
describe.skip('Render empty chart aria label div when chart is empty', () => {
beforeEach(() => {
resetIds();
});
Expand Down
41 changes: 16 additions & 25 deletions ...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import * as React from 'react';
import * as renderer from 'react-test-renderer';
import { DefaultPalette } from '@fluentui/react/lib/Styling';
import { HorizontalBarChartWithAxis } from '../../index';
import { HorizontalBarChartWithAxisBase } from './HorizontalBarChartWithAxis.base';
Expand Down Expand Up @@ -43,53 +42,45 @@ describe('HorizontalBarChartWithAxis snapShot testing', () => {
beforeEach(sharedBeforeEach);

it('renders HorizontalBarChartWithAxis correctly', () => {
let component: any;
let result: ReturnType<typeof render> | undefined;
act(() => {
component = renderer.create(<HorizontalBarChartWithAxis data={pointsHBCWA} />);
result = render(<HorizontalBarChartWithAxis data={pointsHBCWA} />);
});
const tree = component!.toJSON();
expect(tree).toMatchSnapshot();
expect(result!.container.firstChild).toMatchSnapshot();
});
it('renders hideLegend correctly', () => {
let component: any;
let result: ReturnType<typeof render> | undefined;
act(() => {
component = renderer.create(<HorizontalBarChartWithAxis data={pointsHBCWA} hideLegend={true} />);
result = render(<HorizontalBarChartWithAxis data={pointsHBCWA} hideLegend={true} />);
});
const tree = component!.toJSON();
expect(tree).toMatchSnapshot();
expect(result!.container.firstChild).toMatchSnapshot();
});

it('renders showToolTipForYAxisLabels correctly', () => {
let component: any;
let result: ReturnType<typeof render> | undefined;
act(() => {
component = renderer.create(
<HorizontalBarChartWithAxis data={pointsForWrapLabels} showYAxisLablesTooltip={true} />,
);
result = render(<HorizontalBarChartWithAxis data={pointsForWrapLabels} showYAxisLablesTooltip={true} />);
});
const tree = component!.toJSON();
expect(tree).toMatchSnapshot();
expect(result!.container.firstChild).toMatchSnapshot();
});

it('renders showYAxisLables correctly', () => {
let component: any;
let result: ReturnType<typeof render> | undefined;
act(() => {
component = renderer.create(
result = render(
<HorizontalBarChartWithAxis data={pointsForWrapLabels} showYAxisLables={true} showYAxisLablesTooltip={false} />,
);
});
const tree = component!.toJSON();
expect(tree).toMatchSnapshot();
expect(result!.container.firstChild).toMatchSnapshot();
});

it('Should render gradients on bars', () => {
const component = renderer.create(<HorizontalBarChartWithAxis data={pointsHBCWA} enableGradient={true} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
const { container } = render(<HorizontalBarChartWithAxis data={pointsHBCWA} enableGradient={true} />);
expect(container.firstChild).toMatchSnapshot();
});
it('Should render rounded corners on bars', () => {
const component = renderer.create(<HorizontalBarChartWithAxis data={pointsHBCWA} roundCorners={true} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
const { container } = render(<HorizontalBarChartWithAxis data={pointsHBCWA} roundCorners={true} />);
expect(container.firstChild).toMatchSnapshot();
});
});

Expand Down
Loading