Fix react canary tests (#6115)

Author: snowystinger

packages/@react-aria/interactions/test/useFocusVisible.test.js

@@ -14,7 +14,6 @@ import {addWindowFocusTracking, useFocusVisible, useFocusVisibleListener} from '
 import {hasSetupGlobalListeners} from '../src/useFocusVisible';
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
-import {render as ReactDOMRender} from 'react-dom';
 import {useButton} from '@react-aria/button';
 import {useFocusRing} from '@react-aria/focus';
 
@@ -120,7 +119,7 @@ describe('useFocusVisible', function () {
     });
 
     it('sets up focus listener in a different window', async function () {
-      ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
+      render(<Example id="iframe-example" />, {container: iframeRoot});
       await waitFor(() => {
         expect(document.querySelector('iframe').contentWindow.document.body.querySelector('div[id="iframe-example"]')).toBeTruthy();
       });
@@ -184,7 +183,7 @@ describe('useFocusVisible', function () {
     });
 
     it('removes the window object from the hasSetupGlobalListeners object on beforeunload', async function () {
-      ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
+      render(<Example id="iframe-example" />, {container: iframeRoot});
       expect(hasSetupGlobalListeners.size).toBe(1);
       expect(hasSetupGlobalListeners.get(window)).toBeTruthy();
       expect(hasSetupGlobalListeners.get(iframe.contentWindow)).toBeFalsy();
@@ -203,7 +202,7 @@ describe('useFocusVisible', function () {
     });
 
     it('removes the window object from the hasSetupGlobalListeners object if we preemptively tear down', async function () {
-      ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
+      render(<Example id="iframe-example" />, {container: iframeRoot});
       expect(hasSetupGlobalListeners.size).toBe(1);
       expect(hasSetupGlobalListeners.get(window)).toBeTruthy();
       expect(hasSetupGlobalListeners.get(iframe.contentWindow)).toBeFalsy();
@@ -221,7 +220,7 @@ describe('useFocusVisible', function () {
     });
 
     it('returns positive isFocusVisible result after toggling browser tabs after keyboard navigation', async function () {
-      ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
+      render(<Example id="iframe-example" />, {container: iframeRoot});
       addWindowFocusTracking(iframeRoot);
 
       // Fire focus in iframe
@@ -241,7 +240,7 @@ describe('useFocusVisible', function () {
     });
 
     it('returns negative isFocusVisible result after toggling browser tabs without prior keyboard navigation', async function () {
-      ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
+      render(<Example id="iframe-example" />, {container: iframeRoot});
       addWindowFocusTracking(iframeRoot);
 
       // Fire focus in iframe
@@ -259,7 +258,7 @@ describe('useFocusVisible', function () {
     });
 
     it('returns positive isFocusVisible result after toggling browser window after keyboard navigation', async function () {
-      ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
+      render(<Example id="iframe-example" />, {container: iframeRoot});
       addWindowFocusTracking(iframeRoot);
 
       // Fire focus in iframe
@@ -278,7 +277,7 @@ describe('useFocusVisible', function () {
     });
 
     it('returns negative isFocusVisible result after toggling browser window without prior keyboard navigation', async function () {
-      ReactDOMRender(<Example id="iframe-example" />, iframeRoot);
+      render(<Example id="iframe-example" />, {container: iframeRoot});
       addWindowFocusTracking(iframeRoot);
 
       // Fire focus in iframe
@@ -297,7 +296,7 @@ describe('useFocusVisible', function () {
     });
 
     it('correctly shifts focus to the iframe when the iframe is focused', async function () {
-      ReactDOMRender(<ButtonExample id="iframe-example" />, iframeRoot);
+      render(<ButtonExample id="iframe-example" />, {container: iframeRoot});
       addWindowFocusTracking(iframeRoot);
 
       // Fire focus in iframe

packages/@react-aria/overlays/stories/useModal.stories.tsx

@@ -28,6 +28,12 @@ export const DifferentContainer = {
   name: 'different container'
 };
 
+export const BadContainer = {
+  render: () => <BadApp />,
+  name: 'bad container',
+  parameters: {description: {data: 'this story should crash'}}
+};
+
 function App(props) {
   let [showModal, setShowModal] = useState(false);
   return (
@@ -64,3 +70,51 @@ function Example(props) {
     </OverlayProvider>
   );
 }
+
+function ModalDOM2(props) {
+  let {modalProps} = useModal();
+  return <div data-testid={props.modalId || 'modal'} {...modalProps}>{props.children}</div>;
+}
+
+function Modal2(props) {
+  return (
+    <OverlayContainer portalContainer={props.container} data-testid={props.providerId || 'modal-provider'}>
+      <ModalDOM2 modalId={props.modalId}>{props.children}</ModalDOM2>
+    </OverlayContainer>
+  );
+}
+
+function Example2(props) {
+  return (
+    <OverlayProvider data-testid="root-provider">
+      <>
+        This is the root provider.
+        {props.children}
+      </>
+    </OverlayProvider>
+  );
+}
+
+function BadApp() {
+  let [show1, setShow1] = useState(false);
+  let [show2, setShow2] = useState(false);
+  return (
+    <div id="alternateContainer" data-testid="alternate-container">
+      <ActionButton onPress={() => setShow1(prev => !prev)}>Toggle 1</ActionButton>
+      {show1 && (
+        <Example2>
+          <div id="nestedContainer" />
+          <ActionButton onPress={() => setShow2(prev => !prev)}>Toggle 2</ActionButton>
+          {show2 && (
+            <Modal2
+              container={document.getElementById('nestedContainer')}
+              providerId="inner-modal-provider"
+              modalId="inner-modal">
+              Inner
+            </Modal2>
+          )}
+        </Example2>
+      )}
+    </div>
+  );
+}

packages/@react-aria/overlays/test/useModal.test.js

@@ -180,18 +180,6 @@ describe('useModal', function () {
           </div>
         )
       ).toThrow();
-      expect.extend({
-        toHaveBeenNthCalledWithError(received, index, arg) {
-          return {
-            pass: received.mock.calls[index - 1].some(a => a.toString().includes(arg)),
-            message: () => `expected console.error to include ${arg}`
-          };
-        }
-      });
-      expect(console.error).toHaveBeenNthCalledWithError(
-        1,
-          'An OverlayContainer must not be inside another container. Please change the portalContainer prop.'
-      );
     });
   });
 });

packages/dev/test-utils/src/testSSR.js

@@ -12,7 +12,10 @@
 
 // Can't `import` babel, have to require?
 const babel = require('@babel/core');
-import {act} from '@testing-library/react';
+let act = require('react').act;
+if (!act) {
+  act = require('@testing-library/react').act;
+}
 import {evaluate} from './ssrUtils';
 import http from 'http';
 import React from 'react';

scripts/setupTests.js

@@ -33,7 +33,9 @@ if (!process.env.LISTENING_TO_UNHANDLED_REJECTION) {
   process.env.LISTENING_TO_UNHANDLED_REJECTION = true;
 }
 const ERROR_PATTERNS_WE_SHOULD_FIX_BUT_ALLOW = [
-  'ReactDOM.render is no longer supported in React 18'
+  'ReactDOM.render is no longer supported in React 18',
+  'ReactDOM.render has not been supported since React 18',
+  '`ReactDOMTestUtils.act` is deprecated in favor of `React.act`'
 ];
 
 const WARNING_PATTERNS_WE_SHOULD_FIX_BUT_ALLOW = [];