[TextareaAutosize] Test for error when used with React 18 & Suspense (m…

…ui#34456)

packages/mui-base/src/TextareaAutosize/TextareaAutosize.js

@@ -160,8 +160,6 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
       // ResizeObserver's handler that runs because of the change in the layout is trying to
       // access a dom node that is no longer there (as the fallback component is being shown instead).
       // See https://github.com/mui/material-ui/issues/32640
-      // TODO: Add tests that will ensure the component is not failing when
-      // replaced by Suspense with a fallback, once React is updated to version 18
       if (inputRef.current) {
         syncHeightWithFlushSycn();
       }

test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx

@@ -0,0 +1,30 @@
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+import Button from '@mui/material/Button';
+import * as React from 'react';
+
+function LazyRoute() {
+  const [isDone, setIsDone] = React.useState(false);
+
+  if (!isDone) {
+    // Force React to show fallback suspense
+    throw new Promise((resolve) => {
+      window.setTimeout(resolve, 1);
+      setIsDone(true);
+    });
+  }
+
+  return <div />;
+}
+
+export default function TextareaAutosizeSuspense() {
+  const [showRoute, setShowRoute] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <Button onClick={() => setShowRoute((r) => !r)}>Toggle view</Button>
+      <React.Suspense fallback={null}>
+        {showRoute ? <LazyRoute /> : <TextareaAutosize />}
+      </React.Suspense>
+    </React.Fragment>
+  );
+}

test/e2e/index.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import * as DomTestingLibrary from '@testing-library/dom';
 import TestViewer from './TestViewer';
@@ -107,7 +108,8 @@ if (typeof ReactDOM.unstable_createRoot === 'function') {
   const root = ReactDOM.unstable_createRoot(container);
   root.render(children);
 } else {
-  ReactDOM.render(children, container);
+  const root = createRoot(container);
+  root.render(children);
 }
 
 window.DomTestingLibrary = DomTestingLibrary;

test/e2e/index.test.ts

@@ -192,4 +192,20 @@ describe('e2e', () => {
       );
     });
   });
+
+  describe('<TextareaAutosize />', () => {
+    // https://github.com/mui/material-ui/issues/32640
+    it('should handle suspense without error', async () => {
+      const pageErrors: string[] = [];
+      page.on('pageerror', (err) => pageErrors.push(err.name));
+
+      await renderFixture('TextareaAutosize/TextareaAutosizeSuspense');
+      expect(await page.isVisible('textarea')).to.equal(true);
+      await page.click('button');
+      expect(await page.isVisible('textarea')).to.equal(false);
+      await page.waitForTimeout(200); // Wait for debounce to fire (166)
+
+      expect(pageErrors.length).to.equal(0);
+    });
+  });
 });