test(react-list): fix failing rit test

Author: mainframev

packages/react-components/react-list/library/src/components/List/List.test.tsx

@@ -6,6 +6,15 @@ import { ListProps } from './List.types';
 import { ListItem } from '../ListItem/ListItem';
 import { ListItemActionEventData } from '../ListItem/ListItem.types';
 import { EventHandler } from '@fluentui/react-utilities';
+import { resetIdsForTests } from '@fluentui/react-utilities';
+
+// Mock useId from @fluentui/react-utilities to return CSS-safe IDs without special characters.
+// React's useId generates IDs with commas that create invalid CSS selectors in JSDOM 25+,
+// causing console.error logs that React 19's act() collects as AggregateError.
+jest.mock('@fluentui/react-utilities', () => ({
+  ...jest.requireActual('@fluentui/react-utilities'),
+  ...jest.requireActual('../../testing/createUseIdMock').createUseIdMock(),
+}));
 
 function expectListboxItemSelected(item: HTMLElement, selected: boolean) {
   expect(item.getAttribute('aria-selected')).toBe(selected.toString());
@@ -58,8 +67,13 @@ describe('List', () => {
   // and false warnings about the mismatched roles because of tabster not working reliably in tests.
   const consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => jest.fn());
 
+  afterEach(() => {
+    resetIdsForTests();
+  });
+
   afterAll(() => {
     consoleWarn.mockRestore();
+    jest.clearAllMocks();
   });
 
   describe('rendering', () => {

packages/react-components/react-list/library/src/testing/createUseIdMock.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+
+export function createUseIdMock(): { useId: (prefix: string) => string; resetIdsForTests: () => void } {
+  let idCounter = 0;
+
+  return {
+    useId: jest.fn().mockImplementation((prefix: string) => {
+      return React.useMemo(() => {
+        idCounter += 1;
+        return `${prefix}${idCounter}`;
+      }, [prefix]);
+    }),
+    resetIdsForTests: () => {
+      idCounter = 0;
+    },
+  };
+}