fix(ui): extract ReactModal elementApp and fix act warning in ut

packages/ui/src/components/ConfirmModal/AcModal.tsx

@@ -27,7 +27,6 @@ const AcModal = ({
       isOpen={isOpen}
       className={classNames(styles.modal, className)}
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
-      appElement={document.querySelector('main') ?? undefined}
     >
       <div className={styles.container}>
         <div className={styles.header}>

packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx

@@ -32,7 +32,6 @@ const IframeConfirmModal = ({
       isOpen={isOpen}
       className={classNames(styles.modal, className)}
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
-      appElement={document.querySelector('main') ?? undefined}
     >
       <div className={styles.container}>
         <div className={styles.content}>

packages/ui/src/components/ConfirmModal/MobileModal.tsx

@@ -25,7 +25,6 @@ const MobileModal = ({
       isOpen={isOpen}
       className={classNames(styles.modal, className)}
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
-      appElement={document.querySelector('main') ?? undefined}
     >
       <div className={styles.container}>
         <div className={styles.content}>{children}</div>

packages/ui/src/components/Drawer/index.tsx

@@ -23,7 +23,6 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => {
       isOpen={isOpen}
       className={classNames(styles.drawer, className)}
       overlayClassName={modalStyles.overlay}
-      appElement={document.querySelector('main') ?? undefined}
       closeTimeoutMS={300}
       onRequestClose={onClose}
     >

packages/ui/src/containers/CreateAccount/index.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, waitFor, act } from '@testing-library/react';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
 import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider';
@@ -218,10 +218,12 @@ describe('<CreateAccount/>', () => {
     const termsButton = getByText('description.agree_with_terms');
     fireEvent.click(termsButton);
 
-    await waitFor(() => {
+    act(() => {
       fireEvent.click(submitButton);
     });
 
-    expect(register).toBeCalledWith('username', '123456');
+    await waitFor(() => {
+      expect(register).toBeCalledWith('username', '123456');
+    });
   });
 });

packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, waitFor, act } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@@ -78,11 +78,13 @@ describe('<EmailPasswordless/>', () => {
 
     const submitButton = getByText('action.continue');
 
-    await waitFor(() => {
+    act(() => {
       fireEvent.click(submitButton);
     });
 
-    expect(sendSignInEmailPasscode).toBeCalledWith('[email protected]');
+    await waitFor(() => {
+      expect(sendSignInEmailPasscode).toBeCalledWith('[email protected]');
+    });
   });
 
   test('should call register method properly', async () => {
@@ -103,10 +105,12 @@ describe('<EmailPasswordless/>', () => {
 
     const submitButton = getByText('action.continue');
 
-    await waitFor(() => {
+    act(() => {
       fireEvent.click(submitButton);
     });
 
-    expect(sendRegisterEmailPasscode).toBeCalledWith('[email protected]');
+    await waitFor(() => {
+      expect(sendRegisterEmailPasscode).toBeCalledWith('[email protected]');
+    });
   });
 });

packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, waitFor, act } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@@ -85,11 +85,13 @@ describe('<PhonePasswordless/>', () => {
 
     const submitButton = getByText('action.continue');
 
-    await waitFor(() => {
+    act(() => {
       fireEvent.click(submitButton);
     });
 
-    expect(sendSignInSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`);
+    await waitFor(() => {
+      expect(sendSignInSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`);
+    });
   });
 
   test('should call register method properly', async () => {
@@ -110,10 +112,12 @@ describe('<PhonePasswordless/>', () => {
 
     const submitButton = getByText('action.continue');
 
-    await waitFor(() => {
+    act(() => {
       fireEvent.click(submitButton);
     });
 
-    expect(sendRegisterSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`);
+    await waitFor(() => {
+      expect(sendRegisterSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`);
+    });
   });
 });

packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn/index.test.tsx

@@ -81,11 +81,13 @@ describe('SecondarySocialSignIn', () => {
     const socialButton = container.querySelector('button');
 
     if (socialButton) {
-      await waitFor(() => {
+      act(() => {
         fireEvent.click(socialButton);
       });
 
-      expect(invokeSocialSignInSpy).toBeCalled();
+      void waitFor(() => {
+        expect(invokeSocialSignInSpy).toBeCalled();
+      });
     }
   });
 

packages/ui/src/index.tsx

@@ -1,7 +1,9 @@
 import { createRoot } from 'react-dom/client';
+import ReactModal from 'react-modal';
 
 import App from './App';
 
 const app = document.querySelector('#app');
 const root = app && createRoot(app);
+ReactModal.setAppElement('#app');
 root?.render(<App />);

packages/ui/src/pages/SocialSignInCallback/index.test.tsx

@@ -1,4 +1,4 @@
-import { waitFor } from '@testing-library/react';
+import { waitFor, act } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@@ -41,8 +41,10 @@ describe('SocialCallbackPage with code', () => {
       </SettingsProvider>
     );
 
-    await waitFor(() => {
-      expect(signInWithSocialSpy).toBeCalled();
+    await act(async () => {
+      await waitFor(() => {
+        expect(signInWithSocialSpy).toBeCalled();
+      });
     });
   });
 });