[styles][withStyles] Expect React defaultProps warning in test (#42752)…

… (#42851)
mui · Jul 5, 2024 · 93ae465 · 93ae465
1 parent 3c77036
commit 93ae465
Showing 1 changed file with 34 additions and 16 deletions.
diff --git a/packages/mui-styles/src/withStyles/withStyles.test.js b/packages/mui-styles/src/withStyles/withStyles.test.js
@@ -135,7 +135,16 @@ describe('withStyles', () => {
       const jssCallbackStub = stub().returns({});
       const styles = { root: jssCallbackStub };
       const StyledComponent = withStyles(styles)(MyComp);
-      render(<StyledComponent mySuppliedProp={222} />);
+      const renderCb = () => render(<StyledComponent mySuppliedProp={222} />);
+
+      // React 18.3.0 started warning for deprecated defaultProps for function components
+      if (React.version.startsWith('18.3')) {
+        expect(renderCb).toErrorDev([
+          'Warning: MyComp: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
+        ]);
+      } else {
+        renderCb();
+      }
 
       expect(jssCallbackStub.callCount).to.equal(1);
       expect(jssCallbackStub.args[0][0]).to.deep.equal({
@@ -178,24 +187,33 @@ describe('withStyles', () => {
 
       const styles = { root: { display: 'flex' } };
       const StyledComponent = withStyles(styles, { name: 'MuiFoo' })(MuiFoo);
-
-      const { container } = render(
-        <ThemeProvider
-          theme={createTheme({
-            components: {
-              MuiFoo: {
-                defaultProps: {
-                  foo: 'bar',
+      const renderCb = () =>
+        render(
+          <ThemeProvider
+            theme={createTheme({
+              components: {
+                MuiFoo: {
+                  defaultProps: {
+                    foo: 'bar',
+                  },
                 },
               },
-            },
-          })}
-        >
-          <StyledComponent foo={undefined} />
-        </ThemeProvider>,
-      );
+            })}
+          >
+            <StyledComponent foo={undefined} />
+          </ThemeProvider>,
+        );
 
-      expect(container).to.have.text('bar');
+      // React 18.3.0 started warning for deprecated defaultProps for function components
+      if (React.version.startsWith('18.3')) {
+        expect(renderCb).toErrorDev([
+          'Warning: MuiFoo: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
+        ]);
+      } else {
+        renderCb();
+      }
+
+      expect(screen.getByText('bar')).not.to.equal(null);
     });
 
     it('should work when depending on a theme', () => {