[test] Run React 18 integration tests with new createRoot API (#26672)

Co-authored-by: Siriwat K <[email protected]>
mui · Jul 5, 2021 · 699b5e9 · 699b5e9
1 parent fd7ccbc
commit 699b5e9
Show file tree

Hide file tree

Showing 45 changed files with 503 additions and 218 deletions.
diff --git a/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx b/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx
@@ -86,6 +86,8 @@ describe('<DesktopDatePicker />', () => {
         TransitionComponent={FakeTransitionComponent}
         renderInput={(params) => <TextField {...params} />}
       />,
+      // TODO: React18Compat
+      { legacyRoot: true },
     );
 
     act(() => {

diff --git a/packages/material-ui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.test.tsx b/packages/material-ui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.test.tsx
@@ -27,6 +27,8 @@ describe('<DesktopDateTimePicker />', () => {
         onChange={() => {}}
         renderInput={(params) => <TextField autoFocus {...params} />}
       />,
+      // TODO: React18Compat
+      { legacyRoot: true },
     );
 
     userEvent.mousePress(screen.getByLabelText(/choose date/i));

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -506,8 +506,8 @@ describe('<TreeItem />', () => {
 
           act(() => {
             screen.getByRole('tree').focus();
-            fireEvent.keyDown(screen.getByRole('tree'), { key: 'ArrowLeft' });
           });
+          fireEvent.keyDown(screen.getByRole('tree'), { key: 'ArrowLeft' });
 
           expect(firstItem).to.have.attribute('aria-expanded', 'false');
           expect(screen.getByTestId('one')).toHaveVirtualFocus();
@@ -1099,8 +1099,8 @@ describe('<TreeItem />', () => {
 
           act(() => {
             getByRole('tree').focus();
-            fireEvent.keyDown(getByRole('tree'), { key: ' ' });
           });
+          fireEvent.keyDown(getByRole('tree'), { key: ' ' });
 
           expect(getByTestId('one')).not.to.have.attribute('aria-selected');
         });
@@ -1440,16 +1440,16 @@ describe('<TreeItem />', () => {
             </TreeView>,
           );
 
+          fireEvent.click(getByText('five'));
+          fireEvent.click(getByText('five'));
           // Focus node five
           act(() => {
-            fireEvent.click(getByText('five'));
-            fireEvent.click(getByText('five'));
             getByRole('tree').focus();
-            fireEvent.keyDown(getByRole('tree'), {
-              key: 'End',
-              shiftKey: true,
-              ctrlKey: true,
-            });
+          });
+          fireEvent.keyDown(getByRole('tree'), {
+            key: 'End',
+            shiftKey: true,
+            ctrlKey: true,
           });
 
           expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0);

diff --git a/packages/material-ui-lab/src/TreeView/TreeView.test.js b/packages/material-ui-lab/src/TreeView/TreeView.test.js
@@ -172,6 +172,8 @@ describe('<TreeView />', () => {
 
     act(() => {
       getByRole('tree').focus();
+    });
+    act(() => {
       getByRole('tree').blur();
     });
 

diff --git a/packages/material-ui-lab/src/internal/pickers/test-utils.tsx b/packages/material-ui-lab/src/internal/pickers/test-utils.tsx
@@ -57,7 +57,10 @@ export function createPickerRender({
     );
   }
 
-  return (node: React.ReactElement) => clientRender(node, { wrapper: Wrapper });
+  return (
+    node: React.ReactElement,
+    options?: Omit<import('test/utils').RenderOptions, 'wrapper'>,
+  ) => clientRender(node, { ...options, wrapper: Wrapper });
 }
 
 export const queryByMuiTest = queryHelpers.queryByAttribute.bind(null, 'data-mui-test');

diff --git a/packages/material-ui-private-theming/src/ThemeProvider/ThemeProvider.test.js b/packages/material-ui-private-theming/src/ThemeProvider/ThemeProvider.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createClientRender } from 'test/utils';
+import { createClientRender, RenderCounter } from 'test/utils';
 import useTheme from '../useTheme';
 import ThemeProvider from './ThemeProvider';
 
@@ -49,24 +49,20 @@ describe('ThemeProvider', () => {
   });
 
   it('should memoize the merged output', () => {
-    const themes = [];
-
     const ref = React.createRef();
+    const getRenderCountRef = React.createRef();
     const text = () => ref.current.textContent;
     function Test() {
       const theme = useTheme();
-      React.useEffect(() => {
-        themes.push(theme);
-      });
-
       return (
-        <span ref={ref}>
-          {theme.foo}
-          {theme.bar}
-        </span>
+        <RenderCounter ref={getRenderCountRef}>
+          <span ref={ref}>
+            {theme.foo}
+            {theme.bar}
+          </span>
+        </RenderCounter>
       );
     }
-    const MemoTest = React.memo(Test);
 
     const outerTheme = { bar: 'bar' };
     const innerTheme = { foo: 'foo' };
@@ -75,7 +71,7 @@ describe('ThemeProvider', () => {
       return (
         <ThemeProvider theme={outerTheme}>
           <ThemeProvider theme={innerTheme}>
-            <MemoTest />
+            <Test />
           </ThemeProvider>
         </ThemeProvider>
       );
@@ -85,7 +81,7 @@ describe('ThemeProvider', () => {
     expect(text()).to.equal('foobar');
     setProps({});
     expect(text()).to.equal('foobar');
-    expect(themes).to.have.length(1);
+    expect(getRenderCountRef.current()).to.equal(2);
   });
 
   describe('warnings', () => {

diff --git a/packages/material-ui-unstyled/src/Portal/Portal.test.js b/packages/material-ui-unstyled/src/Portal/Portal.test.js
@@ -180,9 +180,13 @@ describe('<Portal />', () => {
 
     function Test(props) {
       const { container } = props;
+      const containerRef = React.useRef();
 
       React.useEffect(() => {
-        updateFunction();
+        if (containerRef.current !== container) {
+          updateFunction();
+        }
+        containerRef.current = container;
       }, [container]);
 
       return (

diff --git a/packages/material-ui-unstyled/src/Unstable_TrapFocus/Unstable_TrapFocus.test.js b/packages/material-ui-unstyled/src/Unstable_TrapFocus/Unstable_TrapFocus.test.js
@@ -15,7 +15,9 @@ describe('<TrapFocus />', () => {
     initialFocus = document.createElement('button');
     initialFocus.tabIndex = 0;
     document.body.appendChild(initialFocus);
-    initialFocus.focus();
+    act(() => {
+      initialFocus.focus();
+    });
   });
 
   afterEach(() => {
@@ -29,11 +31,15 @@ describe('<TrapFocus />', () => {
           <input autoFocus data-testid="auto-focus" />
         </div>
       </TrapFocus>,
+      // TODO: https://github.com/reactwg/react-18/discussions/18#discussioncomment-893076
+      { strictEffects: false },
     );
 
     expect(getByTestId('auto-focus')).toHaveFocus();
 
-    initialFocus.focus();
+    act(() => {
+      initialFocus.focus();
+    });
     expect(getByTestId('root')).toHaveFocus();
   });
 
@@ -44,11 +50,15 @@ describe('<TrapFocus />', () => {
           <input autoFocus data-testid="auto-focus" />
         </div>
       </TrapFocus>,
+      // TODO: https://github.com/reactwg/react-18/discussions/18#discussioncomment-893076s
+      { strictEffects: false },
     );
 
     expect(getByTestId('auto-focus')).toHaveFocus();
 
-    initialFocus.focus();
+    act(() => {
+      initialFocus.focus();
+    });
 
     expect(initialFocus).toHaveFocus();
   });
@@ -112,7 +122,9 @@ describe('<TrapFocus />', () => {
     }
     const { setProps } = render(<Test />);
     const portaledTextbox = screen.getByTestId('portal-input');
-    portaledTextbox.focus();
+    act(() => {
+      portaledTextbox.focus();
+    });
 
     // sanity check
     expect(portaledTextbox).toHaveFocus();
@@ -178,7 +190,11 @@ describe('<TrapFocus />', () => {
         </div>
       );
     }
-    const { setProps } = render(<Test />);
+    const { setProps } = render(<Test />, {
+      // Strict Effects interferes with the premise of the test.
+      // It would trigger a focus restore (i.e. a blur event)
+      strictEffects: false,
+    });
 
     // same behavior, just referential equality changes
     setProps({ isEnabled: () => true });
@@ -201,12 +217,16 @@ describe('<TrapFocus />', () => {
     const { setProps, getByRole } = render(<Test />);
     expect(screen.getByTestId('root')).toHaveFocus();
 
-    getByRole('textbox').focus();
+    act(() => {
+      getByRole('textbox').focus();
+    });
     expect(getByRole('textbox')).not.toHaveFocus();
 
     setProps({ isEnabled: () => false });
 
-    getByRole('textbox').focus();
+    act(() => {
+      getByRole('textbox').focus();
+    });
     expect(getByRole('textbox')).toHaveFocus();
   });
 
@@ -293,7 +313,9 @@ describe('<TrapFocus />', () => {
       const { setProps } = render(<WithRemovableElement />);
 
       expect(screen.getByTestId('root')).toHaveFocus();
-      screen.getByTestId('hide-button').focus();
+      act(() => {
+        screen.getByTestId('hide-button').focus();
+      });
       expect(screen.getByTestId('hide-button')).toHaveFocus();
 
       setProps({ hideButton: true });
@@ -313,10 +335,14 @@ describe('<TrapFocus />', () => {
           </div>,
         );
 
-        clock.tick(500); // trigger an interval call
+        act(() => {
+          clock.tick(500); // trigger an interval call
+        });
         expect(initialFocus).toHaveFocus();
 
-        getByRole('textbox').focus(); // trigger a focus event
+        act(() => {
+          getByRole('textbox').focus();
+        });
         expect(getByRole('textbox')).toHaveFocus();
       });
 
@@ -334,15 +360,21 @@ describe('<TrapFocus />', () => {
 
         expect(initialFocus).toHaveFocus();
 
-        screen.getByTestId('outside-input').focus();
+        act(() => {
+          screen.getByTestId('outside-input').focus();
+        });
         expect(screen.getByTestId('outside-input')).toHaveFocus();
 
         // the trap activates
-        screen.getByTestId('focus-input').focus();
+        act(() => {
+          screen.getByTestId('focus-input').focus();
+        });
         expect(screen.getByTestId('focus-input')).toHaveFocus();
 
         // the trap prevent to escape
-        screen.getByTestId('outside-input').focus();
+        act(() => {
+          screen.getByTestId('outside-input').focus();
+        });
         expect(screen.getByTestId('root')).toHaveFocus();
       });
 
@@ -361,11 +393,15 @@ describe('<TrapFocus />', () => {
         const { setProps } = render(<Test />);
 
         // set the expected focus restore location
-        screen.getByTestId('outside-input').focus();
+        act(() => {
+          screen.getByTestId('outside-input').focus();
+        });
         expect(screen.getByTestId('outside-input')).toHaveFocus();
 
         // the trap activates
-        screen.getByTestId('root').focus();
+        act(() => {
+          screen.getByTestId('root').focus();
+        });
         expect(screen.getByTestId('root')).toHaveFocus();
 
         // restore the focus to the first element before triggering the trap

diff --git a/packages/material-ui-utils/src/useIsFocusVisible.test.js b/packages/material-ui-utils/src/useIsFocusVisible.test.js
@@ -2,6 +2,7 @@ import { expect } from 'chai';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {
+  act,
   createClientRender,
   focusVisible,
   simulatePointerDevice,
@@ -48,7 +49,7 @@ const SimpleButton = React.forwardRef(function SimpleButton(props, ref) {
   );
 });
 
-describe('focus-visible polyfill', () => {
+describe('useIsFocusVisible', () => {
   const render = createClientRender();
 
   before(() => {
@@ -99,15 +100,19 @@ describe('focus-visible polyfill', () => {
 
       expect(button.classList.contains('focus-visible')).to.equal(false);
 
-      button.focus();
+      act(() => {
+        button.focus();
+      });
 
       if (programmaticFocusTriggersFocusVisible()) {
         expect(button).to.have.class('focus-visible');
       } else {
         expect(button).not.to.have.class('focus-visible');
       }
 
-      button.blur();
+      act(() => {
+        button.blur();
+      });
       focusVisible(button);
 
       expect(button.classList.contains('focus-visible')).to.equal(true);

diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.test.js b/packages/material-ui/src/Autocomplete/Autocomplete.test.js
@@ -27,7 +27,8 @@ function checkHighlightIs(listbox, expected) {
 }
 
 describe('<Autocomplete />', () => {
-  const render = createClientRender();
+  // TODO: React18Compat
+  const render = createClientRender({ legacyRoot: true });
 
   describeConformanceV5(
     <Autocomplete options={[]} renderInput={(params) => <TextField {...params} />} />,

diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { describeConformanceV5, act, createClientRender, screen } from 'test/utils';
+import { act, describeConformanceV5, createClientRender, screen } from 'test/utils';
 import Breadcrumbs, { breadcrumbsClasses as classes } from '@material-ui/core/Breadcrumbs';
 
 describe('<Breadcrumbs />', () => {

diff --git a/packages/material-ui/src/Button/Button.test.js b/packages/material-ui/src/Button/Button.test.js
@@ -321,8 +321,8 @@ describe('<Button />', () => {
     );
     const button = getByRole('button');
 
+    fireEvent.keyDown(document.body, { key: 'TAB' });
     act(() => {
-      fireEvent.keyDown(document.body, { key: 'TAB' });
       button.focus();
     });