[infra] Fix test_types_next, test_react_18, test_react_next jobs (#46182)

Author: Janpot

.circleci/config.yml

@@ -8,10 +8,6 @@ parameters:
     description: Whether to force browserstack usage. We have limited resources on browserstack so the pipeline might decide to skip browserstack if this parameter isn't set to true.
     type: boolean
     default: false
-  react-version:
-    description: The version of react to be used
-    type: string
-    default: stable
   workflow:
     description: The name of the workflow to run
     type: string
@@ -26,7 +22,11 @@ default-job: &default-job
     react-version:
       description: The version of react to be used
       type: string
-      default: << pipeline.parameters.react-version >>
+      default: stable
+    typescript-version:
+      description: The version of typescript to be used
+      type: string
+      default: stable
     test-gate:
       description: A particular type of tests that should be run
       type: string
@@ -39,6 +39,7 @@ default-job: &default-job
     # expose it globally otherwise we have to thread it from each job to the install command
     BROWSERSTACK_FORCE: << pipeline.parameters.browserstack-force >>
     REACT_VERSION: << parameters.react-version >>
+    TYPESCRIPT_VERSION: << parameters.typescript-version >>
     TEST_GATE: << parameters.test-gate >>
     AWS_REGION_ARTIFACTS: eu-central-1
     COREPACK_ENABLE_DOWNLOAD_PROMPT: '0'
@@ -84,12 +85,13 @@ commands:
           steps:
             - run:
                 name: Install pnpm package manager
-                # See https://stackoverflow.com/a/73411601
-                command: corepack enable --install-directory ~/bin
+                command: sudo corepack enable
       - run:
           name: View install environment
           command: |
+            which node
             node --version
+            which pnpm
             pnpm --version
   install_js:
     parameters:
@@ -100,15 +102,13 @@ commands:
     steps:
       - setup_corepack:
           browsers: << parameters.browsers >>
-      - run:
-          name: Resolve React version
-          command: |
-            pnpm use-react-version
-            # log a patch for maintainers who want to check out this change
-            git --no-pager diff HEAD
       - run:
           name: Install js dependencies
           command: pnpm install
+      - run:
+          name: Set version overrides
+          command: |
+            pnpm code-infra set-version-overrides --pkg "react@$REACT_VERSION" --pkg "typescript@$TYPESCRIPT_VERSION"
 
 jobs:
   test_unit:
@@ -264,44 +264,19 @@ jobs:
     steps:
       - checkout
       - install_js
-      - run:
-          name: Resolve typescript version
-          command: |
-            pnpm update -r typescript@next
-            # log a patch for maintainers who want to check out this change
-            git --no-pager diff HEAD
       - run:
           name: Tests TypeScript definitions
-          command: |
-            # ignore build failures
-            # it's expected that typescript@next fails since the lines of the errors
-            # change frequently. This build is monitored regardless of its status
-            set +e
-            pnpm typescript:ci
-            exit 0
-      - restore_cache:
-          name: Restore generated declaration files
-          keys:
-            # We assume that the target branch is `next` and that declaration files are persisted in commit order.
-            # "If there are multiple matches, the most recently generated cache will be used."
-            - typescript-declaration-files-next
+          command: pnpm typescript:ci
+          environment:
+            NODE_OPTIONS: --max-old-space-size=3072
       - run:
-          name: Diff declaration files
+          name: Build declaration files
           command: |
-            git add -f packages/mui-material/build || echo '/core declarations do not exist'
-            git add -f packages/mui-lab/build || echo '/lab declarations do not exist'
-            git add -f packages/mui-utils/build || echo '/utils declarations do not exist'
-            pnpm -r build:types
-            git --no-pager diff
+            pnpm -r build:stable && pnpm -r build:types
       - run:
           name: Log defect declaration files
           command: |
-            # ignore build failures
-            # Fixing these takes some effort that isn't viable to merge in a single PR.
-            # We'll simply monitor them for now.
-            set +e
             node scripts/testBuiltTypes.mjs
-            exit 0
   test_browser:
     <<: *default-job
     resource_class: 'medium+'
@@ -869,6 +844,14 @@ workflows:
           name: test_e2e-react@next
 
   typescript-next:
+    when:
+      equal: [typescript-next, << pipeline.parameters.workflow >>]
+    jobs:
+      - test_types_next:
+          <<: *default-context
+          typescript-version: next
+
+  typescript-next-cron:
     triggers:
       - schedule:
           cron: '0 0 * * *'
@@ -881,3 +864,4 @@ workflows:
     jobs:
       - test_types_next:
           <<: *default-context
+          typescript-version: next

apps/pigment-css-vite-app/package.json

@@ -15,8 +15,8 @@
     "@mui/material-pigment-css": "workspace:^",
     "@mui/system": "workspace:^",
     "@mui/utils": "workspace:^",
-    "clsx": "^2.1.1",
     "@playwright/test": "^1.54.1",
+    "clsx": "^2.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",

docs/package.json

@@ -36,10 +36,10 @@
     "@mui/material": "workspace:^",
     "@mui/styled-engine": "workspace:^",
     "@mui/styled-engine-sc": "workspace:^",
+    "@mui/stylis-plugin-rtl": "workspace:^",
     "@mui/system": "workspace:^",
     "@mui/types": "workspace:^",
     "@mui/utils": "workspace:^",
-    "@mui/stylis-plugin-rtl": "workspace:^",
     "@mui/x-charts": "8.9.0",
     "@mui/x-data-grid": "8.9.1",
     "@mui/x-data-grid-generator": "8.9.1",
@@ -114,6 +114,7 @@
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-scripts": "workspace:^",
     "@mui/internal-test-utils": "workspace:^",
+    "@playwright/test": "^1.54.1",
     "@types/autosuggest-highlight": "^3.2.3",
     "@types/chai": "^4.3.20",
     "@types/chance": "^1.1.7",
@@ -134,7 +135,6 @@
     "cross-fetch": "^4.1.0",
     "gm": "^1.25.1",
     "marked": "^15.0.12",
-    "@playwright/test": "^1.54.1",
     "prettier": "^3.6.2",
     "tailwindcss": "^4.1.11",
     "yargs": "^17.7.2"

docs/pages/material-ui/api/snackbar.json

@@ -36,7 +36,7 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ clickAwayListener?: func<br>&#124;&nbsp;{ children: element, disableReactTree?: bool, mouseEvent?: 'onClick'<br>&#124;&nbsp;'onMouseDown'<br>&#124;&nbsp;'onMouseUp'<br>&#124;&nbsp;'onPointerDown'<br>&#124;&nbsp;'onPointerUp'<br>&#124;&nbsp;false, onClickAway?: func, touchEvent?: 'onTouchEnd'<br>&#124;&nbsp;'onTouchStart'<br>&#124;&nbsp;false }, content?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+        "description": "{ clickAwayListener?: func<br>&#124;&nbsp;object, content?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },

package.json

@@ -83,7 +83,7 @@
     "test:unit": "nx run nx_test_unit",
     "test:argos": "code-infra argos-push --folder test/regressions/screenshots/chrome",
     "typescript": "lerna run --no-bail typescript",
-    "typescript:ci": "lerna run --concurrency 3 --no-bail typescript",
+    "typescript:ci": "lerna run --concurrency 1 --no-bail typescript",
     "use-react-version": "node ./scripts/useReactVersion.mjs",
     "validate-declarations": "tsx scripts/validateTypescriptDeclarations.mts",
     "generate-codeowners": "node scripts/generateCodeowners.mjs",
@@ -123,7 +123,7 @@
     "@mui/internal-babel-plugin-minify-errors": "^2.0.8-canary.3",
     "@mui/internal-babel-plugin-resolve-imports": "^2.0.7-canary.11",
     "@mui/internal-bundle-size-checker": "^1.0.9-canary.10",
-    "@mui/internal-code-infra": "0.0.2-canary.23",
+    "@mui/internal-code-infra": "0.0.2-canary.24",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-scripts": "workspace:^",
     "@mui/internal-test-utils": "workspace:^",
@@ -187,6 +187,7 @@
     "prettier": "^3.6.2",
     "pretty-quick": "^4.2.2",
     "process": "^0.11.10",
+    "react": "^19.1.0",
     "rimraf": "^6.0.1",
     "serve": "^14.2.4",
     "stylelint": "^16.22.0",

packages-internal/test-utils/package.json

@@ -54,21 +54,21 @@
     "sinon": "^21.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.54.1",
     "@types/chai": "^4.3.20",
     "@types/chai-dom": "^1.11.3",
     "@types/format-util": "^1.0.4",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/sinon": "^17.0.4",
-    "@playwright/test": "^1.54.1",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
+    "@playwright/test": "^1.53.1",
     "chai": "^4.5.0 || ^5.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "@playwright/test": "^1.53.1"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/mui-material-pigment-css/package.json

@@ -41,6 +41,9 @@
     "@babel/runtime": "^7.28.2",
     "@mui/system": "workspace:*"
   },
+  "devDependencies": {
+    "react": "^19.1.0"
+  },
   "peerDependencies": {
     "@pigment-css/react": "^0.0.30"
   },

packages/mui-material/src/Snackbar/Snackbar.js

@@ -358,24 +358,8 @@ Snackbar.propTypes /* remove-proptypes */ = {
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: PropTypes.shape({
-    clickAwayListener: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({
-        children: PropTypes.element.isRequired,
-        disableReactTree: PropTypes.bool,
-        mouseEvent: PropTypes.oneOf([
-          'onClick',
-          'onMouseDown',
-          'onMouseUp',
-          'onPointerDown',
-          'onPointerUp',
-          false,
-        ]),
-        onClickAway: PropTypes.func,
-        touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false]),
-      }),
-    ]),
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
+    clickAwayListener: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

packages/mui-material/src/TablePaginationActions/TablePaginationActions.test.js

@@ -22,6 +22,12 @@ describe('<TablePaginationActions />', () => {
         }
         return 'previous';
       }}
+      count={100}
+      onPageChange={() => {}}
+      page={1}
+      rowsPerPage={10}
+      showFirstButton
+      showLastButton
     />,
     () => ({
       inheritComponent: 'div',

packages/mui-material/src/styles/ThemeProviderWithVars.test.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen, fireEvent, reactMajor } from '@mui/internal-test-utils';
+import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import Box from '@mui/material/Box';
 import {
   CssVarsProvider,
@@ -470,11 +470,11 @@ describe('[Material UI] ThemeProviderWithVars', () => {
     }
     const { container } = render(<App />);
 
-    expect(container).to.have.text(`${reactMajor >= 19 ? 2 : 1} light`);
+    expect(container).to.have.text(`2 light`);
 
     fireEvent.click(screen.getByRole('button'));
 
-    expect(container).to.have.text(`${reactMajor >= 19 ? 2 : 1} light`);
+    expect(container).to.have.text(`2 light`);
   });
 
   it('palette mode should change if not using CSS variables', () => {
@@ -505,14 +505,12 @@ describe('[Material UI] ThemeProviderWithVars', () => {
     }
     const { container } = render(<App />);
 
-    expect(container).to.have.text(
-      `${reactMajor >= 19 ? 2 : 1} light ${createTheme().palette.primary.main}`,
-    );
+    expect(container).to.have.text(`2 light ${createTheme().palette.primary.main}`);
 
     fireEvent.click(screen.getByRole('button'));
 
     expect(container).to.have.text(
-      `${reactMajor >= 19 ? 3 : 2} dark ${createTheme({ palette: { mode: 'dark' } }).palette.primary.main}`,
+      `3 dark ${createTheme({ palette: { mode: 'dark' } }).palette.primary.main}`,
     );
   });
 
@@ -544,10 +542,10 @@ describe('[Material UI] ThemeProviderWithVars', () => {
     }
     const { container } = render(<App />);
 
-    expect(container).to.have.text(`${reactMajor >= 19 ? 2 : 1} light`);
+    expect(container).to.have.text(`2 light`);
 
     fireEvent.click(screen.getByRole('button'));
 
-    expect(container).to.have.text(`${reactMajor >= 19 ? 3 : 2} dark`);
+    expect(container).to.have.text(`3 dark`);
   });
 });