diff --git a/packages/ui/src/components/ConfirmModal/AcModal.tsx b/packages/ui/src/components/ConfirmModal/AcModal.tsx index a894e8ba0..10f8835b7 100644 --- a/packages/ui/src/components/ConfirmModal/AcModal.tsx +++ b/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} >
diff --git a/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx b/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx index eccf7076a..fb1cfae98 100644 --- a/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx +++ b/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} >
diff --git a/packages/ui/src/components/ConfirmModal/MobileModal.tsx b/packages/ui/src/components/ConfirmModal/MobileModal.tsx index a8ae6863f..fa0ab7a76 100644 --- a/packages/ui/src/components/ConfirmModal/MobileModal.tsx +++ b/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} >
{children}
diff --git a/packages/ui/src/components/Drawer/index.tsx b/packages/ui/src/components/Drawer/index.tsx index f56dd36d6..d3a303b71 100644 --- a/packages/ui/src/components/Drawer/index.tsx +++ b/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} > diff --git a/packages/ui/src/containers/CreateAccount/index.test.tsx b/packages/ui/src/containers/CreateAccount/index.test.tsx index 6d66906dc..8defc0c82 100644 --- a/packages/ui/src/containers/CreateAccount/index.test.tsx +++ b/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('', () => { 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'); + }); }); }); diff --git a/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx b/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx index c4efdba3b..83950e32a 100644 --- a/packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx +++ b/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('', () => { const submitButton = getByText('action.continue'); - await waitFor(() => { + act(() => { fireEvent.click(submitButton); }); - expect(sendSignInEmailPasscode).toBeCalledWith('foo@logto.io'); + await waitFor(() => { + expect(sendSignInEmailPasscode).toBeCalledWith('foo@logto.io'); + }); }); test('should call register method properly', async () => { @@ -103,10 +105,12 @@ describe('', () => { const submitButton = getByText('action.continue'); - await waitFor(() => { + act(() => { fireEvent.click(submitButton); }); - expect(sendRegisterEmailPasscode).toBeCalledWith('foo@logto.io'); + await waitFor(() => { + expect(sendRegisterEmailPasscode).toBeCalledWith('foo@logto.io'); + }); }); }); diff --git a/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx b/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx index 4e2d5edc0..9aab7f504 100644 --- a/packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx +++ b/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('', () => { 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('', () => { const submitButton = getByText('action.continue'); - await waitFor(() => { + act(() => { fireEvent.click(submitButton); }); - expect(sendRegisterSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`); + await waitFor(() => { + expect(sendRegisterSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`); + }); }); }); diff --git a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn/index.test.tsx b/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn/index.test.tsx index b36a98832..ef78bf38b 100644 --- a/packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn/index.test.tsx +++ b/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(); + }); } }); diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx index 2fff32634..8d87a3b4f 100644 --- a/packages/ui/src/index.tsx +++ b/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(); diff --git a/packages/ui/src/pages/SocialSignInCallback/index.test.tsx b/packages/ui/src/pages/SocialSignInCallback/index.test.tsx index a5a5edeb5..708ba3659 100644 --- a/packages/ui/src/pages/SocialSignInCallback/index.test.tsx +++ b/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', () => { ); - await waitFor(() => { - expect(signInWithSocialSpy).toBeCalled(); + await act(async () => { + await waitFor(() => { + expect(signInWithSocialSpy).toBeCalled(); + }); }); }); });