test(clerk-js): Cleanup act errors (#2462)

* test(clerk-js): Cleanup act errors

* test(clerk-js): Cleanup act errors

.changeset/rich-sloths-count.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx

@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/dom';
 import React from 'react';
 
 import { render, screen } from '../../../../testUtils';
@@ -19,8 +20,8 @@ describe('SignUpVerifyEmail', () => {
       f.startSignUpWithEmailAddress({ emailAddress: '[email protected]' });
     });
     fixtures.signUp.prepareEmailAddressVerification.mockRejectedValue(null);
-    render(<SignUpVerifyEmail />, { wrapper });
-    screen.getByText('[email protected]');
+    const { findByText } = render(<SignUpVerifyEmail />, { wrapper });
+    await waitFor(async () => expect(await findByText('[email protected]')).toBeInTheDocument());
   });
 
   it('shows the verify with link message', async () => {
@@ -36,8 +37,8 @@ describe('SignUpVerifyEmail', () => {
         } as any),
     );
 
-    render(<SignUpVerifyEmail />, { wrapper });
-    screen.getAllByText(/Verification Link/i);
+    const { findByText } = render(<SignUpVerifyEmail />, { wrapper });
+    await waitFor(async () => expect(await findByText(/Verification Link/i)).toBeInTheDocument());
   });
 
   it('shows the verify with code message', async () => {
@@ -48,9 +49,11 @@ describe('SignUpVerifyEmail', () => {
 
     fixtures.signUp.prepareEmailAddressVerification.mockRejectedValue(null);
 
-    render(<SignUpVerifyEmail />, { wrapper });
-    screen.getByText(/Verify your email/i);
-    screen.getByText(/Enter the verification code sent to your email/i);
+    const { findByText } = render(<SignUpVerifyEmail />, { wrapper });
+    await waitFor(async () => expect(await findByText(/Verify your email/i)).toBeInTheDocument());
+    await waitFor(async () =>
+      expect(await findByText(/Enter the verification code sent to your email/i)).toBeInTheDocument(),
+    );
   });
 
   it('clicking on the edit icon navigates to the previous route', async () => {
@@ -81,10 +84,8 @@ describe('SignUpVerifyEmail', () => {
           cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))),
         } as any),
     );
-
-    render(<SignUpVerifyEmail />, { wrapper });
-    const resendButton = screen.getByText(/Resend/i);
-    expect(resendButton.tagName.toUpperCase()).toBe('BUTTON');
+    const { findByText } = render(<SignUpVerifyEmail />, { wrapper });
+    await waitFor(async () => expect((await findByText(/Resend/i)).tagName.toUpperCase()).toBe('BUTTON'));
   });
 
   it('Resend code button exists', async () => {
@@ -95,9 +96,8 @@ describe('SignUpVerifyEmail', () => {
 
     fixtures.signUp.prepareEmailAddressVerification.mockRejectedValue(null);
 
-    render(<SignUpVerifyEmail />, { wrapper });
-    const resendButton = screen.getByText(/Resend/i);
-    expect(resendButton.tagName.toUpperCase()).toBe('BUTTON');
+    const { findByText } = render(<SignUpVerifyEmail />, { wrapper });
+    await waitFor(async () => expect((await findByText(/Resend/i)).tagName.toUpperCase()).toBe('BUTTON'));
   });
 
   it.todo('Resend link button is pressable after 60 seconds');

packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx

@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/dom';
 import React from 'react';
 
 import { render, screen } from '../../../../testUtils';
@@ -19,8 +20,8 @@ describe('SignUpVerifyPhone', () => {
       f.startSignUpWithPhoneNumber({ phoneNumber: '+306911111111' });
     });
     fixtures.signUp.preparePhoneNumberVerification.mockRejectedValue(null);
-    render(<SignUpVerifyPhone />, { wrapper });
-    screen.getByText('+30 691 1111111');
+    const { findByText } = render(<SignUpVerifyPhone />, { wrapper });
+    await waitFor(async () => expect(await findByText('+30 691 1111111')).toBeInTheDocument());
   });
 
   it('shows the verify with code message', async () => {
@@ -29,9 +30,11 @@ describe('SignUpVerifyPhone', () => {
       f.startSignUpWithPhoneNumber();
     });
     fixtures.signUp.preparePhoneNumberVerification.mockRejectedValue(null);
-    render(<SignUpVerifyPhone />, { wrapper });
-    screen.getByText(/Verify your phone/i);
-    screen.getByText(/Enter the verification code sent to your phone/i);
+    const { findByText } = render(<SignUpVerifyPhone />, { wrapper });
+    await waitFor(async () => expect(await findByText(/Verify your phone/i)).toBeInTheDocument());
+    await waitFor(async () =>
+      expect(await findByText(/Enter the verification code sent to your phone/i)).toBeInTheDocument(),
+    );
   });
 
   it('clicking on the edit icon navigates to the previous route', async () => {
@@ -55,9 +58,8 @@ describe('SignUpVerifyPhone', () => {
       f.startSignUpWithEmailAddress({ emailAddress: '[email protected]' });
     });
     fixtures.signUp.preparePhoneNumberVerification.mockRejectedValue(null);
-    render(<SignUpVerifyPhone />, { wrapper });
-    const resendButton = screen.getByText(/Resend/i);
-    expect(resendButton.tagName.toUpperCase()).toBe('BUTTON');
+    const { findByText } = render(<SignUpVerifyPhone />, { wrapper });
+    await waitFor(async () => expect((await findByText(/Resend/i)).tagName.toUpperCase()).toBe('BUTTON'));
   });
 
   it.todo('Resend code button is pressable after 30 seconds');