chore: migrate repo to React 19

.github/workflows/pr-vrt.yml

@@ -24,6 +24,7 @@ jobs:
     if: ${{ github.repository_owner == 'microsoft' }}
     runs-on: macos-14-xlarge
     name: Generate screenshots
+    timeout-minutes: 60
     steps:
       - uses: actions/checkout@v4
         with:

.github/workflows/pr.yml

@@ -104,17 +104,17 @@ jobs:
       - run: |
           yarn install --frozen-lockfile
           yarn rit --react 17 --install-deps
-          yarn rit --react 19 --install-deps
+          yarn rit --react 18 --install-deps
 
-      - name: Verify Cypress installs from RIT temp workspaces (React 17 -> v13, React 19 -> v14)
+      - name: Verify Cypress installs from RIT temp workspaces (React 17 -> v13, React 18 -> v14)
         run: |
           "$GITHUB_WORKSPACE"/tmp/rit/react-17/node_modules/.bin/cypress verify
-          "$GITHUB_WORKSPACE"/tmp/rit/react-19/node_modules/.bin/cypress verify
+          "$GITHUB_WORKSPACE"/tmp/rit/react-18/node_modules/.bin/cypress verify
 
-      - name: React Versions Integration Tests (17,19) - E2E
+      - name: React Versions Integration Tests (17,18) - E2E
         id: e2e
         run: |
-          yarn nx affected -t test-rit--17--e2e,test-rit--19--e2e --exclude='react-19-tests-v9,react-charting,react'
+          yarn nx affected -t test-rit--17--e2e,test-rit--18--e2e --exclude='react-19-tests-v9,react-charting,react'
 
       - name: Upload Cypress screenshots if exist
         uses: actions/upload-artifact@v4
@@ -125,40 +125,9 @@ jobs:
             tmp/rit/**/cypress/screenshots/**/*.png
           retention-days: 1
 
-      - name: React Versions Integration Tests (17,19) - Type-check & Test
+      - name: React Versions Integration Tests (17,18) - Type-check & Test
         run: |
-          FLUENT_JEST_WORKER=2 yarn nx affected -t test-rit--17--type-check,test-rit--19--type-check,test-rit--17--test,test-rit--19--test --exclude='react-19-tests-v9'
-
-  react_19_v9_source_code_typecheck:
-    if: ${{ github.repository_owner == 'microsoft' }}
-    runs-on: ubuntu-latest
-    permissions:
-      contents: 'read'
-      actions: 'read'
-    name: v9 source code type-check against React 19
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@826660b82addbef3abff5fa871492ebad618c9e1 # v4.3.3
-        with:
-          main-branch-name: 'master'
-
-      - uses: actions/setup-node@v4
-        with:
-          cache: 'yarn'
-          node-version: '22'
-
-      - run: echo number of CPUs "$(getconf _NPROCESSORS_ONLN)"
-
-      - run: |
-          yarn install --frozen-lockfile
-          yarn rit --react 19 --install-deps
-
-      - run: |
-          yarn nx affected -t test-rit--19--type-check --exclude='*,!react-19-tests-v9'
+          FLUENT_JEST_WORKER=2 yarn nx affected -t test-rit--17--type-check,test-rit--18--type-check,test-rit--17--test,test-rit--18--test --exclude='react-19-tests-v9'
 
   e2e:
     if: ${{ github.repository_owner == 'microsoft' }}

apps/chart-docsite/package.json

@@ -29,8 +29,8 @@
     "@fluentui/react-charts": "*",
     "@fluentui/react-storybook-addon": "*",
     "@fluentui/react-storybook-addon-export-to-sandbox": "*",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "tslib": "^2.1.0"
   }
 }

apps/perf-test-react-components/package.json

@@ -29,8 +29,8 @@
     "@fluentui/react-theme": "*",
     "@griffel/core": "^1.16.0",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "tslib": "^2.1.0"
   }
 }

apps/perf-test/package.json

@@ -22,8 +22,8 @@
     "@fluentui/example-data": "*",
     "@fluentui/react": "*",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "tslib": "^2.1.0"
   }
 }

apps/public-docsite-resources/package.json

@@ -46,8 +46,8 @@
     "@fluentui/theme-samples": "*",
     "@fluentui/react-monaco-editor": "*",
     "office-ui-fabric-core": "^11.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "tslib": "^2.1.0"
   }
 }

apps/public-docsite-v9/package.json

@@ -40,8 +40,8 @@
     "@fluentui/react-timepicker-compat": "*",
     "@griffel/react": "^1.5.22",
     "@microsoft/applicationinsights-web": "^3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-window": "^1.8.6",
     "tslib": "^2.1.0",
     "react-hook-form": "^5.7.2",

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.test.tsx

@@ -1,9 +1,22 @@
-/* eslint-disable react/jsx-key */
+/* eslint-disable @typescript-eslint/naming-convention */
+
 import * as React from 'react';
-import { Source } from '@storybook/addon-docs';
-import { createRenderer } from 'react-test-renderer/shallow';
+import { render } from '@testing-library/react';
+
 import { CodeExample } from './utils.stories';
 
+// Mock the Source component to verify it receives correct props
+const mockSource = jest.fn(({ code, language }: { code: string; language: string }) => (
+  <pre data-testid="source" data-language={language}>
+    <code>{code}</code>
+  </pre>
+));
+
+// `Source` wont be available in the test environment, so we need to mock it to test the code output
+jest.mock('@storybook/addon-docs', () => ({
+  Source: (props: { code: string; language: string }) => mockSource(props),
+}));
+
 function mockMDXSourceCodeBlock(source: string) {
   return {
     props: {
@@ -16,23 +29,22 @@ function mockMDXSourceCodeBlock(source: string) {
   } as React.ReactElement;
 }
 
+beforeEach(() => {
+  mockSource.mockClear();
+});
+
 test('renders children', () => {
-  const renderer = createRenderer();
-  renderer.render(
+  const { container } = render(
     <CodeExample>
       <span>Child</span>
     </CodeExample>,
   );
-  const result = renderer.getRenderOutput();
 
-  expect(result.props).toEqual({
-    children: 'Child',
-  });
+  expect(container.textContent).toBe('Child');
 });
 
 test('renders Markdown source blocks', () => {
-  const renderer = createRenderer();
-  renderer.render(
+  const { getByRole, getByTestId } = render(
     <CodeExample>
       {mockMDXSourceCodeBlock(`\`\`\`js
         function test() {
@@ -41,53 +53,60 @@ test('renders Markdown source blocks', () => {
       \`\`\``)}
     </CodeExample>,
   );
-  const result = renderer.getRenderOutput();
 
-  expect(result.props).toEqual({
-    children: [
-      <h3>JavaScript</h3>,
-      <Source
-        code={`function test() {
+  // Test that CodeExample correctly parses and renders the header
+  const heading = getByRole('heading', { level: 3 });
+  expect(heading.textContent).toBe('JavaScript');
+
+  // Verify Source component was called with correct props
+  expect(mockSource).toHaveBeenCalledWith(
+    expect.objectContaining({
+      code: `function test() {
           console.log("test");
-        }`}
-        language="jsextra"
-      />,
-    ],
-  });
+        }`,
+      language: 'jsextra',
+    }),
+  );
+
+  // Verify Source component rendered correctly
+  const sourceElement = getByTestId('source');
+  expect(sourceElement.getAttribute('data-language')).toBe('jsextra');
+  expect(sourceElement.textContent).toContain('function test()');
 });
 
 test('uses JSX for no header JSX source code blocks', () => {
-  const renderer = createRenderer();
-  renderer.render(
+  const { getByRole, getByTestId } = render(
     <CodeExample>
       {mockMDXSourceCodeBlock(`<div>
         <Test title={"Example"} />
       </div>`)}
     </CodeExample>,
   );
-  const result = renderer.getRenderOutput();
 
-  expect(result.props).toEqual({
-    children: [
-      <h3>React</h3>,
-      <Source
-        code={`<div>
+  const heading = getByRole('heading', { level: 3 });
+  expect(heading.textContent).toBe('React');
+
+  // Verify Source component was called with JSX language
+  expect(mockSource).toHaveBeenCalledWith(
+    expect.objectContaining({
+      code: `<div>
         <Test title={"Example"} />
-      </div>`}
-        language="jsx"
-      />,
-    ],
-  });
+      </div>`,
+      language: 'jsx',
+    }),
+  );
+
+  const sourceElement = getByTestId('source');
+  expect(sourceElement.getAttribute('data-language')).toBe('jsx');
 });
 
 test.each([
   ['html', 'HTML'],
   ['css', 'CSS'],
   ['js', 'JavaScript'],
   ['jsx', 'React'],
-] as const)('for language %s uses the header %s', (language, expectedHeader) => {
-  const renderer = createRenderer();
-  renderer.render(
+])('for language %s uses the header %s', (language, expectedHeader) => {
+  const { getByRole, getByTestId } = render(
     <CodeExample>
       {mockMDXSourceCodeBlock(`
                 \`\`\`${language}
@@ -96,16 +115,27 @@ test.each([
                 `)}
     </CodeExample>,
   );
-  const result = renderer.getRenderOutput();
 
-  expect(result.props).toEqual({
-    children: [<h3>{expectedHeader}</h3>, <Source code={`Code`} language={language === 'js' ? 'jsextra' : language} />],
-  });
+  const resolvedLanguage = language === 'js' ? 'jsextra' : language;
+
+  const heading = getByRole('heading', { level: 3 });
+  expect(heading.textContent).toBe(expectedHeader);
+
+  // Verify Source component was called with correct language
+  expect(mockSource).toHaveBeenCalledWith(
+    expect.objectContaining({
+      code: 'Code',
+      language: resolvedLanguage,
+    }),
+  );
+
+  const sourceElement = getByTestId('source');
+  expect(sourceElement.getAttribute('data-language')).toBe(resolvedLanguage);
+  expect(sourceElement.textContent).toBe('Code');
 });
 
 test('overrides the default title', () => {
-  const renderer = createRenderer();
-  renderer.render(
+  const { getByRole, getByTestId } = render(
     <CodeExample title="Custom title">
       {mockMDXSourceCodeBlock(`
                 \`\`\`js
@@ -114,9 +144,18 @@ test('overrides the default title', () => {
                 `)}
     </CodeExample>,
   );
-  const result = renderer.getRenderOutput();
 
-  expect(result.props).toEqual({
-    children: [<h3>Custom title</h3>, <Source code={`Code`} language="jsextra" />],
-  });
+  const heading = getByRole('heading', { level: 3 });
+  expect(heading.textContent).toBe('Custom title');
+
+  // Verify Source component still receives correct code and language
+  expect(mockSource).toHaveBeenCalledWith(
+    expect.objectContaining({
+      code: 'Code',
+      language: 'jsextra',
+    }),
+  );
+
+  const sourceElement = getByTestId('source');
+  expect(sourceElement.getAttribute('data-language')).toBe('jsextra');
 });

apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Flex/utils.stories.tsx

@@ -30,7 +30,7 @@ const codeLanguages = {
   js: 'JavaScript',
   jsx: 'React',
 };
-export const CodeExample = (props: { title?: string; children: React.ReactElement }) => {
+export const CodeExample = (props: { title?: string; children?: React.ReactElement<any> }) => {
   const { title, children } = props;
   // Access the raw values from the markdown source code block
   const markdownCodeBlockValue: string | undefined = children?.props?.children?.props?.children;

apps/public-docsite/package.json

@@ -48,8 +48,8 @@
     "@fluentui/utilities": "*",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-core": "^11.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "tslib": "^2.1.0",
     "whatwg-fetch": "2.0.4"
   }

apps/public-docsite/src/components/IconGrid/IconGrid.tsx

@@ -31,7 +31,7 @@ export type IIconGridProps = IFontIconGridProps | ISvgIconGridProps;
 
 interface IFontIconDefinition {
   name: string;
-  ref: React.RefObject<HTMLElement>;
+  ref: React.RefObject<HTMLElement | null>;
   iconType: 'core-font' | 'react-font';
 }
 

apps/public-docsite/src/components/Nav/Nav.tsx

@@ -100,7 +100,7 @@ export class Nav extends React.Component<INavProps, INavState> {
     );
   }
 
-  private _renderLinkList = (pages: INavPage[], isSubMenu: boolean): React.ReactElement => {
+  private _renderLinkList = (pages: INavPage[], isSubMenu: boolean): React.ReactElement<any> => {
     const { searchablePageTitle } = this.props;
     const { sortState } = this.state;
 

apps/public-docsite/webpack.serve.config.js

@@ -61,7 +61,8 @@ module.exports = [
 
         resolve: {
           alias: {
-            ...getResolveAlias(), // react-monaco-editor dynamically loads @types/react via proprietary webpack require.ensure,
+            ...getResolveAlias(),
+            // react-monaco-editor dynamically loads @types/react via proprietary webpack require.ensure,
             // this doesn't work starting @types/react@17.0.48 as the types package introduced Export Maps
             '@types/react/index.d.ts': path.resolve(__dirname, '../../node_modules/@types/react/index.d.ts'),
           },