ci: add new job to run test-rit targets and fix exposed issues in libraries (microsoft#35178)

Author: Hotell

.github/workflows/pr.yml

@@ -81,6 +81,54 @@ jobs:
           git status --porcelain
           git diff-index --quiet HEAD -- || exit 1
 
+  react_integration_tests_collocated:
+    if: ${{ github.repository_owner == 'microsoft' }}
+    runs-on: macos-14-xlarge
+    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: '20'
+
+      - run: echo number of CPUs "$(getconf _NPROCESSORS_ONLN)"
+
+      - run: |
+          yarn install --frozen-lockfile
+          yarn rit --react 17 --install-deps
+          yarn rit --react 19 --install-deps
+
+      - name: Verify Cypress installs from RIT temp workspaces (React 17 -> v13, React 19 -> v14)
+        run: |
+          "$GITHUB_WORKSPACE"/tmp/rit/react-17/node_modules/.bin/cypress verify
+          "$GITHUB_WORKSPACE"/tmp/rit/react-19/node_modules/.bin/cypress verify
+
+      - name: React Versions Integration Tests (17,19) - E2E
+        id: e2e
+        run: |
+          yarn nx affected -t test-rit--17--e2e,test-rit--19--e2e
+
+      - name: Upload Cypress screenshots if exist
+        uses: actions/upload-artifact@v4
+        if: always() && steps.e2e.outcome == 'failure'
+        with:
+          name: cypress-screenshots-react-test-rit
+          path: |
+            tmp/rit/**/cypress/screenshots/**/*.png
+          retention-days: 1
+
+      - name: React Versions Integration Tests (17,19) - Test,Type-check
+        run: |
+          FLUENT_JEST_WORKER=2 yarn nx affected -t test-rit--17--test,test-rit--17--type-check,test-rit--19--test,test-rit--19--type-check
+
   react_integration_tests:
     if: ${{ github.repository_owner == 'microsoft' }}
     runs-on: ubuntu-latest

nx.json

@@ -98,6 +98,9 @@
       "dependsOn": ["build"],
       "cache": true
     },
+    "test-rit--*--prepare": {
+      "dependsOn": ["^build"]
+    },
     "@nx/jest:jest": {
       "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
       "cache": true,
@@ -151,7 +154,8 @@
             "react-theme-sass",
             "babel-preset-global-context",
             "eslint-plugin-react-components",
-            "react-migration-v0-v9"
+            "react-migration-v0-v9",
+            "react-migration-v0-v9-stories"
           ]
         }
       },

packages/charts/react-charts/stories/src/DeclarativeChart/DeclarativeChartDefault.stories.tsx

@@ -173,7 +173,7 @@ const cachedFetch = (url: string) => {
 
 export const DeclarativeChartBasicExample = (): JSXElement => {
   const declarativeChartRef = React.useRef<IDeclarativeChart>(null);
-  const lastKnownValidLegends = React.useRef<string[]>(undefined);
+  const lastKnownValidLegends = React.useRef<string[] | undefined>(undefined);
   const { targetDocument: doc } = useFluent();
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const loadedSchemas = React.useRef<{ key: string; schema: any }[]>([]);

packages/react-components/react-motion/library/src/factories/createPresenceComponent.cy.tsx

@@ -4,10 +4,39 @@ import { createPresenceComponent } from './createPresenceComponent';
 import { MotionBehaviourProvider } from '../contexts/MotionBehaviourContext';
 
 describe('createPresenceComponent', () => {
+  const noop = () => {
+    return;
+  };
+  // Ensure reduced-motion is disabled for deterministic animation behavior
+  beforeEach(() => {
+    cy.window().then(win => {
+      const orig = win.matchMedia;
+      // Redefine matchMedia so that prefers-reduced-motion never matches
+      Object.defineProperty(win, 'matchMedia', {
+        configurable: true,
+        value: (query: string) => {
+          if (query.includes('prefers-reduced-motion')) {
+            return {
+              matches: false,
+              media: query,
+              onchange: null,
+              addListener: noop, // deprecated API still sometimes read
+              removeListener: noop,
+              addEventListener: noop,
+              removeEventListener: noop,
+              dispatchEvent: () => false,
+            };
+          }
+          return orig.call(win, query);
+        },
+      });
+    });
+  });
+
   it('should call onMotionCancel', () => {
     const TestMotion = createPresenceComponent({
-      enter: { keyframes: [{ opacity: 0 }, { opacity: 1 }], duration: 1000 },
-      exit: { keyframes: [{ opacity: 1 }, { opacity: 0 }], duration: 1000 },
+      enter: { keyframes: [{ opacity: 0 }, { opacity: 1 }], duration: 4000 },
+      exit: { keyframes: [{ opacity: 1 }, { opacity: 0 }], duration: 4000 },
     });
 
     const TestComponent = () => {
@@ -35,7 +64,23 @@ describe('createPresenceComponent', () => {
 
     mount(<TestComponent />);
 
-    cy.get('#toggle').click().wait(100).click().get('#cancel').should('have.text', '1');
+    // First toggle: start exit motion
+    cy.get('#toggle').click();
+
+    // Give React effect a couple of frames to start the animation rather than an arbitrary ms wait
+    cy.window().then(
+      win =>
+        new Cypress.Promise<void>(resolve => {
+          requestAnimationFrame(() => {
+            win.requestAnimationFrame(() => resolve());
+          });
+        }),
+    );
+
+    // Second toggle: should cancel the in-flight exit animation and trigger onMotionCancel
+    cy.get('#toggle').click();
+
+    cy.get('#cancel').should('have.text', '1');
   });
 
   it('should disable motion with motion disable provider', () => {

scripts/cypress/src/base.config.ts

@@ -97,9 +97,10 @@ export const baseConfig = defineConfig({
     },
     supportFile: path.join(projectSupportDir, './component.js'),
     indexHtmlFile: path.join(projectSupportDir, './component-index.html'),
+    defaultCommandTimeout: 8000,
   },
   retries: {
-    runMode: 2,
+    runMode: 4,
     openMode: 0,
   },
   // Screenshots go under <pkg>/cypress/screenshots and can be useful to look at after failures in