[core] Allow lockflile changes when building with React next (mui#203)

runelk · Mar 25, 2024 · 90ea911 · 90ea911
1 parent 542f282
commit 90ea911
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 24 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -67,11 +67,16 @@ commands:
         type: boolean
         default: false
         description: 'Set to true if you intend to any browser (for example with playwright).'
+      react-version:
+        description: The version of react to be used
+        type: string
+        default: stable
 
     steps:
       - run:
           name: Resolve React version
           command: |
+            echo 'Using React version: << parameters.react-version >>'
             node scripts/useReactVersion.mjs
             # log a patch for maintainers who want to check out this change
             git --no-pager diff HEAD
@@ -98,9 +103,23 @@ commands:
           command: |
             node --version
             pnpm --version
-      - run:
-          name: Install js dependencies
-          command: pnpm install
+      - when:
+          condition:
+            equal: [<< parameters.react-version >>, stable]
+          steps:
+            - run:
+                name: Install JS dependencies
+                command: pnpm install
+      - unless:
+          condition:
+            equal: [<< parameters.react-version >>, stable]
+          steps:
+            - run:
+                name: Install JS dependencies (without frozen lockfile)
+                command: pnpm install --no-frozen-lockfile
+            - run:
+                name: Restore clean working copy
+                command: git restore .
       - when:
           condition: << parameters.browsers >>
           steps:
@@ -120,7 +139,8 @@ jobs:
     <<: *default-job
     steps:
       - checkout
-      - install_js
+      - install_js:
+          react-version: << parameters.react-version >>
       - when:
           # Install can be "dirty" when running with non-default versions of React
           condition:
@@ -142,7 +162,8 @@ jobs:
     <<: *default-job
     steps:
       - checkout
-      - install_js
+      - install_js:
+          react-version: << parameters.react-version >>
       - run:
           name: Tests fake browser
           command: pnpm test:coverage:ci
@@ -163,7 +184,8 @@ jobs:
     <<: *default-job
     steps:
       - checkout
-      - install_js
+      - install_js:
+          react-version: << parameters.react-version >>
       - run:
           name: Eslint
           command: pnpm eslint:ci
@@ -180,7 +202,8 @@ jobs:
     <<: *default-job
     steps:
       - checkout
-      - install_js
+      - install_js:
+          react-version: << parameters.react-version >>
       - run:
           name: '`pnpm prettier` changes committed?'
           command: pnpm prettier --check
@@ -217,7 +240,8 @@ jobs:
     resource_class: 'medium+'
     steps:
       - checkout
-      - install_js
+      - install_js:
+          react-version: << parameters.react-version >>
       - run:
           name: Transpile TypeScript demos
           command: pnpm docs:typescript:formatted
@@ -249,7 +273,8 @@ jobs:
             pnpm add typescript@next -d -w
             # log a patch for maintainers who want to check out this change
             git --no-pager diff HEAD
-      - install_js
+      - install_js:
+          react-version: << parameters.react-version >>
       - run:
           name: Tests TypeScript definitions
           command: |
@@ -293,6 +318,7 @@ jobs:
     steps:
       - checkout
       - install_js:
+          react-version: << parameters.react-version >>
           browsers: true
       - run:
           name: Tests real browsers
@@ -323,6 +349,7 @@ jobs:
     steps:
       - checkout
       - install_js:
+          react-version: << parameters.react-version >>
           browsers: true
       - run:
           name: Tests real browsers
@@ -350,6 +377,7 @@ jobs:
     steps:
       - checkout
       - install_js:
+          react-version: << parameters.react-version >>
           browsers: true
       - run:
           name: Run visual regression tests
@@ -366,6 +394,7 @@ jobs:
     steps:
       - checkout
       - install_js:
+          react-version: << parameters.react-version >>
           browsers: true
       - run: pnpm benchmark:browser
       - store_artifacts:

diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
@@ -31,7 +31,12 @@ describe('useAutocomplete', () => {
           {groupedOptions.length > 0 ? (
             <ul {...getListboxProps()}>
               {groupedOptions.map((option, index) => {
-                return <li {...getOptionProps({ option, index })}>{option}</li>;
+                const { key, ...other } = getOptionProps({ option, index });
+                return (
+                  <li key={key} {...other}>
+                    {option}
+                  </li>
+                );
               })}
             </ul>
           ) : null}
@@ -258,7 +263,12 @@ describe('useAutocomplete', () => {
           {groupedOptions.length > 0 ? (
             <ul {...getListboxProps()}>
               {groupedOptions.map((option, index) => {
-                return <li {...getOptionProps({ option, index })}>{option}</li>;
+                const { key, ...other } = getOptionProps({ option, index });
+                return (
+                  <li key={key} {...other}>
+                    {option}
+                  </li>
+                );
               })}
             </ul>
           ) : null}
@@ -267,28 +277,52 @@ describe('useAutocomplete', () => {
     }
 
     const node16ErrorMessage =
-      "Error: Uncaught [TypeError: Cannot read properties of null (reading 'removeAttribute')]";
-    const olderNodeErrorMessage =
-      "Error: Uncaught [TypeError: Cannot read property 'removeAttribute' of null]";
+      "TypeError: Cannot read properties of null (reading 'removeAttribute')";
+    const olderNodeErrorMessage = "TypeError: Cannot read property 'removeAttribute' of null";
 
     const nodeVersion = Number(process.versions.node.split('.')[0]);
     const errorMessage = nodeVersion >= 16 ? node16ErrorMessage : olderNodeErrorMessage;
 
-    const devErrorMessages = [
-      errorMessage,
+    const wrappedErrorMessage = `Error: Uncaught [${errorMessage}]`;
+
+    const react17ErrorMessages = [
+      wrappedErrorMessage,
       'MUI: Unable to find the input element.',
-      errorMessage,
+      wrappedErrorMessage,
+      'The above error occurred in the <ul> component',
+      'The above error occurred in the <Test> component',
+    ];
+
+    const react182ErrorMessages = [
+      wrappedErrorMessage,
+      'MUI: Unable to find the input element.',
+      wrappedErrorMessage,
       // strict effects runs effects twice
-      React.version.startsWith('18') && 'MUI: Unable to find the input element.',
-      React.version.startsWith('18') && errorMessage,
+      'MUI: Unable to find the input element.',
+      wrappedErrorMessage,
       'The above error occurred in the <ul> component',
-      React.version.startsWith('16') && 'The above error occurred in the <ul> component',
       'The above error occurred in the <Test> component',
       // strict effects runs effects twice
-      React.version.startsWith('18') && 'The above error occurred in the <Test> component',
-      React.version.startsWith('16') && 'The above error occurred in the <Test> component',
+      'The above error occurred in the <Test> component',
     ];
 
+    const react183ErrorMessages = [
+      'MUI: Unable to find the input element.',
+      'MUI: Unable to find the input element.',
+      errorMessage,
+      errorMessage,
+      errorMessage,
+    ];
+
+    let devErrorMessages;
+    if (React.version.startsWith('18.3')) {
+      devErrorMessages = react183ErrorMessages;
+    } else if (React.version.startsWith('18')) {
+      devErrorMessages = react182ErrorMessages;
+    } else {
+      devErrorMessages = react17ErrorMessages;
+    }
+
     expect(() => {
       render(
         <ErrorBoundary>
@@ -334,9 +368,8 @@ describe('useAutocomplete', () => {
   });
 
   it('should allow tuples or arrays as value when multiple=false', () => {
+    const defaultValue = ['bar'];
     function Test() {
-      const defaultValue = ['bar'];
-
       const { getClearProps, getInputProps } = useAutocomplete({
         defaultValue,
         disableClearable: false,